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,
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: {
styles: {
root: {
color: theme.primaryColor,
},
content: {
color: theme.primaryColor,
},
},
},
renderCreateRowModalContent: ({ row }) => undefined,
renderTopToolbarCustomActions: ({ table }) => {
return (
<>
{tableName !== 'Personalization' && (
<Button
className={buttonClasses.tableButton}
classNames={buttonClasses}
disabled={tableName === 'Personalization'}
onClick={() => table.setCreatingRow(true)}
onClick={() => {
table.setCreatingRow(true);
}}
>
<FiPlus />
</Button>
)}
</>
);
},
});

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

@@ -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'>

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

@@ -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>

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

@@ -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>

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 { 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>
@@ -101,11 +107,21 @@ export function WeatherModal({
padding: '.5rem',
borderRadius: '.5rem',
}}
>
<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} />;
return <HourlyCard key={h.time} weather={h} isMobile={isMobile} />;
})}
</Box>
</Group>
</Stack>
</Center>

27
src/dataTableStyles.css
View File

@@ -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;
}

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

@@ -104,16 +104,21 @@ 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' }}
style={{
display: 'flex',
position: 'absolute',
bottom: isMobile ? -32 : 0,
right: 16,
}}
onClick={openWeatherModal}
>
<Text
@@ -133,7 +138,6 @@ function Header({
{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>
);

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

@@ -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 />

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

@@ -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);
@@ -18,3 +22,4 @@
border-color: var(--color-text-acc);
}
}