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

Theme changes

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-28 15:59:56 -05:00
parent 19b793fbf9
commit 416c8611ec
53 changed files with 392 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/WeatherModal/CurrentWeather.tsx
View File

@@ -39,8 +39,8 @@ export default function CurrentWeather({ current }: { current: CW }) {
justify='space-between'
style={{
width: '100%',
color: 'var(--color-text-pri)',
backgroundColor: 'var(--color-search-background)',
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
padding: '1rem',
borderRadius: '8px',
paddingBottom: '.5rem',

4
src/components/WeatherModal/ExtendedForecastCard.tsx
View File

@@ -14,7 +14,7 @@ export default function ExtendedForecastCard({
w={'100%'}
justify='space-between'
style={{
backgroundColor: 'var(--color-search-background)',
backgroundColor: 'var(--mantine-color-search-0)',
padding: '1rem',
borderRadius: '8px',
paddingBottom: '.5rem',
@@ -43,7 +43,7 @@ export default function ExtendedForecastCard({
key={item.name}
gap={0}
align='center'
bg={'var(--color-background)'}
bg={'var(--mantine-color-background-0)'}
style={{
borderRadius: '8px',
}}

36
src/components/WeatherModal/WeatherGraphs.tsx
View File

@@ -20,7 +20,7 @@ export default function WeatherGraphs({
return (
<Stack
style={{
backgroundColor: 'var(--color-background)',
backgroundColor: 'var(--mantine-color-background-0)',
padding: '1rem',
borderRadius: '8px',
}}
@@ -41,7 +41,7 @@ export default function WeatherGraphs({
return (
<Stack
style={{
background: 'var(--color-search-background)',
background: 'var(--mantine-color-search-0)',
padding: '.5rem',
borderRadius: '.5rem',
}}
@@ -50,7 +50,7 @@ export default function WeatherGraphs({
<ComposedChart data={hourlyForecast}>
<XAxis
type='category'
stroke={'var(--color-text-pri)'}
stroke={'var(--mantine-color-primary-0)'}
dataKey={(data: HourlyForecast) => {
return new Date(data.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
@@ -59,7 +59,7 @@ export default function WeatherGraphs({
}}
/>
<YAxis
stroke={'var(--color-text-pri)'}
stroke={'var(--mantine-color-primary-0)'}
unit={'°F'}
domain={['dataMin', 'dataMax']}
/>
@@ -70,8 +70,8 @@ export default function WeatherGraphs({
type='monotone'
name='Temperature'
dataKey='temperature'
stroke={'var(--color-text-pri)'}
dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
stroke={'var(--mantine-color-primary-0)'}
dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
/>
<Line
unit={'°F'}
@@ -80,17 +80,17 @@ export default function WeatherGraphs({
dataKey={(data: HourlyForecast) => {
return (data.dewpoint.value * 9) / 5 + 32;
}}
stroke={'var(--color-text-acc)'}
dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
stroke={'var(--mantine-color-accent-0)'}
dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
/>
<Legend style={{ background: 'var(--color-search-background)' }} />
<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
</ComposedChart>
</ResponsiveContainer>
<ResponsiveContainer width={'100%'} height={150}>
<ComposedChart data={hourlyForecast}>
<XAxis
type='category'
stroke={'var(--color-text-pri)'}
stroke={'var(--mantine-color-primary-0)'}
dataKey={(data: HourlyForecast) => {
return new Date(data.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
@@ -98,7 +98,7 @@ export default function WeatherGraphs({
});
}}
/>
<YAxis stroke={'var(--color-text-pri)'} unit={'%'} domain={[0, 100]} />
<YAxis stroke={'var(--mantine-color-primary-0)'} unit={'%'} domain={[0, 100]} />
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Area
@@ -108,9 +108,9 @@ export default function WeatherGraphs({
dataKey={(data: HourlyForecast) => {
return data.probabilityOfPrecipitation.value;
}}
stroke={'var(--color-text-pri)'}
fill={'var(--color-text-pri)'}
dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
stroke={'var(--mantine-color-primary-0)'}
fill={'var(--mantine-color-primary-0)'}
dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
/>
<Area
unit={'%'}
@@ -119,11 +119,11 @@ export default function WeatherGraphs({
dataKey={(data: HourlyForecast) => {
return data.relativeHumidity.value;
}}
stroke={'var(--color-text-acc)'}
fill={'var(--color-text-acc)'}
dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
stroke={'var(--mantine-color-accent-0)'}
fill={'var(--mantine-color-accent-0)'}
dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
/>
<Legend style={{ background: 'var(--color-search-background)' }} />
<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
</ComposedChart>
</ResponsiveContainer>
</Stack>

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

@@ -26,7 +26,7 @@ export function WeatherModal({
setProviderURL: (url: string) => void;
closeWeatherModal: () => void;
}) {
const { isMobile, currentUser, currentLocation, modalStyle } = useCommonHooks();
const { isMobile, currentUser, currentLocation } = useCommonHooks();
const { data: hourly } = useWeatherAPI({
endpoint: 'hourly',
office: currentLocation.office,
@@ -54,7 +54,6 @@ export function WeatherModal({
setProviderURL('https://www.google.com/search?q=');
closeWeatherModal();
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -62,7 +61,10 @@ export function WeatherModal({
<Modal.Content>
<Modal.Header>
<Modal.Title>
<Group gap={8} style={{ borderBottom: '1px solid var(--color-border)' }}>
<Group
gap={8}
style={{ borderBottom: '1px solid var(--mantine-color-border-0)' }}
>
<Text fz={18} fw={200}>
Weather Forecast for{' '}
</Text>