From 43eb05af5a19b006b8e2c648e4ea6cab0c012f3e Mon Sep 17 00:00:00 2001
From: Sean Edmunds <sean.edmunds@cottonteam.com>
Date: Thu, 2 Jan 2025 14:49:09 -0600
Subject: [PATCH] Style fixes

---
 src/components/DataTable/DataTable.tsx        | 39 ++++++++++----
 src/components/WeatherModal/HourlyCard.tsx    | 17 ++++--
 .../WeatherModal/SmallOutlookCard.tsx         | 13 ++---
 .../WeatherModal/SmallWeatherCard.tsx         | 24 +++++----
 src/components/WeatherModal/WeatherModal.tsx  | 34 ++++++++----
 src/dataTableStyles.css                       | 27 +++++-----
 .../homepage/components/Header/Header.tsx     | 53 ++++++++++---------
 src/pages/settings/Settings.tsx               | 38 +++++++++----
 src/styles/Tabs.module.css                    |  9 +++-
 9 files changed, 165 insertions(+), 89 deletions(-)

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index e7dd04a..1180815 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -81,7 +81,13 @@ export function DataTableComponent({
 			showLoadingOverlay: isLoading,
 			isLoading: isLoading,
 		},
-		mantinePaperProps: { className: 'root' },
+		mantinePaperProps: {
+			className: 'root',
+			style: {
+				height: '75vh',
+				overflow: 'scroll',
+			},
+		},
 		renderRowActions: ({ row, table }) => (
 			<Flex gap='md'>
 				<ActionIcon
@@ -97,20 +103,31 @@ export function DataTableComponent({
 			</Flex>
 		),
 		mantineCreateRowModalProps: {
-			style: {
-				color: theme.primaryColor,
+			styles: {
+				root: {
+					color: theme.primaryColor,
+				},
+				content: {
+					color: theme.primaryColor,
+				},
 			},
 		},
+		renderCreateRowModalContent: ({ row }) => undefined,
 		renderTopToolbarCustomActions: ({ table }) => {
 			return (
-				<Button
-					className={buttonClasses.tableButton}
-					classNames={buttonClasses}
-					disabled={tableName === 'Personalization'}
-					onClick={() => table.setCreatingRow(true)}
-				>
-					<FiPlus />
-				</Button>
+				<>
+					{tableName !== 'Personalization' && (
+						<Button
+							className={buttonClasses.tableButton}
+							classNames={buttonClasses}
+							onClick={() => {
+								table.setCreatingRow(true);
+							}}
+						>
+							<FiPlus />
+						</Button>
+					)}
+				</>
 			);
 		},
 	});
diff --git a/src/components/WeatherModal/HourlyCard.tsx b/src/components/WeatherModal/HourlyCard.tsx
index e474bcb..e7e834d 100644
--- a/src/components/WeatherModal/HourlyCard.tsx
+++ b/src/components/WeatherModal/HourlyCard.tsx
@@ -12,9 +12,9 @@ export enum WindDirection {
 	NW = 315,
 }
 
-export default function HourlyCard({ weather }: any) {
+export default function HourlyCard({ weather, isMobile }: any) {
 	return (
-		<Stack gap={0} align='center'>
+		<Stack gap={0} align='center' mx={isMobile ? '.25rem' : 0}>
 			<Card
 				style={{
 					height: '8rem',
@@ -34,7 +34,7 @@ export default function HourlyCard({ weather }: any) {
 								day: 'numeric',
 							})}
 						</Text>
-						<Text fz={12} style={{ zIndex: 2 }}>
+						<Text fz={12} style={{ zIndex: 2, color: 'black' }}>
 							{new Date(weather.startTime).toLocaleTimeString('en-US', {
 								hour: 'numeric',
 								minute: 'numeric',
@@ -73,11 +73,16 @@ export default function HourlyCard({ weather }: any) {
 								style={{
 									position: 'absolute',
 									transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
+									color: 'black',
 								}}
 							/>
-							<Icon fontSize={28} icon={'mdi:circle-outline'} />
+							<Icon
+								fontSize={28}
+								icon={'mdi:circle-outline'}
+								style={{ color: 'black' }}
+							/>
 						</Center>
-						<Text mt={-6} fz={12}>
+						<Text mt={-6} fz={12} style={{ color: 'black' }}>
 							{weather.windSpeed}
 						</Text>
 					</Stack>
@@ -91,6 +96,7 @@ export default function HourlyCard({ weather }: any) {
 					textAlign: 'center',
 					borderRadius: '4px',
 					background: 'rgba(0, 0, 0, 0.6)',
+					color: 'white',
 				}}
 			>
 				{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
@@ -103,6 +109,7 @@ export default function HourlyCard({ weather }: any) {
 					textAlign: 'center',
 					borderRadius: '4px',
 					background: 'rgba(0, 0, 0, 0.6)',
+					color: 'white',
 				}}
 			>
 				<Group gap={0} justify='center'>
diff --git a/src/components/WeatherModal/SmallOutlookCard.tsx b/src/components/WeatherModal/SmallOutlookCard.tsx
index 140998e..fdfc497 100644
--- a/src/components/WeatherModal/SmallOutlookCard.tsx
+++ b/src/components/WeatherModal/SmallOutlookCard.tsx
@@ -32,25 +32,26 @@ export default function SmallOutlookCard({ weather }: any) {
 							style={{
 								position: 'absolute',
 								transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
+								color: 'white',
 							}}
 						/>
-						<Icon fontSize={32} icon={'mdi:circle-outline'} />
+						<Icon fontSize={32} icon={'mdi:circle-outline'} style={{ color: 'white' }} />
 					</Center>
-					<Text mt={-6} fz={12}>
+					<Text mt={-6} fz={12} style={{ color: 'white' }}>
 						{weather.windSpeed}
 					</Text>
 				</Stack>
 				<Stack gap={0} pos={'absolute'} bottom={8}>
-					<Text mt={-4} mb={-4} fz={14}>
+					<Text mt={-4} mb={-4} fz={14} style={{ color: 'white' }}>
 						Precip:
 					</Text>
-					<Text mt={-8} mb={-8} p={0} fz={24}>
+					<Text mt={-8} mb={-8} p={0} fz={24} style={{ color: 'white' }}>
 						{weather.precipitation}%
 					</Text>
-					<Text mt={-4} mb={-4} fz={14}>
+					<Text mt={-4} mb={-4} fz={14} style={{ color: 'white' }}>
 						{weather.isDayTime ? 'High of:' : 'Low of:'}
 					</Text>
-					<Text mt={-8} mb={-8} p={0} fz={36}>
+					<Text mt={-8} mb={-8} p={0} fz={36} style={{ color: 'white' }}>
 						{weather.temperature}°F
 					</Text>
 				</Stack>
diff --git a/src/components/WeatherModal/SmallWeatherCard.tsx b/src/components/WeatherModal/SmallWeatherCard.tsx
index 10f16df..d9dda59 100644
--- a/src/components/WeatherModal/SmallWeatherCard.tsx
+++ b/src/components/WeatherModal/SmallWeatherCard.tsx
@@ -14,41 +14,47 @@ export default function SmallWeatherCard({ weather }: any) {
 				/>
 			</Box>
 			<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
-				<Text mb={-8} p={0} fz={12}>
+				<Text mb={-8} p={0} fz={12} style={{ color: 'white' }}>
 					{weather.highTemp}°F/{weather.lowTemp}°F
 				</Text>
 				<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
 					{weather.precipitation !== 'N/A' && (
 						<Group gap={0}>
-							<Icon icon={'mdi:weather-pouring'} height={32} width={32} />
-							<Text>{weather.precipitation} mm</Text>
+							<Icon color={'white'} icon={'mdi:weather-pouring'} height={32} width={32} />
+							<Text style={{ color: 'white' }}>{weather.precipitation} mm</Text>
 						</Group>
 					)}
 					{weather.precipitation === 'N/A' && (
-						<Icon icon={'mdi:white-balance-sunny'} height={32} width={32} />
+						<Icon
+							icon={'mdi:white-balance-sunny'}
+							height={32}
+							width={32}
+							color={'white'}
+						/>
 					)}
 					<Center>
 						<Icon
 							icon={'mdi:navigation'}
+							color='white'
 							style={{
 								position: 'absolute',
 								transform: `rotate(${weather.windDirection}deg)`,
 							}}
 						/>
-						<Icon fontSize={32} icon={'mdi:circle-outline'} />
+						<Icon fontSize={32} icon={'mdi:circle-outline'} color='white' />
 					</Center>
-					<Text mt={-6} fz={12}>
+					<Text mt={-6} fz={12} style={{ color: 'white' }}>
 						{weather.windSpeed} mph
 					</Text>
 				</Stack>
 				<Stack gap={0} pos={'absolute'} bottom={8}>
-					<Text mt={-8} mb={-8} p={0} fz={36}>
+					<Text mt={-8} mb={-8} p={0} fz={36} style={{ color: 'white' }}>
 						{weather.temperature}°F
 					</Text>
-					<Text mt={-8} fz={12}>
+					<Text mt={-8} fz={12} style={{ color: 'white' }}>
 						Feels like: {weather.heatIndex}°F
 					</Text>
-					<Text mt={-6} fz={12}>
+					<Text mt={-6} fz={12} style={{ color: 'white' }}>
 						Humidity: {weather.humidity}%
 					</Text>
 				</Stack>
diff --git a/src/components/WeatherModal/WeatherModal.tsx b/src/components/WeatherModal/WeatherModal.tsx
index 633cea4..6a22143 100644
--- a/src/components/WeatherModal/WeatherModal.tsx
+++ b/src/components/WeatherModal/WeatherModal.tsx
@@ -1,4 +1,4 @@
-import { Center, Divider, Group, Modal, Stack } from '@mantine/core';
+import { Box, Center, Divider, Group, Modal, Stack } from '@mantine/core';
 import { useAtom } from 'jotai';
 import { modalClasses } from 'styles';
 import SmallOutlookCard from './SmallOutlookCard';
@@ -17,6 +17,7 @@ export function WeatherModal({
 	setValue,
 	setProviderLabel,
 	setProviderURL,
+	isMobile,
 }: any) {
 	const [theme, _] = useAtom(appTheme);
 	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
@@ -42,6 +43,7 @@ export function WeatherModal({
 	}, [hourlyForecast]);
 	return (
 		<Modal.Root
+			fullScreen={isMobile}
 			size={'60%'}
 			className={modalClasses.helpModal}
 			classNames={modalClasses}
@@ -71,19 +73,23 @@ export function WeatherModal({
 				</Modal.Header>
 				<Modal.Body pb={'2rem'}>
 					<Center w={'100%'}>
-						<Stack>
+						<Stack w={'100%'}>
 							<Group gap={0} w={'100%'} align='center' justify='center'>
 								<Stack gap={0} align='center'>
-									<h3 style={{ padding: 0, margin: 0 }}>Currently</h3>
+									<h3 style={{ padding: 0, margin: 0, color: 'white' }}>Currently</h3>
 									<Stack>
 										<SmallWeatherCard weather={current} />
 									</Stack>
 								</Stack>
-								<Divider orientation='vertical' mx={16} color={theme.accentColor} />
+								<Divider
+									orientation={isMobile ? 'horizontal' : 'vertical'}
+									mx={16}
+									color={theme.accentColor}
+								/>
 								<Group gap={8}>
 									{outlook.map((o: any) => (
 										<Stack key={o.name} gap={0} align='center'>
-											<h3 style={{ padding: 0, margin: 0 }}>{o.name}</h3>
+											<h3 style={{ padding: 0, margin: 0, color: 'white' }}>{o.name}</h3>
 											<Stack>
 												<SmallOutlookCard weather={o} />
 											</Stack>
@@ -102,10 +108,20 @@ export function WeatherModal({
 									borderRadius: '.5rem',
 								}}
 							>
-								{hourlyForecast.length > 0 &&
-									hourlyForecast.map((h: any) => {
-										return <HourlyCard key={h.time} weather={h} />;
-									})}
+								<Box
+									style={{
+										display: 'flex',
+										overflow: 'auto',
+										whiteSpace: 'nowrap',
+										justifyContent: 'space-between',
+										width: '100%',
+									}}
+								>
+									{hourlyForecast.length > 0 &&
+										hourlyForecast.map((h: any) => {
+											return <HourlyCard key={h.time} weather={h} isMobile={isMobile} />;
+										})}
+								</Box>
 							</Group>
 						</Stack>
 					</Center>
diff --git a/src/dataTableStyles.css b/src/dataTableStyles.css
index d955f38..08e4ea1 100644
--- a/src/dataTableStyles.css
+++ b/src/dataTableStyles.css
@@ -1,16 +1,16 @@
 .root {
 	--mrt-base-background-color: var(--color-background);
-	--mrt-striped-row-background-color: var();
-	--mrt-row-hover-background-color: var();
-	--mrt-striped-row-hover-background-color: var();
-	--mrt-selected-row-background-color: var();
-	--mrt-selected-row-hover-background-color: var();
-	--mrt-pinned-row-background-color: var();
-	--mrt-pinned-row-hover-background-color: var();
-	--mrt-pinned-column-background-color: var();
-	--mrt-dragging-hovered-border-color: var();
-	--mrt-dragging-drag-border-color: var();
-	--mrt-resize-column-border-color: var();
+	--mrt-striped-row-background-color: var(--color-background);
+	--mrt-row-hover-background-color: var(--color-background);
+	--mrt-striped-row-hover-background-color: var(--color-background);
+	--mrt-selected-row-background-color: var(--color-text-pri);
+	--mrt-selected-row-hover-background-color: var(--color-background);
+	--mrt-pinned-row-background-color: var(--color-background);
+	--mrt-pinned-row-hover-background-color: var(--color-background);
+	--mrt-pinned-column-background-color: var(--color-background);
+	--mrt-dragging-hovered-border-color: var(--color-background);
+	--mrt-dragging-drag-border-color: var(--color-background);
+	--mrt-resize-column-border-color: var(--color-background);
 	color: var(--color-text-pri) !important;
 }
 
@@ -26,6 +26,7 @@
 	color: var(--color-text-pri) !important;
 }
 
-.mantine-Select-option {
-	color: var(--color-text-pri) !important;
+.mantine-Select-options {
+	color: black !important;
+	background-color: white !important;
 }
\ No newline at end of file
diff --git a/src/pages/homepage/components/Header/Header.tsx b/src/pages/homepage/components/Header/Header.tsx
index 5ddd105..8fd99b9 100644
--- a/src/pages/homepage/components/Header/Header.tsx
+++ b/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>
 	);
diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx
index 497ca83..aa48f7f 100644
--- a/src/pages/settings/Settings.tsx
+++ b/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 />
diff --git a/src/styles/Tabs.module.css b/src/styles/Tabs.module.css
index ced563a..a7760bc 100644
--- a/src/styles/Tabs.module.css
+++ b/src/styles/Tabs.module.css
@@ -1,7 +1,11 @@
 .settingsTabs {
+    @media (max-width: 600px) {
+        .panel {
+            padding-left: 0 !important;
+        }
+    }
     .panel {
         padding-left: 2rem;
-        height: 100%;
     }
     .tab {
         color: var(--color-text-pri);
@@ -17,4 +21,5 @@
     .list::before {
         border-color: var(--color-text-acc);
     }
-}
\ No newline at end of file
+}
+