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

5
src/components/HelpModal/HelpModal.tsx
View File

@@ -21,7 +21,7 @@ export function HelpModal({
applicationData: Application[];
providerData: Provider[];
}) {
const { theme, isMobile, modalStyle } = useCommonHooks();
const { isMobile } = useCommonHooks();
return (
<Modal.Root
size={'60%'}
@@ -36,7 +36,6 @@ export function HelpModal({
setProviderURL('https://www.google.com/search?q=');
closeProviderModal();
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -57,7 +56,7 @@ export function HelpModal({
};
})}
/>
<Divider my={8} color={theme.accentColor} />
<Divider my={8} color={'var(--mantine-color-accent-0)'} />
<HelpSection
name={'Available Applications'}
items={applicationData.map((application: Application) => {

10
src/components/HelpModal/HelpSection.tsx
View File

@@ -1,10 +1,8 @@
import { Divider, Group } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import type { SearchShortcut } from 'types';
import HintItem from './HintItem';
function HelpSection({ name, items }: { name: string; items: SearchShortcut[] }) {
const { theme } = useCommonHooks();
return (
<>
<h3
@@ -14,17 +12,17 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
marginTop: 0,
marginBottom: -32,
borderRadius: '8px',
color: theme.backgroundColor,
backgroundColor: theme.borderColor,
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-border-0)',
}}
>
{name}
</h3>
<Divider py={8} color={theme.accentColor} />
<Divider py={8} color={'var(--mantine-color-accent-0)'} />
<Group
style={{
width: '100%',
backgroundColor: theme.searchColor,
backgroundColor: 'var(--mantine-color-search-0)',
borderRadius: '8px',
padding: '24px',
justifyItems: 'center',

10
src/components/HelpModal/HintItem.tsx
View File

@@ -10,13 +10,13 @@ function HintItem({ command, name }: { command: string; name: string }) {
display: 'flex',
padding: '8px',
borderRadius: '10px',
backgroundColor: 'var(--color-background)',
backgroundColor: 'var(--mantine-color-background-0)',
}}
>
<Text
style={{
color: 'var(--color-background)',
backgroundColor: 'var(--color-text-pri)',
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
padding: '8px',
borderTopLeftRadius: '10px',
borderBottomLeftRadius: '10px',
@@ -26,8 +26,8 @@ function HintItem({ command, name }: { command: string; name: string }) {
</Text>
<Text
style={{
color: 'var(--color-background)',
backgroundColor: 'var(--color-text-acc)',
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-accent-0)',
padding: '8px',
borderTopRightRadius: '10px',
borderBottomRightRadius: '10px',

9
src/components/MainLayout.tsx
View File

@@ -1,10 +1,17 @@
import { Box } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { Outlet } from 'react-router-dom';
import { boxClasses } from 'styles';
export function MainLayout() {
const { theme } = useCommonHooks();
return (
<Box className={boxClasses.layoutContainer}>
<Box
className={boxClasses.layoutContainer}
style={{
'--image-background': `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(/backgrounds/${theme.backgroundImage})`,
}}
>
<Outlet />
</Box>
);

28
src/components/ThemeProvider.tsx
View File

@@ -1,28 +0,0 @@
import { Box } from '@mantine/core';
import type { Theme } from 'types';
export function ThemeProvider({
theme,
children,
}: { theme: Theme; children: React.ReactNode }) {
return (
<Box
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(/backgrounds/${theme.backgroundImage})`,
'--toastify-color-light': `hwb(from ${theme.primaryColor} h w b / 0.25)`,
'--toastify-color-dark': `hwb(from ${theme.primaryColor} h w b / 0.25)`,
'--toastify-text-color-light': theme.primaryColor,
'--toastify-text-color-dark': theme.primaryColor,
'--toastify-color-progress-light': theme.accentColor,
'--toastify-color-progress-bgo': 0.2,
}}
>
{children}
</Box>
);
}

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>

1
src/components/index.ts
View File

@@ -1,5 +1,4 @@
export { HelpModal } from './HelpModal/HelpModal';
export { WeatherModal } from './WeatherModal/WeatherModal';
export { ThemeProvider } from './ThemeProvider';
export { MainLayout } from './MainLayout';
export { Loading } from './Loading';