smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Style fixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-01-02 14:49:09 -06:00
parent ba34fdea7d
commit 43eb05af5a
9 changed files with 165 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/DataTable/DataTable.tsx
View File

@@ -81,7 +81,13 @@ export function DataTableComponent({
showLoadingOverlay: isLoading, showLoadingOverlay: isLoading,
isLoading: isLoading, isLoading: isLoading,
}, },
mantinePaperProps: { className: 'root' }, mantinePaperProps: {
className: 'root',
style: {
height: '75vh',
overflow: 'scroll',
},
},
renderRowActions: ({ row, table }) => ( renderRowActions: ({ row, table }) => (
<Flex gap='md'> <Flex gap='md'>
<ActionIcon <ActionIcon
@@ -97,20 +103,31 @@ export function DataTableComponent({
</Flex> </Flex>
), ),
mantineCreateRowModalProps: { mantineCreateRowModalProps: {
style: { styles: {
root: {
color: theme.primaryColor,
},
content: {
color: theme.primaryColor, color: theme.primaryColor,
}, },
}, },
},
renderCreateRowModalContent: ({ row }) => undefined,
renderTopToolbarCustomActions: ({ table }) => { renderTopToolbarCustomActions: ({ table }) => {
return ( return (
<>
{tableName !== 'Personalization' && (
<Button <Button
className={buttonClasses.tableButton} className={buttonClasses.tableButton}
classNames={buttonClasses} classNames={buttonClasses}
disabled={tableName === 'Personalization'} onClick={() => {
onClick={() => table.setCreatingRow(true)} table.setCreatingRow(true);
}}
> >
<FiPlus /> <FiPlus />
</Button> </Button>
)}
</>
); );
}, },
}); });

17
src/components/WeatherModal/HourlyCard.tsx
View File

