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

39
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: {
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>
)}
</>
);
},
});

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>

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