Style fixes

src/pages/homepage/components/Header/Header.tsx

@@ -104,36 +104,40 @@ function Header({
 				</Text>
 				<Group
 					style={{
+						position: 'relative',
 						justifyContent: isMobile ? 'right' : 'space-between',
 						width: '100%',
 						gap: 0,
 					}}
 				>
-					{!isMobile && (
-						<Group
-							gap={0}
-							align='end'
-							style={{ display: 'flex' }}
-							onClick={openWeatherModal}
+					<Group
+						gap={0}
+						align='end'
+						style={{
+							display: 'flex',
+							position: 'absolute',
+							bottom: isMobile ? -32 : 0,
+							right: 16,
+						}}
+						onClick={openWeatherModal}
+					>
+						<Text
+							component='h2'
+							mr={4}
+							className={textClasses.dateTime}
+							classNames={textClasses}
 						>
-							<Text
-								component='h2'
-								mr={4}
-								className={textClasses.dateTime}
-								classNames={textClasses}
-							>
-								{current.temperature}°F
-							</Text>
-							<Text
-								mb={6}
-								className={textClasses.dateTime}
-								classNames={textClasses}
-								fz={14}
-							>
-								{current.highTemp}°F/{current.lowTemp}°F
-							</Text>
-						</Group>
-					)}
+							{current.temperature}°F
+						</Text>
+						<Text
+							mb={6}
+							className={textClasses.dateTime}
+							classNames={textClasses}
+							fz={14}
+						>
+							{current.highTemp}°F/{current.lowTemp}°F
+						</Text>
+					</Group>
 					<Text component='h2' className={textClasses.dateTime} classNames={textClasses}>
 						{`${
 							time.getHours() === 0
@@ -154,6 +158,7 @@ function Header({
 				setValue={setValue}
 				setProviderLabel={setProviderLabel}
 				setProviderURL={setProviderURL}
+				isMobile={isMobile}
 			/>
 		</Stack>
 	);

src/pages/settings/Settings.tsx

@@ -1,5 +1,14 @@
 import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core';
-import { FiArrowLeftCircle } from 'react-icons/fi';
+import {
+	FiArrowLeftCircle,
+	FiBook,
+	FiBookmark,
+	FiEdit,
+	FiGlobe,
+	FiMail,
+	FiSearch,
+	FiUser,
+} from 'react-icons/fi';
 import { actionIconClasses, tabClasses, textClasses } from 'styles';
 import Applications from './components/Applications';
 import Bookmarks from './components/Bookmarks';
@@ -10,8 +19,9 @@ import SearchProviders from './components/SearchProviders';
 import Themes from './components/Themes';
 
 export function Settings({ theme }: any) {
+	const isMobile = window.matchMedia('(max-width: 600px)').matches;
 	return (
-		<Stack h={'100vh'} px={'2rem'}>
+		<Stack px={'2rem'}>
 			<Group gap={0}>
 				<ActionIcon
 					className={actionIconClasses.backButton}
@@ -26,19 +36,27 @@ export function Settings({ theme }: any) {
 				</Text>
 			</Group>
 			<Tabs
-				orientation='vertical'
+				orientation={isMobile ? 'horizontal' : 'vertical'}
 				defaultValue={'personalization'}
 				className={tabClasses.settingsTabs}
 				classNames={tabClasses}
 			>
 				<Tabs.List>
-					<Tabs.Tab value='personalization'>Personal Info</Tabs.Tab>
-					<Tabs.Tab value='messages'>Messages</Tabs.Tab>
-					<Tabs.Tab value='applications'>Applications</Tabs.Tab>
-					<Tabs.Tab value='bookmarks'>Bookmarks</Tabs.Tab>
-					<Tabs.Tab value='bookmarksCategories'>Categories</Tabs.Tab>
-					<Tabs.Tab value='themes'>Themes</Tabs.Tab>
-					<Tabs.Tab value='providers'>Search Providers</Tabs.Tab>
+					<Tabs.Tab value='personalization'>
+						{isMobile ? <FiUser /> : 'Personal Info'}
+					</Tabs.Tab>
+					<Tabs.Tab value='messages'>{isMobile ? <FiMail /> : 'Messages'}</Tabs.Tab>
+					<Tabs.Tab value='applications'>
+						{isMobile ? <FiGlobe /> : 'Applications'}
+					</Tabs.Tab>
+					<Tabs.Tab value='bookmarks'>{isMobile ? <FiBookmark /> : 'Bookmarks'}</Tabs.Tab>
+					<Tabs.Tab value='bookmarksCategories'>
+						{isMobile ? <FiBook /> : 'Categories'}
+					</Tabs.Tab>
+					<Tabs.Tab value='themes'>{isMobile ? <FiEdit /> : 'Themes'}</Tabs.Tab>
+					<Tabs.Tab value='providers'>
+						{isMobile ? <FiSearch /> : 'Search Providers'}
+					</Tabs.Tab>
 				</Tabs.List>
 				<Tabs.Panel value='personalization'>
 					<Personalization />