@@ -12,9 +12,9 @@ export enum WindDirection {
NW = 315, NW = 315,
} }
export default function HourlyCard({ weather }: any) { export default function HourlyCard({ weather, isMobile }: any) {
return ( return (
<Stack gap={0} align='center'> <Stack gap={0} align='center' mx={isMobile ? '.25rem' : 0}>
<Card <Card
style={{ style={{
height: '8rem', height: '8rem',
@@ -34,7 +34,7 @@ export default function HourlyCard({ weather }: any) {
day: 'numeric', day: 'numeric',
})} })}
</Text> </Text>
<Text fz={12} style={{ zIndex: 2 }}> <Text fz={12} style={{ zIndex: 2, color: 'black' }}>
{new Date(weather.startTime).toLocaleTimeString('en-US', { {new Date(weather.startTime).toLocaleTimeString('en-US', {
hour: 'numeric', hour: 'numeric',
minute: 'numeric', minute: 'numeric',
@@ -73,11 +73,16 @@ export default function HourlyCard({ weather }: any) {
style={{ style={{
position: 'absolute', position: 'absolute',
transform: `rotate(${WindDirection[weather.windDirection]}deg)`, 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> </Center>
<Text mt={-6} fz={12}> <Text mt={-6} fz={12} style={{ color: 'black' }}>
{weather.windSpeed} {weather.windSpeed}
</Text> </Text>
</Stack> </Stack>
@@ -91,6 +96,7 @@ export default function HourlyCard({ weather }: any) {
textAlign: 'center', textAlign: 'center',
borderRadius: '4px', borderRadius: '4px',
background: 'rgba(0, 0, 0, 0.6)', background: 'rgba(0, 0, 0, 0.6)',
color: 'white',
}} }}
> >
{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}% {weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
@@ -103,6 +109,7 @@ export default function HourlyCard({ weather }: any) {
textAlign: 'center', textAlign: 'center',
borderRadius: '4px', borderRadius: '4px',
background: 'rgba(0, 0, 0, 0.6)', background: 'rgba(0, 0, 0, 0.6)',
color: 'white',
}} }}
> >
<Group gap={0} justify='center'> <Group gap={0} justify='center'>

13
src/components/WeatherModal/SmallOutlookCard.tsx
View File

@@ -32,25 +32,26 @@ export default function SmallOutlookCard({ weather }: any) {
style={{ style={{
position: 'absolute', position: 'absolute',
transform: `rotate(${WindDirection[weather.windDirection]}deg)`, 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> </Center>
<Text mt={-6} fz={12}> <Text mt={-6} fz={12} style={{ color: 'white' }}>
{weather.windSpeed} {weather.windSpeed}
</Text> </Text>
</Stack> </Stack>
<Stack gap={0} pos={'absolute'} bottom={8}> <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: Precip:
</Text> </Text>
<Text mt={-8} mb={-8} p={0} fz={24}> <Text mt={-8} mb={-8} p={0} fz={24} style={{ color: 'white' }}>
{weather.precipitation}% {weather.precipitation}%
</Text> </Text>
<Text mt={-4} mb={-4} fz={14}> <Text mt={-4} mb={-4} fz={14} style={{ color: 'white' }}>
{weather.isDayTime ? 'High of:' : 'Low of:'} {weather.isDayTime ? 'High of:' : 'Low of:'}
</Text> </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 {weather.temperature}°F
</Text> </Text>
</Stack> </Stack>

24
src/components/WeatherModal/SmallWeatherCard.tsx
View File

@@ -14,41 +14,47 @@ export default function SmallWeatherCard({ weather }: any) {
/> />
</Box> </Box>
<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}> <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 {weather.highTemp}°F/{weather.lowTemp}°F
</Text> </Text>
<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}> <Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
{weather.precipitation !== 'N/A' && ( {weather.precipitation !== 'N/A' && (
<Group gap={0}> <Group gap={0}>
<Icon icon={'mdi:weather-pouring'} height={32} width={32} /> <Icon color={'white'} icon={'mdi:weather-pouring'} height={32} width={32} />
<Text>{weather.precipitation} mm</Text> <Text style={{ color: 'white' }}>{weather.precipitation} mm</Text>
</Group> </Group>
)} )}
{weather.precipitation === 'N/A' && ( {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> <Center>
<Icon <Icon
icon={'mdi:navigation'} icon={'mdi:navigation'}
color='white'
style={{ style={{
position: 'absolute', position: 'absolute',
transform: `rotate(${weather.windDirection}deg)`, transform: `rotate(${weather.windDirection}deg)`,
}} }}
/> />
<Icon fontSize={32} icon={'mdi:circle-outline'} /> <Icon fontSize={32} icon={'mdi:circle-outline'} color='white' />
</Center> </Center>
<Text mt={-6} fz={12}> <Text mt={-6} fz={12} style={{ color: 'white' }}>
{weather.windSpeed} mph {weather.windSpeed} mph
</Text> </Text>
</Stack> </Stack>
<Stack gap={0} pos={'absolute'} bottom={8}> <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 {weather.temperature}°F
</Text> </Text>
<Text mt={-8} fz={12}> <Text mt={-8} fz={12} style={{ color: 'white' }}>
Feels like: {weather.heatIndex}°F Feels like: {weather.heatIndex}°F
</Text> </Text>
<Text mt={-6} fz={12}> <Text mt={-6} fz={12} style={{ color: 'white' }}>
Humidity: {weather.humidity}% Humidity: {weather.humidity}%
</Text> </Text>
</Stack> </Stack>

28
src/components/WeatherModal/WeatherModal.tsx
View File

@@ -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 { useAtom } from 'jotai';
import { modalClasses } from 'styles'; import { modalClasses } from 'styles';
import SmallOutlookCard from './SmallOutlookCard'; import SmallOutlookCard from './SmallOutlookCard';
@@ -17,6 +17,7 @@ export function WeatherModal({
setValue, setValue,
setProviderLabel, setProviderLabel,
setProviderURL, setProviderURL,
isMobile,
}: any) { }: any) {
const [theme, _] = useAtom(appTheme); const [theme, _] = useAtom(appTheme);
const [hourlyForecast, setHourlyForecast] = useState<any>([]); const [hourlyForecast, setHourlyForecast] = useState<any>([]);
@@ -42,6 +43,7 @@ export function WeatherModal({
}, [hourlyForecast]); }, [hourlyForecast]);
return ( return (
<Modal.Root <Modal.Root
fullScreen={isMobile}
size={'60%'} size={'60%'}
className={modalClasses.helpModal} className={modalClasses.helpModal}
classNames={modalClasses} classNames={modalClasses}
@@ -71,19 +73,23 @@ export function WeatherModal({
</Modal.Header> </Modal.Header>
<Modal.Body pb={'2rem'}> <Modal.Body pb={'2rem'}>
<Center w={'100%'}> <Center w={'100%'}>
<Stack> <Stack w={'100%'}>
<Group gap={0} w={'100%'} align='center' justify='center'> <Group gap={0} w={'100%'} align='center' justify='center'>
<Stack gap={0} align='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> <Stack>
<SmallWeatherCard weather={current} /> <SmallWeatherCard weather={current} />
</Stack> </Stack>
</Stack> </Stack>
<Divider orientation='vertical' mx={16} color={theme.accentColor} /> <Divider
orientation={isMobile ? 'horizontal' : 'vertical'}
mx={16}
color={theme.accentColor}
/>
<Group gap={8}> <Group gap={8}>
{outlook.map((o: any) => ( {outlook.map((o: any) => (
<Stack key={o.name} gap={0} align='center'> <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> <Stack>
<SmallOutlookCard weather={o} /> <SmallOutlookCard weather={o} />
</Stack> </Stack>
@@ -101,11 +107,21 @@ export function WeatherModal({
padding: '.5rem', padding: '.5rem',
borderRadius: '.5rem', borderRadius: '.5rem',
}} }}
>
<Box
style={{
display: 'flex',
overflow: 'auto',
whiteSpace: 'nowrap',
justifyContent: 'space-between',
width: '100%',
}}
> >
{hourlyForecast.length > 0 && {hourlyForecast.length > 0 &&
hourlyForecast.map((h: any) => { hourlyForecast.map((h: any) => {
return <HourlyCard key={h.time} weather={h} />; return <HourlyCard key={h.time} weather={h} isMobile={isMobile} />;
})} })}
</Box>
</Group> </Group>
</Stack> </Stack>
</Center> </Center>

27
src/dataTableStyles.css
View File

@@ -1,16 +1,16 @@
.root { .root {
--mrt-base-background-color: var(--color-background); --mrt-base-background-color: var(--color-background);
--mrt-striped-row-background-color: var(); --mrt-striped-row-background-color: var(--color-background);
--mrt-row-hover-background-color: var(); --mrt-row-hover-background-color: var(--color-background);
--mrt-striped-row-hover-background-color: var(); --mrt-striped-row-hover-background-color: var(--color-background);
--mrt-selected-row-background-color: var(); --mrt-selected-row-background-color: var(--color-text-pri);
--mrt-selected-row-hover-background-color: var(); --mrt-selected-row-hover-background-color: var(--color-background);
--mrt-pinned-row-background-color: var(); --mrt-pinned-row-background-color: var(--color-background);
--mrt-pinned-row-hover-background-color: var(); --mrt-pinned-row-hover-background-color: var(--color-background);
--mrt-pinned-column-background-color: var(); --mrt-pinned-column-background-color: var(--color-background);
--mrt-dragging-hovered-border-color: var(); --mrt-dragging-hovered-border-color: var(--color-background);
--mrt-dragging-drag-border-color: var(); --mrt-dragging-drag-border-color: var(--color-background);
--mrt-resize-column-border-color: var(); --mrt-resize-column-border-color: var(--color-background);
color: var(--color-text-pri) !important; color: var(--color-text-pri) !important;
} }
@@ -26,6 +26,7 @@
color: var(--color-text-pri) !important; color: var(--color-text-pri) !important;
} }
.mantine-Select-option { .mantine-Select-options {
color: var(--color-text-pri) !important; color: black !important;
background-color: white !important;
} }

11
src/pages/homepage/components/Header/Header.tsx
View File

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

38
src/pages/settings/Settings.tsx
View File

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

7
src/styles/Tabs.module.css
View File

@@ -1,7 +1,11 @@
.settingsTabs { .settingsTabs {
@media (max-width: 600px) {
.panel {
padding-left: 0 !important;
}
}
.panel { .panel {
padding-left: 2rem; padding-left: 2rem;
height: 100%;
} }
.tab { .tab {
color: var(--color-text-pri); color: var(--color-text-pri);
@@ -18,3 +22,4 @@
border-color: var(--color-text-acc); border-color: var(--color-text-acc);
} }
} }