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

22
src/App.tsx
View File

@@ -1,6 +1,7 @@
import { import {
DEFAULT_THEME, DEFAULT_THEME,
MantineProvider, MantineProvider,
colorsTuple,
createTheme, createTheme,
mergeMantineTheme, mergeMantineTheme,
} from '@mantine/core'; } from '@mantine/core';
@@ -13,7 +14,7 @@ import {
createBrowserRouter, createBrowserRouter,
createRoutesFromElements, createRoutesFromElements,
} from 'react-router-dom'; } from 'react-router-dom';
import { Loading, MainLayout, ThemeProvider } from './components'; import { Loading, MainLayout } from './components';
import '@mantine/core/styles.css'; import '@mantine/core/styles.css';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import './index.css'; import './index.css';
@@ -32,11 +33,18 @@ function App() {
useCommonHooks(); useCommonHooks();
const [loaded, setLoaded] = useState<boolean>(false); const [loaded, setLoaded] = useState<boolean>(false);
const overrides = createTheme({ const overrides = createTheme({
primaryColor: 'primary',
colors: {
primary: colorsTuple(theme.primaryColor),
accent: colorsTuple(theme.accentColor),
background: colorsTuple(theme.backgroundColor),
border: colorsTuple(theme.borderColor),
search: colorsTuple(theme.searchColor),
},
white: theme?.backgroundColor, white: theme?.backgroundColor,
fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif', fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
}); });
const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides); const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
const router = createBrowserRouter( const router = createBrowserRouter(
createRoutesFromElements( createRoutesFromElements(
<Route> <Route>
@@ -104,12 +112,10 @@ function App() {
<> <>
{theme && ( {theme && (
<MantineProvider theme={mantineTheme}> <MantineProvider theme={mantineTheme}>
<ThemeProvider theme={theme}> <ToastContainer />
<ToastContainer /> <Loading loaded={loaded} />
<Loading loaded={loaded} /> <RouterProvider router={router} />
<RouterProvider router={router} /> <ReactQueryDevtools initialIsOpen={false} />
<ReactQueryDevtools initialIsOpen={false} />
</ThemeProvider>
</MantineProvider> </MantineProvider>
)} )}
</> </>

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

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

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

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

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

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

9
src/components/MainLayout.tsx
View File

@@ -1,10 +1,17 @@
import { Box } from '@mantine/core'; import { Box } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { Outlet } from 'react-router-dom'; import { Outlet } from 'react-router-dom';
import { boxClasses } from 'styles'; import { boxClasses } from 'styles';
export function MainLayout() { export function MainLayout() {
const { theme } = useCommonHooks();
return ( 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 /> <Outlet />
</Box> </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' justify='space-between'
style={{ style={{
width: '100%', width: '100%',
color: 'var(--color-text-pri)', color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--color-search-background)', backgroundColor: 'var(--mantine-color-search-0)',
padding: '1rem', padding: '1rem',
borderRadius: '8px', borderRadius: '8px',
paddingBottom: '.5rem', paddingBottom: '.5rem',

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

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

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

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

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

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

1
src/components/index.ts
View File

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

10
src/hooks/useCommonHooks.ts
View File

@@ -72,15 +72,6 @@ export function useCommonHooks() {
}, },
}); });
const modalStyle = {
'--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': `url(${theme?.backgroundImage})`,
};
const urlPattern = new RegExp( const urlPattern = new RegExp(
'^(https?:\\/\\/)?' + // protocol '^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
@@ -131,7 +122,6 @@ export function useCommonHooks() {
isMobile, isMobile,
theme, theme,
setTheme, setTheme,
modalStyle,
urlPattern, urlPattern,
fixDigits, fixDigits,
reorder, reorder,

9
src/pages/homepage/components/Search/Search.tsx
View File

@@ -325,7 +325,7 @@ export default function Search({
)} )}
</Group> </Group>
<Group justify='space-between' w={'80%'}> <Group justify='space-between' w={'80%'}>
<Text c={theme.primaryColor}>{item.option.searchTerm}</Text> <Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
<Text <Text
style={{ style={{
color: `${theme.primaryColor}55`, color: `${theme.primaryColor}55`,
@@ -379,7 +379,7 @@ export default function Search({
</Text> </Text>
</Group> </Group>
<Group justify='space-between' w={'80%'}> <Group justify='space-between' w={'80%'}>
<Text c={theme.primaryColor}>{item.option.searchTerm}</Text> <Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
<Text <Text
style={{ style={{
color: `${theme.primaryColor}55`, color: `${theme.primaryColor}55`,
@@ -460,11 +460,12 @@ export default function Search({
value={searchValue} value={searchValue}
searchValue={searchValue} searchValue={searchValue}
placeholder={placeholderValue} placeholder={placeholderValue}
nothingFoundMessage={<Text c={theme.primaryColor}>Nothing found...</Text>} nothingFoundMessage={
<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
}
data-active={searchValue !== ''} data-active={searchValue !== ''}
dropdownOpened={dropdownOpened} dropdownOpened={dropdownOpened}
comboboxProps={{ comboboxProps={{
withinPortal: false,
transitionProps: { transition: 'fade', duration: 200 }, transitionProps: { transition: 'fade', duration: 200 },
}} }}
spellCheck='true' spellCheck='true'

57
src/pages/homepage/components/SettingsButton/SettingsButton.tsx
View File

@@ -114,7 +114,6 @@ function SettingsButton() {
<Menu <Menu
classNames={menuClasses} classNames={menuClasses}
width={isMobile ? '98%' : 'auto'} width={isMobile ? '98%' : 'auto'}
withinPortal={false}
withArrow withArrow
shadow='md' shadow='md'
position='top' position='top'
@@ -132,7 +131,7 @@ function SettingsButton() {
theme.backgroundImage.toLowerCase() !== 'none' && theme.backgroundImage.toLowerCase() !== 'none' &&
theme.backgroundImage !== undefined theme.backgroundImage !== undefined
? 'transparent' ? 'transparent'
: theme.backgroundColor, : 'var(--mantine-color-background-0)',
}} }}
> >
<Group p={'1rem'} gap={12}> <Group p={'1rem'} gap={12}>
@@ -183,7 +182,10 @@ function SettingsButton() {
options: selectClasses.menuSelectOptions, options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption, option: selectClasses.menuSelectOption,
}} }}
comboboxProps={{ withinPortal: false }} comboboxProps={{
withinPortal: false,
width: 'fit-content',
}}
/> />
</Stack> </Stack>
<Stack <Stack
@@ -195,19 +197,23 @@ function SettingsButton() {
> >
<Menu.Label pb={'.25rem'}>Themes</Menu.Label> <Menu.Label pb={'.25rem'}>Themes</Menu.Label>
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'> <Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow> <Tooltip
label='Shuffle Themes'
color={'var(--mantine-color-primary-0)'}
withArrow
>
<ActionIcon <ActionIcon
className={actionIconClasses.menuActions} className={actionIconClasses.menuActions}
classNames={actionIconClasses} classNames={actionIconClasses}
style={{ style={{
backgroundColor: backgroundColor:
currentTheme === 'random' currentTheme === 'random'
? `${theme?.searchColor === theme.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88` ? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
: 'transparent', : 'transparent',
color: color:
currentTheme === 'random' currentTheme === 'random'
? theme.accentColor ? 'var(--mantine-color-accent-0)'
: theme.primaryColor, : 'var(--mantine-color-primary-0)',
}} }}
onClick={() => { onClick={() => {
setCurrentTheme( setCurrentTheme(
@@ -219,13 +225,17 @@ function SettingsButton() {
<FiShuffle /> <FiShuffle />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
<Tooltip label='Random Theme' color={theme.primaryColor} withArrow> <Tooltip
label='Random Theme'
color={'var(--mantine-color-primary-0)'}
withArrow
>
<ActionIcon <ActionIcon
className={actionIconClasses.menuActions} className={actionIconClasses.menuActions}
classNames={actionIconClasses} classNames={actionIconClasses}
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
}} }}
onClick={() => { onClick={() => {
setCurrentThemePlaylist('All'); setCurrentThemePlaylist('All');
@@ -266,7 +276,10 @@ function SettingsButton() {
options: selectClasses.menuSelectOptions, options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption, option: selectClasses.menuSelectOption,
}} }}
comboboxProps={{ withinPortal: false }} comboboxProps={{
withinPortal: false,
width: 'fit-content',
}}
onChange={(_value, option: ComboboxItem) => { onChange={(_value, option: ComboboxItem) => {
setCurrentThemePlaylist(option.value); setCurrentThemePlaylist(option.value);
if (option.value !== 'Time of Day') { if (option.value !== 'Time of Day') {
@@ -309,8 +322,8 @@ function SettingsButton() {
position: 'absolute', position: 'absolute',
left: '-12px', left: '-12px',
top: '-8px', top: '-8px',
backgroundColor: theme.primaryColor, backgroundColor: 'var(--mantine-color-primary-0)',
color: theme.backgroundColor, color: 'var(--mantine-color-background-0)',
}} }}
> >
Apps Apps
@@ -349,7 +362,9 @@ function SettingsButton() {
setAppFilter(data); setAppFilter(data);
}} }}
classNames={multiSelectClasses} classNames={multiSelectClasses}
comboboxProps={{ withinPortal: false }} comboboxProps={{
withinPortal: false,
}}
/> />
<Select <Select
label={'Sorting'} label={'Sorting'}
@@ -362,7 +377,9 @@ function SettingsButton() {
options: selectClasses.menuSelectOptions, options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption, option: selectClasses.menuSelectOption,
}} }}
comboboxProps={{ withinPortal: false }} comboboxProps={{
withinPortal: false,
}}
onChange={(_value, option: ComboboxItem) => { onChange={(_value, option: ComboboxItem) => {
setAppSort(option.value); setAppSort(option.value);
}} }}
@@ -388,8 +405,8 @@ function SettingsButton() {
position: 'absolute', position: 'absolute',
left: '-12px', left: '-12px',
top: '-8px', top: '-8px',
backgroundColor: theme.primaryColor, backgroundColor: 'var(--mantine-color-primary-0)',
color: theme.backgroundColor, color: 'var(--mantine-color-background-0)',
}} }}
> >
Bookmarks Bookmarks
@@ -428,7 +445,9 @@ function SettingsButton() {
setBookmarkFilter(data); setBookmarkFilter(data);
}} }}
classNames={multiSelectClasses} classNames={multiSelectClasses}
comboboxProps={{ withinPortal: false }} comboboxProps={{
withinPortal: false,
}}
/> />
<Select <Select
label={'Sorting'} label={'Sorting'}
@@ -441,7 +460,9 @@ function SettingsButton() {
options: selectClasses.menuSelectOptions, options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption, option: selectClasses.menuSelectOption,
}} }}
comboboxProps={{ withinPortal: false }} comboboxProps={{
withinPortal: false,
}}
onChange={(_value, option: ComboboxItem) => { onChange={(_value, option: ComboboxItem) => {
setBookmarkSort(option.value); setBookmarkSort(option.value);
}} }}

6
src/pages/settings/components/Applications/AppSettingsItem.tsx
View File

@@ -20,11 +20,13 @@ function AppSettingsItem({
const Icon = allIcons[icon]; const Icon = allIcons[icon];
const [textDecoration, setTextDecoration] = useState<string>('none'); const [textDecoration, setTextDecoration] = useState<string>('none');
const [hover, setHover] = useState<boolean>(false); const [hover, setHover] = useState<boolean>(false);
const { isMobile, theme } = useCommonHooks(); const { isMobile } = useCommonHooks();
return ( return (
<Box pos={'relative'}> <Box pos={'relative'}>
{enabled === 0 && ( {enabled === 0 && (
<Tooltip label={<Text c={theme.primaryColor}>This app is disabled</Text>}> <Tooltip
label={<Text c={'var(--mantine-color-primary-0)'}>This app is disabled</Text>}
>
<ActionIcon <ActionIcon
className={actionIconClasses.settingsTooltip} className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses} classNames={actionIconClasses}

20
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -47,7 +47,7 @@ const ApplicationSettings = () => {
}); });
const [applications, setApplications] = useState<Application[]>([]); const [applications, setApplications] = useState<Application[]>([]);
const [applicationList, setApplicationList] = useState<Application[]>([]); const [applicationList, setApplicationList] = useState<Application[]>([]);
const { theme, isMobile, reorder } = useCommonHooks(); const { isMobile, reorder } = useCommonHooks();
const [newApplication, setNewApplication] = useState<Application>(defaultApplication); const [newApplication, setNewApplication] = useState<Application>(defaultApplication);
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState(''); const [searchValue, setSearchValue] = useState('');
@@ -179,7 +179,6 @@ const ApplicationSettings = () => {
defaultValue={newApplication.icon} defaultValue={newApplication.icon}
comboboxProps={{ comboboxProps={{
zIndex: 3000, zIndex: 3000,
withinPortal: false,
}} }}
onChange={(value: string | null) => { onChange={(value: string | null) => {
setNewApplication({ setNewApplication({
@@ -304,14 +303,14 @@ const ApplicationSettings = () => {
<Card <Card
w={'400px'} w={'400px'}
style={{ style={{
backgroundColor: theme.searchColor, backgroundColor: 'var(--mantine-color-search-0)',
border: '1px solid var(--color-border)', border: '1px solid var(--mantine-color-border-0)',
borderRadius: '8px', borderRadius: '8px',
}} }}
> >
<Group gap={0} align='center' justify='space-between'> <Group gap={0} align='center' justify='space-between'>
<Stack gap={0}> <Stack gap={0}>
<Text c={theme.accentColor} fz={14}> <Text c={'var(--mantine-color-accent-0)'} fz={14}>
Name Name
</Text> </Text>
<Text <Text
@@ -319,15 +318,15 @@ const ApplicationSettings = () => {
style={{ style={{
borderRadius: '4px', borderRadius: '4px',
paddingLeft: '8px', paddingLeft: '8px',
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
backgroundColor: theme.searchColor, backgroundColor: 'var(--mantine-color-search-0)',
}} }}
> >
{app.name} {app.name}
</Text> </Text>
</Stack> </Stack>
<Stack gap={0}> <Stack gap={0}>
<Text c={theme.accentColor} fz={14}> <Text c={'var(--mantine-color-accent-0)'} fz={14}>
Filter Name Filter Name
</Text> </Text>
<Text <Text
@@ -335,8 +334,8 @@ const ApplicationSettings = () => {
style={{ style={{
borderRadius: '4px', borderRadius: '4px',
paddingLeft: '8px', paddingLeft: '8px',
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
backgroundColor: theme.searchColor, backgroundColor: 'var(--mantine-color-search-0)',
}} }}
> >
{app.filterName} {app.filterName}
@@ -367,7 +366,6 @@ const ApplicationSettings = () => {
<Popover <Popover
withArrow withArrow
withOverlay withOverlay
withinPortal={false}
closeOnClickOutside={!isOpen} closeOnClickOutside={!isOpen}
classNames={popoverClasses} classNames={popoverClasses}
> >

15
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -24,7 +24,7 @@ function DebouncedApplication({
setIsOpen, setIsOpen,
allIcons, allIcons,
}: { application: Application; setIsOpen: (isOpen: boolean) => void; allIcons: any }) { }: { application: Application; setIsOpen: (isOpen: boolean) => void; allIcons: any }) {
const { theme, handleDelete } = useCommonHooks(); const { handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
@@ -63,8 +63,8 @@ function DebouncedApplication({
padding: '8px', padding: '8px',
margin: '8px', margin: '8px',
borderRadius: '10px', borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)', backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--color-background)', color: 'var(--mantine-color-background-0)',
}} }}
>{`"${app.name}"`}</Text> >{`"${app.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text> <Text c='red'>This action cannot be undone!</Text>
@@ -72,8 +72,8 @@ function DebouncedApplication({
} }
/> />
<Tooltip <Tooltip
color={theme.primaryColor} color={'var(--mantine-color-primary-0)'}
bd={`solid 1px ${theme.borderColor}`} bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'} label={'Delete'}
> >
<ActionIcon <ActionIcon
@@ -89,8 +89,8 @@ function DebouncedApplication({
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
<Tooltip <Tooltip
color={theme.primaryColor} color={'var(--mantine-color-primary-0)'}
bd={`solid 1px ${theme.borderColor}`} bd={'solid 1px var(--mantine-color-border-0)'}
label={'Enabled'} label={'Enabled'}
> >
<Switch <Switch
@@ -175,7 +175,6 @@ function DebouncedApplication({
defaultValue={app?.icon} defaultValue={app?.icon}
comboboxProps={{ comboboxProps={{
zIndex: 3000, zIndex: 3000,
withinPortal: false,
}} }}
onChange={(value: string | null) => { onChange={(value: string | null) => {
setUpdate({ setUpdate({

6
src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx
View File

@@ -10,8 +10,8 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
borderRadius: '4px', borderRadius: '4px',
color: 'var(--color-text-acc)', color: 'var(--mantine-color-accent-0)',
backgroundColor: 'var(--color-search-background)', backgroundColor: 'var(--mantine-color-search-0)',
padding: '8px', padding: '8px',
}} }}
onMouseEnter={() => setHover(true)} onMouseEnter={() => setHover(true)}
@@ -25,7 +25,7 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
style={{ style={{
position: 'absolute', position: 'absolute',
right: 24, right: 24,
color: 'var(--color-text-acc)', color: 'var(--mantine-color-accent-0)',
}} }}
> >
<FiEdit /> <FiEdit />

18
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -28,7 +28,7 @@ const BookmarkSettings = () => {
const [groups, setGroups] = useState<BookmarkGroup[]>([]); const [groups, setGroups] = useState<BookmarkGroup[]>([]);
const [newGroup, setNewGroup] = useState<BookmarkGroup>(defaultGroup); const [newGroup, setNewGroup] = useState<BookmarkGroup>(defaultGroup);
const [groupList, setGroupList] = useState<BookmarkGroup[]>([]); const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
const { theme, isMobile, reorder } = useCommonHooks(); const { isMobile, reorder } = useCommonHooks();
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState(''); const [searchValue, setSearchValue] = useState('');
const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500); const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
@@ -227,14 +227,14 @@ const BookmarkSettings = () => {
<Card <Card
w={'400px'} w={'400px'}
style={{ style={{
backgroundColor: theme.searchColor, backgroundColor: 'var(--mantine-color-search-0)',
border: '1px solid var(--color-border)', border: '1px solid var(--mantine-color-border-0)',
borderRadius: '8px', borderRadius: '8px',
}} }}
> >
<Group gap={0} align='center' justify='space-between'> <Group gap={0} align='center' justify='space-between'>
<Stack gap={0}> <Stack gap={0}>
<Text c={theme.accentColor} fz={14}> <Text c={'var(--mantine-color-accent-0)'} fz={14}>
Name Name
</Text> </Text>
<Text <Text
@@ -242,15 +242,15 @@ const BookmarkSettings = () => {
style={{ style={{
borderRadius: '4px', borderRadius: '4px',
paddingLeft: '8px', paddingLeft: '8px',
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
backgroundColor: theme.searchColor, backgroundColor: 'var(--mantine-color-search-0)',
}} }}
> >
{group.categoryName} {group.categoryName}
</Text> </Text>
</Stack> </Stack>
<Stack gap={0}> <Stack gap={0}>
<Text c={theme.accentColor} fz={14}> <Text c={'var(--mantine-color-accent-0)'} fz={14}>
Filter Name Filter Name
</Text> </Text>
<Text <Text
@@ -258,8 +258,8 @@ const BookmarkSettings = () => {
style={{ style={{
borderRadius: '4px', borderRadius: '4px',
paddingLeft: '8px', paddingLeft: '8px',
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
backgroundColor: theme.searchColor, backgroundColor: 'var(--mantine-color-search-0)',
}} }}
> >
{group.filterName} {group.filterName}

10
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -11,7 +11,7 @@ function DebouncedBookmarkItem({
bookmarkItem, bookmarkItem,
setIsOpen, setIsOpen,
}: { bookmarkItem: Bookmark; setIsOpen: (isOpen: boolean) => void }) { }: { bookmarkItem: Bookmark; setIsOpen: (isOpen: boolean) => void }) {
const { theme, handleDelete } = useCommonHooks(); const { handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
@@ -50,8 +50,8 @@ function DebouncedBookmarkItem({
padding: '8px', padding: '8px',
margin: '8px', margin: '8px',
borderRadius: '10px', borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)', backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--color-background)', color: 'var(--mantine-color-background-0)',
}} }}
>{`"${bookmark.name}"`}</Text> >{`"${bookmark.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text> <Text c='red'>This action cannot be undone!</Text>
@@ -60,8 +60,8 @@ function DebouncedBookmarkItem({
title='Delete Bookmark' title='Delete Bookmark'
/> />
<Tooltip <Tooltip
color={theme.primaryColor} color={'var(--mantine-color-primary-0)'}
bd={`solid 1px ${theme.borderColor}`} bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'} label={'Delete'}
> >
<ActionIcon <ActionIcon

58
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -33,7 +33,7 @@ function DebouncedGroupSettingsItem({
bookmarks, bookmarks,
searchTerm, searchTerm,
}: { bookmarkGroup: BookmarkGroup; bookmarks: Bookmark[]; searchTerm: string }) { }: { bookmarkGroup: BookmarkGroup; bookmarks: Bookmark[]; searchTerm: string }) {
const { theme, isMobile, handleDelete, reorder } = useCommonHooks(); const { isMobile, handleDelete, reorder } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [popoverOpened, setPopoverOpened] = useState(false); const [popoverOpened, setPopoverOpened] = useState(false);
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
@@ -113,8 +113,8 @@ function DebouncedGroupSettingsItem({
padding: '8px', padding: '8px',
margin: '8px', margin: '8px',
borderRadius: '10px', borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)', backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--color-background)', color: 'var(--mantine-color-background-0)',
}} }}
>{`"${group.categoryName}"`}</Text> >{`"${group.categoryName}"`}</Text>
<Text style={{ fontWeight: 'bold', textTransform: 'uppercase' }}> <Text style={{ fontWeight: 'bold', textTransform: 'uppercase' }}>
@@ -124,14 +124,18 @@ function DebouncedGroupSettingsItem({
</Stack> </Stack>
} }
/> />
<Card.Section p={16} bg={theme.searchColor} c={theme.backgroundColor}> <Card.Section
p={16}
bg={'var(--mantine-color-search-0)'}
c={'var(--mantine-color-background-0)'}
>
<Stack gap={0}> <Stack gap={0}>
<Group gap={0} align='center' justify='space-between'> <Group gap={0} align='center' justify='space-between'>
<TextInput <TextInput
label={'Name'} label={'Name'}
labelProps={{ labelProps={{
style: { style: {
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
}, },
}} }}
w={isMobile ? undefined : '58%'} w={isMobile ? undefined : '58%'}
@@ -149,7 +153,7 @@ function DebouncedGroupSettingsItem({
label={'Filter Name'} label={'Filter Name'}
labelProps={{ labelProps={{
style: { style: {
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
}, },
}} }}
w={isMobile ? undefined : '28%'} w={isMobile ? undefined : '28%'}
@@ -164,8 +168,8 @@ function DebouncedGroupSettingsItem({
}} }}
/> />
<Tooltip <Tooltip
color={theme.primaryColor} color={'var(--mantine-color-primary-0)'}
bd={`solid 1px ${theme.borderColor}`} bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'} label={'Delete'}
> >
<ActionIcon <ActionIcon
@@ -186,7 +190,7 @@ function DebouncedGroupSettingsItem({
width: '30px', width: '30px',
height: '30px', height: '30px',
borderRadius: '100%', borderRadius: '100%',
backgroundColor: theme.accentColor, backgroundColor: 'var(--mantine-color-accent-0)',
position: 'absolute', position: 'absolute',
top: isMobile ? 164 : 78, top: isMobile ? 164 : 78,
right: 18, right: 18,
@@ -247,17 +251,7 @@ function DebouncedGroupSettingsItem({
<BookmarkSettingsItem bookmark={bookmark} /> <BookmarkSettingsItem bookmark={bookmark} />
</Box> </Box>
</Popover.Target> </Popover.Target>
<Popover.Dropdown <Popover.Dropdown w={isMobile ? '100%' : undefined}>
w={isMobile ? '100%' : undefined}
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': `url(${theme.backgroundImage})`,
}}
>
<DebouncedBookmarkItem <DebouncedBookmarkItem
bookmarkItem={bookmark} bookmarkItem={bookmark}
setIsOpen={setIsOpen} setIsOpen={setIsOpen}
@@ -275,7 +269,11 @@ function DebouncedGroupSettingsItem({
</DragDropContext> </DragDropContext>
</Stack> </Stack>
</Card.Section> </Card.Section>
<Card.Section p={8} bg={theme.searchColor} c={theme.backgroundColor}> <Card.Section
p={8}
bg={'var(--mantine-color-search-0)'}
c={'var(--mantine-color-background-0)'}
>
<Group align='center' justify='center'> <Group align='center' justify='center'>
<Popover <Popover
withArrow withArrow
@@ -302,17 +300,7 @@ function DebouncedGroupSettingsItem({
<FiPlus /> Bookmark <FiPlus /> Bookmark
</Button> </Button>
</Popover.Target> </Popover.Target>
<Popover.Dropdown <Popover.Dropdown w={isMobile ? '100%' : undefined}>
w={isMobile ? '100%' : undefined}
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': `url(${theme.backgroundImage})`,
}}
>
<Card className={cardClasses.settingsItem} classNames={cardClasses}> <Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Stack w={'100%'} display={'flex'} pos={'relative'}> <Stack w={'100%'} display={'flex'} pos={'relative'}>
<Group w={'100%'} justify='center'> <Group w={'100%'} justify='center'>
@@ -320,7 +308,7 @@ function DebouncedGroupSettingsItem({
label={'Name'} label={'Name'}
labelProps={{ labelProps={{
style: { style: {
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
}, },
}} }}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
@@ -337,7 +325,7 @@ function DebouncedGroupSettingsItem({
label={'Category'} label={'Category'}
labelProps={{ labelProps={{
style: { style: {
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
}, },
}} }}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
@@ -358,7 +346,7 @@ function DebouncedGroupSettingsItem({
label={'URL'} label={'URL'}
labelProps={{ labelProps={{
style: { style: {
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
}, },
}} }}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}

10
src/pages/settings/components/Messages/DebouncedMessage.tsx
View File

@@ -15,7 +15,7 @@ function DebouncedMessage({
message: Message; message: Message;
setMessage: (message: Message) => void; setMessage: (message: Message) => void;
}) { }) {
const { theme, handleDelete } = useCommonHooks(); const { handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
return ( return (
<Card className={cardClasses.settingsItem} classNames={cardClasses}> <Card className={cardClasses.settingsItem} classNames={cardClasses}>
@@ -34,8 +34,8 @@ function DebouncedMessage({
padding: '8px', padding: '8px',
margin: '8px', margin: '8px',
borderRadius: '10px', borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)', backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--color-background)', color: 'var(--mantine-color-background-0)',
}} }}
>{`"${message.message}"`}</Text> >{`"${message.message}"`}</Text>
<Text c='red'>This action cannot be undone!</Text> <Text c='red'>This action cannot be undone!</Text>
@@ -43,8 +43,8 @@ function DebouncedMessage({
} }
/> />
<Tooltip <Tooltip
color={theme.primaryColor} color={'var(--mantine-color-primary-0)'}
bd={`solid 1px ${theme.borderColor}`} bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'} label={'Delete'}
> >
<ActionIcon <ActionIcon

10
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
View File

@@ -14,7 +14,7 @@ function DebouncedSearchProvider({
searchProvider: Provider; searchProvider: Provider;
setIsOpen: (isOpen: boolean) => void; setIsOpen: (isOpen: boolean) => void;
}) { }) {
const { theme, handleDelete } = useCommonHooks(); const { handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
@@ -56,8 +56,8 @@ function DebouncedSearchProvider({
padding: '8px', padding: '8px',
margin: '8px', margin: '8px',
borderRadius: '10px', borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)', backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--color-background)', color: 'var(--mantine-color-background-0)',
}} }}
>{`"${provider.name}"`}</Text> >{`"${provider.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text> <Text c='red'>This action cannot be undone!</Text>
@@ -65,8 +65,8 @@ function DebouncedSearchProvider({
} }
/> />
<Tooltip <Tooltip
color={theme.primaryColor} color={'var(--mantine-color-primary-0)'}
bd={`solid 1px ${theme.borderColor}`} bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'} label={'Delete'}
> >
<ActionIcon <ActionIcon

1
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -161,7 +161,6 @@ const SearchProviderSettings = () => {
<Popover <Popover
withArrow withArrow
withOverlay withOverlay
withinPortal={false}
closeOnClickOutside={!isOpen} closeOnClickOutside={!isOpen}
classNames={popoverClasses} classNames={popoverClasses}
> >

3
src/pages/settings/components/Shared/AddItemModal.tsx
View File

@@ -14,7 +14,7 @@ function AddItemModal({
body: React.ReactNode; body: React.ReactNode;
title: string; title: string;
}) { }) {
const { isMobile, modalStyle } = useCommonHooks(); const { isMobile } = useCommonHooks();
return ( return (
<Modal.Root <Modal.Root
size={'60%'} size={'60%'}
@@ -23,7 +23,6 @@ function AddItemModal({
opened={modalOpened} opened={modalOpened}
fullScreen={isMobile} fullScreen={isMobile}
onClose={handleClose} onClose={handleClose}
style={modalStyle}
closeOnEscape closeOnEscape
closeOnClickOutside closeOnClickOutside
centered centered

3
src/pages/settings/components/Shared/DeleteItemModal.tsx
View File

@@ -15,7 +15,7 @@ function DeleteItemModal({
body: React.ReactNode; body: React.ReactNode;
title: string; title: string;
}) { }) {
const { isMobile, modalStyle } = useCommonHooks(); const { isMobile } = useCommonHooks();
return ( return (
<Modal.Root <Modal.Root
size={'60%'} size={'60%'}
@@ -24,7 +24,6 @@ function DeleteItemModal({
opened={modalOpened} opened={modalOpened}
fullScreen={isMobile} fullScreen={isMobile}
onClose={handleClose} onClose={handleClose}
style={modalStyle}
closeOnEscape closeOnEscape
closeOnClickOutside closeOnClickOutside
centered centered

19
src/pages/settings/components/Shared/SettingsHeader.tsx
View File

@@ -41,7 +41,7 @@ function SettingsHeader({
setSearchValue: (searchValue: string) => void; setSearchValue: (searchValue: string) => void;
searchPlaceholder: string | undefined; searchPlaceholder: string | undefined;
}) { }) {
const { isMobile, theme, modalStyle } = useCommonHooks(); const { isMobile } = useCommonHooks();
return ( return (
<Group <Group
align='center' align='center'
@@ -66,15 +66,7 @@ function SettingsHeader({
> >
{title} {title}
</Text> </Text>
<Popover <Popover withArrow withOverlay classNames={popoverClasses}>
withArrow
withOverlay
withinPortal={true}
styles={{
dropdown: modalStyle,
}}
classNames={popoverClasses}
>
<Popover.Target> <Popover.Target>
<ActionIcon <ActionIcon
className={actionIconClasses.settingsTooltip} className={actionIconClasses.settingsTooltip}
@@ -85,8 +77,8 @@ function SettingsHeader({
</Popover.Target> </Popover.Target>
<Popover.Dropdown <Popover.Dropdown
style={{ style={{
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
backgroundColor: theme.backgroundColor, backgroundColor: 'var(--mantine-color-background-0)',
width: isMobile ? '95%' : '500px', width: isMobile ? '95%' : '500px',
}} }}
> >
@@ -99,7 +91,8 @@ function SettingsHeader({
className={textClasses.settingsTooltip} className={textClasses.settingsTooltip}
classNames={textClasses} classNames={textClasses}
highlightStyles={{ highlightStyles={{
backgroundImage: `linear-gradient(45deg, ${theme.accentColor}, ${theme.primaryColor})`, backgroundImage:
'linear-gradient(45deg, var(--mantine-color-accent-0), var(--mantine-color-primary-0))',
fontWeight: 700, fontWeight: 700,
WebkitBackgroundClip: 'text', WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent', WebkitTextFillColor: 'transparent',

19
src/pages/settings/components/Theming/ThemeCard.tsx
View File

@@ -58,8 +58,8 @@ function ThemeCard({
padding: '8px', padding: '8px',
margin: '8px', margin: '8px',
borderRadius: '10px', borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)', backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--color-background)', color: 'var(--mantine-color-background-0)',
}} }}
>{`"${cardTheme.name}"`}</Text> >{`"${cardTheme.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text> <Text c='red'>This action cannot be undone!</Text>
@@ -205,12 +205,13 @@ function ThemeCard({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: 27 - shiftEdit, top: 27 - shiftEdit,
backgroundColor: shiftEdit === 0 ? 'white' : 'var(--color-background)', backgroundColor:
shiftEdit === 0 ? 'white' : 'var(--mantine-color-background-0)',
borderRadius: '50%', borderRadius: '50%',
padding: '8px', padding: '8px',
margin: '4px', margin: '4px',
border: 'solid 2px', border: 'solid 2px',
borderColor: shiftEdit === 0 ? 'black' : 'var(--color-text-pri)', borderColor: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
transition: 'all 0.2s', transition: 'all 0.2s',
}} }}
> >
@@ -221,7 +222,7 @@ function ThemeCard({
style={{ style={{
fontSize: '2em', fontSize: '2em',
fontWeight: 'bold', fontWeight: 'bold',
color: shiftEdit === 0 ? 'black' : 'var(--color-text-pri)', color: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
}} }}
/> />
</Group> </Group>
@@ -241,12 +242,14 @@ function ThemeCard({
position: 'absolute', position: 'absolute',
right: 0, right: 0,
top: 27 - shiftShuffle, top: 27 - shiftShuffle,
backgroundColor: shiftShuffle === 0 ? 'white' : 'var(--color-background)', backgroundColor:
shiftShuffle === 0 ? 'white' : 'var(--mantine-color-background-0)',
borderRadius: '50%', borderRadius: '50%',
padding: '8px', padding: '8px',
margin: '4px', margin: '4px',
border: 'solid 2px', border: 'solid 2px',
borderColor: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)', borderColor:
shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
transition: 'all 0.2s', transition: 'all 0.2s',
}} }}
> >
@@ -265,7 +268,7 @@ function ThemeCard({
style={{ style={{
fontSize: '2em', fontSize: '2em',
fontWeight: 'bold', fontWeight: 'bold',
color: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)', color: shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
}} }}
/> />
</Group> </Group>

30
src/pages/settings/components/Theming/ThemeModal.tsx
View File

@@ -47,7 +47,7 @@ function ThemeModal({
closePicker: () => void; closePicker: () => void;
handleSaveTheme: () => void; handleSaveTheme: () => void;
}) { }) {
const { theme, isMobile } = useCommonHooks(); const { isMobile } = useCommonHooks();
const viewportRef = useRef<HTMLDivElement>(null); const viewportRef = useRef<HTMLDivElement>(null);
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
const [hovered, setHovered] = useState(-1); const [hovered, setHovered] = useState(-1);
@@ -101,7 +101,7 @@ function ThemeModal({
padding: 8, padding: 8,
marginTop: 34, marginTop: 34,
borderTopLeftRadius: 4, borderTopLeftRadius: 4,
color: theme.accentColor, color: 'var(--mantine-color-accent-0)',
}} }}
> >
{re.exec(item.toUpperCase())?.[1]} {re.exec(item.toUpperCase())?.[1]}
@@ -130,20 +130,12 @@ function ThemeModal({
onClose={handleClose} onClose={handleClose}
fullScreen={isMobile} fullScreen={isMobile}
centered centered
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': `url("${theme.backgroundImage}")`,
}}
> >
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} /> <Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
<Modal.Content> <Modal.Content>
<Modal.Header style={{ justifyContent: 'center' }}> <Modal.Header style={{ justifyContent: 'center' }}>
<Group pos={'absolute'}> <Group pos={'absolute'}>
<Text c={theme.backgroundColor}>Name:</Text> <Text c={'var(--mantine-color-background-0)'}>Name:</Text>
<TextInput <TextInput
className={textInputClasses.default} className={textInputClasses.default}
classNames={textInputClasses} classNames={textInputClasses}
@@ -153,12 +145,12 @@ function ThemeModal({
} }
styles={{ styles={{
label: { label: {
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
}, },
input: { input: {
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
border: 'none', border: 'none',
borderBottom: `1px solid ${theme.primaryColor}`, borderBottom: '1px solid var(--mantine-color-primary-0)',
}, },
}} }}
/> />
@@ -255,7 +247,7 @@ function ThemeModal({
color={selectedTheme.primaryColor} color={selectedTheme.primaryColor}
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`, border: '2px dashed var(--mantine-color-primary-0)',
}} }}
/> />
</Group> </Group>
@@ -274,7 +266,7 @@ function ThemeModal({
color={selectedTheme.accentColor} color={selectedTheme.accentColor}
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`, border: '2px dashed var(--mantine-color-primary-0)',
}} }}
/> />
</Group> </Group>
@@ -293,7 +285,7 @@ function ThemeModal({
color={selectedTheme.backgroundColor} color={selectedTheme.backgroundColor}
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`, border: '2px dashed var(--mantine-color-primary-0)',
}} }}
/> />
</Group> </Group>
@@ -312,7 +304,7 @@ function ThemeModal({
color={selectedTheme.borderColor} color={selectedTheme.borderColor}
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`, border: '2px dashed var(--mantine-color-primary-0)',
}} }}
/> />
</Group> </Group>
@@ -331,7 +323,7 @@ function ThemeModal({
color={selectedTheme.searchColor} color={selectedTheme.searchColor}
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`, border: '2px dashed var(--mantine-color-primary-0)',
}} }}
/> />
</Group> </Group>

18
src/pages/settings/components/Theming/ThemeModalContent.tsx
View File

@@ -5,7 +5,7 @@ import { stackClasses } from 'styles';
import type { Theme } from 'types'; import type { Theme } from 'types';
export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) { export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
const ExampleApp = ({ theme }: { theme: Theme }) => { const ExampleApp = () => {
const [textDecoration, setTextDecoration] = useState<string>('none'); const [textDecoration, setTextDecoration] = useState<string>('none');
return ( return (
@@ -23,7 +23,11 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
paddingTop: '15px', paddingTop: '15px',
}} }}
> >
<FiCheck style={{ color: theme.primaryColor }} height={32} width={32} /> <FiCheck
style={{ color: 'var(--mantine-color-primary-0)' }}
height={32}
width={32}
/>
</Stack> </Stack>
<Stack <Stack
style={{ style={{
@@ -40,7 +44,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
fontWeight: 400, fontWeight: 400,
fontSize: 11, fontSize: 11,
fontStyle: 'normal', fontStyle: 'normal',
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
fontFamily: fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important', '-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0, margin: 0,
@@ -53,7 +57,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
fontWeight: 400, fontWeight: 400,
fontSize: 11, fontSize: 11,
fontStyle: 'italic', fontStyle: 'italic',
color: theme.accentColor, color: 'var(--mantine-color-accent-0)',
fontFamily: fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important', '-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0, margin: 0,
@@ -124,9 +128,9 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
alignContent: 'center', alignContent: 'center',
}} }}
> >
<ExampleApp theme={selectedTheme} /> <ExampleApp />
<ExampleApp theme={selectedTheme} /> <ExampleApp />
<ExampleApp theme={selectedTheme} /> <ExampleApp />
</Stack> </Stack>
<Text <Text
pl={'1.5rem'} pl={'1.5rem'}

42
src/pages/settings/components/Theming/ThemePlaylistCard.tsx
View File

@@ -58,8 +58,8 @@ function ThemePlaylistCard({
padding: '8px', padding: '8px',
margin: '8px', margin: '8px',
borderRadius: '10px', borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)', backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--color-background)', color: 'var(--mantine-color-background-0)',
}} }}
>{`"${cardPlaylist.name}"`}</Text> >{`"${cardPlaylist.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text> <Text c='red'>This action cannot be undone!</Text>
@@ -73,12 +73,12 @@ function ThemePlaylistCard({
left: 6, left: 6,
paddingRight: 4, paddingRight: 4,
paddingLeft: 4, paddingLeft: 4,
backgroundColor: theme.borderColor, backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px', borderRadius: '4px',
color: color:
theme.borderColor === theme.primaryColor theme.borderColor === theme.primaryColor
? theme.accentColor ? 'var(--mantine-color-accent-0)'
: theme.backgroundColor, : 'var(--mantine-color-background-0)',
zIndex: 3, zIndex: 3,
}} }}
> >
@@ -92,12 +92,12 @@ function ThemePlaylistCard({
right: 6, right: 6,
paddingRight: 4, paddingRight: 4,
paddingLeft: 4, paddingLeft: 4,
backgroundColor: theme.borderColor, backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px', borderRadius: '4px',
color: color:
theme.borderColor === theme.primaryColor theme.borderColor === theme.primaryColor
? theme.accentColor ? 'var(--mantine-color-accent-0)'
: theme.backgroundColor, : 'var(--mantine-color-background-0)',
zIndex: 3, zIndex: 3,
}} }}
onClick={(event) => { onClick={(event) => {
@@ -160,12 +160,12 @@ function ThemePlaylistCard({
right: 6, right: 6,
paddingRight: 4, paddingRight: 4,
paddingLeft: 4, paddingLeft: 4,
backgroundColor: theme.borderColor, backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px', borderRadius: '4px',
color: color:
theme.borderColor === theme.primaryColor theme.borderColor === theme.primaryColor
? theme.accentColor ? 'var(--mantine-color-accent-0)'
: theme.backgroundColor, : 'var(--mantine-color-background-0)',
zIndex: 3, zIndex: 3,
}} }}
onClick={() => { onClick={() => {
@@ -182,12 +182,12 @@ function ThemePlaylistCard({
right: 40, right: 40,
paddingRight: 4, paddingRight: 4,
paddingLeft: 4, paddingLeft: 4,
backgroundColor: theme.borderColor, backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px', borderRadius: '4px',
color: color:
theme.borderColor === theme.primaryColor theme.borderColor === theme.primaryColor
? theme.accentColor ? 'var(--mantine-color-accent-0)'
: theme.backgroundColor, : 'var(--mantine-color-background-0)',
zIndex: 3, zIndex: 3,
}} }}
onClick={() => { onClick={() => {
@@ -204,9 +204,9 @@ function ThemePlaylistCard({
h={'320px'} h={'320px'}
style={{ style={{
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundColor: theme.searchColor, backgroundColor: 'var(--mantine-color-search-0)',
color: theme.accentColor, color: 'var(--mantine-color-accent-0)',
border: `solid ${theme.borderColor}`, border: 'solid var(--mantine-color-border-0)',
}} }}
onClick={() => { onClick={() => {
setCurrentThemePlaylist(cardPlaylist.name); setCurrentThemePlaylist(cardPlaylist.name);
@@ -222,8 +222,8 @@ function ThemePlaylistCard({
mt={8} mt={8}
mb={-8} mb={-8}
style={{ style={{
color: theme.backgroundColor, color: 'var(--mantine-color-background-0)',
backgroundColor: theme.primaryColor, backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px', borderRadius: '4px',
}} }}
> >
@@ -249,8 +249,8 @@ function ThemePlaylistCard({
mt={8} mt={8}
mb={-8} mb={-8}
style={{ style={{
color: theme.backgroundColor, color: 'var(--mantine-color-background-0)',
backgroundColor: theme.primaryColor, backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px', borderRadius: '4px',
}} }}
> >

11
src/pages/settings/components/Theming/ThemePlaylistModal.tsx
View File

@@ -33,7 +33,7 @@ function ThemePlaylistModal({
handleSavePlaylist: () => void; handleSavePlaylist: () => void;
allThemes: Theme[]; allThemes: Theme[];
}) { }) {
const { theme, isMobile, modalStyle } = useCommonHooks(); const { isMobile } = useCommonHooks();
const [themeList, setThemeList] = useState<any>([]); const [themeList, setThemeList] = useState<any>([]);
useEffect(() => { useEffect(() => {
@@ -57,13 +57,12 @@ function ThemePlaylistModal({
handleClose(); handleClose();
setThemeList('[]'); setThemeList('[]');
}} }}
style={modalStyle}
> >
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} /> <Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
<Modal.Content> <Modal.Content>
<Modal.Header style={{ justifyContent: 'center' }}> <Modal.Header style={{ justifyContent: 'center' }}>
<Group pos={'absolute'}> <Group pos={'absolute'}>
<Text c={theme.backgroundColor}>Name:</Text> <Text c={'var(--mantine-color-background-0)'}>Name:</Text>
<TextInput <TextInput
className={textInputClasses.default} className={textInputClasses.default}
classNames={textInputClasses} classNames={textInputClasses}
@@ -74,12 +73,12 @@ function ThemePlaylistModal({
} }
styles={{ styles={{
label: { label: {
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
}, },
input: { input: {
color: theme.primaryColor, color: 'var(--mantine-color-primary-0)',
border: 'none', border: 'none',
borderBottom: `1px solid ${theme.primaryColor}`, borderBottom: '1px solid var(--mantine-color-primary-0)',
}, },
}} }}
/> />

12
src/pages/settings/components/Theming/ThemePlaylists.tsx
View File

@@ -101,11 +101,11 @@ function ThemePlaylists() {
fontSize: '2em', fontSize: '2em',
fontWeight: 'bold', fontWeight: 'bold',
borderRadius: '50%', borderRadius: '50%',
backgroundColor: theme.borderColor, backgroundColor: 'var(--mantine-color-border-0)',
color: color:
theme.borderColor === theme.primaryColor theme.borderColor === theme.primaryColor
? theme.accentColor ? 'var(--mantine-color-accent-0)'
: theme.backgroundColor, : 'var(--mantine-color-background-0)',
}} }}
/> />
)} )}
@@ -149,11 +149,11 @@ function ThemePlaylists() {
fontSize: '2em', fontSize: '2em',
fontWeight: 'bold', fontWeight: 'bold',
borderRadius: '50%', borderRadius: '50%',
backgroundColor: theme.borderColor, backgroundColor: 'var(--mantine-color-border-0)',
color: color:
theme.borderColor === theme.primaryColor theme.borderColor === theme.primaryColor
? theme.accentColor ? 'var(--mantine-color-accent-0)'
: theme.primaryColor, : 'var(--mantine-color-primary-0)',
}} }}
/> />
)} )}

1
src/pages/settings/components/Theming/ThemeSelect.tsx
View File

@@ -30,7 +30,6 @@ function ThemeSelect({
<Text w={'100px'}>{timeIndex}</Text> <Text w={'100px'}>{timeIndex}</Text>
<Select <Select
labelProps={{ display: 'none' }} labelProps={{ display: 'none' }}
comboboxProps={{ withinPortal: false }}
placeholder='Select Theme' placeholder='Select Theme'
defaultValue={themeList[index]} defaultValue={themeList[index]}
data={allThemes?.map((theme: Theme) => { data={allThemes?.map((theme: Theme) => {

4
src/pages/settings/components/Theming/Themes.tsx
View File

@@ -121,9 +121,9 @@ function ThemesSettings() {
<Switch <Switch
label={ label={
isMobile ? ( isMobile ? (
<FaDice size={20} color={theme.primaryColor} /> <FaDice size={20} color={'var(--mantine-color-primary-0)'} />
) : ( ) : (
<Text c={theme.primaryColor}>Random Theme</Text> <Text c={'var(--mantine-color-primary-0)'}>Random Theme</Text>
) )
} }
labelPosition='left' labelPosition='left'

10
src/pages/settings/components/WoL/DebouncedWolClient.tsx
View File

@@ -14,7 +14,7 @@ function DebouncedWolClient({
wolClient: WolClient; wolClient: WolClient;
setIsOpen: (isOpen: boolean) => void; setIsOpen: (isOpen: boolean) => void;
}) { }) {
const { theme, handleDelete } = useCommonHooks(); const { handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
@@ -55,8 +55,8 @@ function DebouncedWolClient({
padding: '8px', padding: '8px',
margin: '8px', margin: '8px',
borderRadius: '10px', borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)', backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--color-background)', color: 'var(--mantine-color-background-0)',
}} }}
>{`"${client.hostname}"`}</Text> >{`"${client.hostname}"`}</Text>
<Text c='red'>This action cannot be undone!</Text> <Text c='red'>This action cannot be undone!</Text>
@@ -64,8 +64,8 @@ function DebouncedWolClient({
} }
/> />
<Tooltip <Tooltip
color={theme.primaryColor} color={'var(--mantine-color-primary-0)'}
bd={`solid 1px ${theme.borderColor}`} bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'} label={'Delete'}
> >
<ActionIcon <ActionIcon

1
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -144,7 +144,6 @@ const WolClientSettings = () => {
<Popover <Popover
withArrow withArrow
withOverlay withOverlay
withinPortal={false}
closeOnClickOutside={!isOpen} closeOnClickOutside={!isOpen}
classNames={popoverClasses} classNames={popoverClasses}
> >

22
src/styles/ActionIcon.module.css
View File

@@ -1,7 +1,7 @@
.backButton { .backButton {
&.root { &.root {
background-color: transparent !important; background-color: transparent !important;
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
margin-top: 1.5rem; margin-top: 1.5rem;
@@ -13,7 +13,7 @@
} }
:hover { :hover {
background-color: transparent !important; background-color: transparent !important;
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
} }
} }
} }
@@ -28,8 +28,8 @@
display: none; display: none;
} }
:hover { :hover {
background-color: var(--color-text-pri) !important; background-color: var(--mantine-color-primary-0) !important;
color: var(--color-text-acc) !important; color: var(--mantine-color-accent-0) !important;
} }
} }
} }
@@ -48,8 +48,8 @@
display: none; display: none;
} }
:hover { :hover {
background-color: var(--color-text-pri) !important; background-color: var(--mantine-color-primary-0) !important;
color: var(--color-text-acc) !important; color: var(--mantine-color-accent-0) !important;
transition: all .1s ease; transition: all .1s ease;
} }
} }
@@ -63,7 +63,7 @@
border-radius: 100%; border-radius: 100%;
border: none; border: none;
background-color: transparent; background-color: transparent;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
.icon { .icon {
font-size: 24px; font-size: 24px;
} }
@@ -71,8 +71,8 @@
display: none; display: none;
} }
:hover { :hover {
background-color: var(--color-text-pri) !important; background-color: var(--mantine-color-primary-0) !important;
color: var(--color-text-acc) !important; color: var(--mantine-color-accent-0) !important;
transition: all .1s ease; transition: all .1s ease;
} }
} }
@@ -81,7 +81,7 @@
.selectOptionActions { .selectOptionActions {
&.root { &.root {
background-color: transparent !important; background-color: transparent !important;
color: var(--color-text-acc) !important; color: var(--mantine-color-accent-0) !important;
.icon { .icon {
font-size: 24px; font-size: 24px;
} }
@@ -89,7 +89,7 @@
display: none; display: none;
} }
:hover { :hover {
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
} }
} }
} }

2
src/styles/Box.module.css
View File

@@ -29,7 +29,7 @@
stroke-dasharray: 260; stroke-dasharray: 260;
stroke-width: 10px; stroke-width: 10px;
fill: transparent; fill: transparent;
stroke: var(--color-search-background); stroke: var(--mantine-color-search-0);
animation: svgAnimation 1.5s linear infinite; animation: svgAnimation 1.5s linear infinite;
} }

38
src/styles/Button.module.css
View File

@@ -7,15 +7,15 @@
position: fixed; position: fixed;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
background-color: var(--color-background); background-color: var(--mantine-color-background-0);
border-radius: 100%; border-radius: 100%;
border: solid 2px var(--color-text-pri); border: solid 2px var(--mantine-color-primary-0);
cursor: pointer; cursor: pointer;
} }
&:hover { &:hover {
background-color: var(--color-background) !important; background-color: var(--mantine-color-background-0) !important;
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
} }
} }
@@ -30,14 +30,14 @@
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
border-radius: 1em; border-radius: 1em;
color: var(--color-text-acc); color: var(--mantine-color-accent-0);
background-color: var(--color-background); background-color: var(--mantine-color-background-0);
border: solid 2px var(--color-text-pri); border: solid 2px var(--mantine-color-primary-0);
transition: all .2s ease; transition: all .2s ease;
&:hover { &:hover {
color: var(--color-background); color: var(--mantine-color-background-0);
background-color: var(--color-text-pri); background-color: var(--mantine-color-primary-0);
border: solid 2px var(--color-text-acc); border: solid 2px var(--mantine-color-accent-0);
} }
} }
} }
@@ -51,12 +51,12 @@
height: 2rem; height: 2rem;
padding: 8px; padding: 8px;
margin: 0px; margin: 0px;
background-color: var(--color-search-background); background-color: var(--mantine-color-search-0);
color: var(--color-text-acc); color: var(--mantine-color-accent-0);
} }
&:hover { &:hover {
background-color: var(--color-text-pri) !important; background-color: var(--mantine-color-primary-0) !important;
color: var(--color-background) !important; color: var(--mantine-color-background-0) !important;
} }
} }
@@ -64,13 +64,13 @@
&.root { &.root {
padding: 10px; padding: 10px;
margin: 0px; margin: 0px;
color: var(--color-background); color: var(--mantine-color-background-0);
background-color: var(--color-text-pri); background-color: var(--mantine-color-primary-0);
border-radius: 20px; border-radius: 20px;
cursor: pointer; cursor: pointer;
} }
&:hover { &:hover {
background-color: var(--color-text-acc) !important; background-color: var(--mantine-color-accent-0) !important;
color: var(--color-background) !important; color: var(--mantine-color-background-0) !important;
} }
} }

6
src/styles/Card.module.css
View File

@@ -1,6 +1,6 @@
.settingsItem { .settingsItem {
&.root { &.root {
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
background-color: transparent; background-color: transparent;
backdrop-filter: blur(10px) brightness(1.25) !important; backdrop-filter: blur(10px) brightness(1.25) !important;
} }
@@ -8,12 +8,12 @@
.settingsItemHover { .settingsItemHover {
&.root { &.root {
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
background-color: transparent; background-color: transparent;
backdrop-filter: blur(10px) brightness(1.25) !important; backdrop-filter: blur(10px) brightness(1.25) !important;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: var(--color-text-acc); color: var(--mantine-color-accent-0);
} }
} }
} }

10
src/styles/Menu.module.css
View File

@@ -1,14 +1,14 @@
.dropdown { .dropdown {
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
border-color: var(--color-text-pri) !important; border-color: var(--mantine-color-primary-0) !important;
backdrop-filter: blur(10px) brightness(3) !important; backdrop-filter: blur(10px) brightness(3) !important;
} }
.item { .item {
&:hover { &:hover {
background-color: var(--color-text-pri); background-color: var(--mantine-color-primary-0);
color: var(--color-background); color: var(--mantine-color-background-0);
} }
} }
.label { .label {
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
} }

14
src/styles/Modal.module.css
View File

@@ -2,10 +2,10 @@
&.root { &.root {
.content { .content {
border-radius: 15px; border-radius: 15px;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
background-color: var(--color-background); background-color: var(--mantine-color-background-0);
.header { .header {
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
.title { .title {
font-size: 22px; font-size: 22px;
} }
@@ -31,11 +31,11 @@
.content { .content {
justify-content: center; justify-content: center;
align-content: center; align-content: center;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
background-color: var(--color-background); background-color: var(--mantine-color-background-0);
.header { .header {
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
background-color: var(--color-text-acc); background-color: var(--mantine-color-accent-0);
.close { .close {
color: white; color: white;
background-color: var(--mantine-color-red-6); background-color: var(--mantine-color-red-6);

34
src/styles/MultiSelect.module.css
View File

@@ -1,47 +1,47 @@
.label { .label {
margin-bottom: 5px !important; margin-bottom: 5px !important;
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
font-size: 14px !important; font-size: 14px !important;
} }
.input { .input {
border-color: var(--color-border) !important; border-color: var(--mantine-color-border-0) !important;
background-color: var(--color-background) !important; background-color: var(--mantine-color-background-0) !important;
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
&:focus { &:focus {
border-color: var(--color-text-pri) !important; border-color: var(--mantine-color-primary-0) !important;
} }
display: flex !important; display: flex !important;
overflow: clip !important; overflow: clip !important;
height: 36px !important; height: 36px !important;
&::placeholder { &::placeholder {
color: var(--color-text-acc) !important; color: var(--mantine-color-accent-0) !important;
} }
} }
.options { .options {
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
} }
.option { .option {
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
font-size: 14px !important; font-size: 14px !important;
&[data-checked] { &[data-checked] {
background-color: var(--color-text-acc) !important; background-color: var(--mantine-color-accent-0) !important;
color: var(--color-background) !important; color: var(--mantine-color-background-0) !important;
&:hover { &:hover {
background-color: var(--color-text-acc) !important; background-color: var(--mantine-color-accent-0) !important;
color: var(--color-background) !important; color: var(--mantine-color-background-0) !important;
} }
} }
&:hover { &:hover {
background-color: var(--color-text-pri) !important; background-color: var(--mantine-color-primary-0) !important;
color: var(--color-background) !important; color: var(--mantine-color-background-0) !important;
} }
} }
.dropdown { .dropdown {
background-color: var(--color-background) !important; background-color: var(--mantine-color-background-0) !important;
} }
.pillsList { .pillsList {
@@ -51,9 +51,9 @@
} }
.inputField { .inputField {
color: var(--color-text-acc) !important; color: var(--mantine-color-accent-0) !important;
&::placeholder { &::placeholder {
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
} }
} }

2
src/styles/Popover.module.css
View File

@@ -1,3 +1,3 @@
.dropdown { .dropdown {
border: solid 2px var(--color-border) !important; border: solid 2px var(--mantine-color-border-0) !important;
} }

66
src/styles/Select.module.css
View File

@@ -1,60 +1,60 @@
.menuSelectLabel { .menuSelectLabel {
margin-bottom: 5px !important; margin-bottom: 5px !important;
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
font-size: 14px !important; font-size: 14px !important;
} }
.menuSelectInput { .menuSelectInput {
border-color: var(--color-border) !important; border-color: var(--mantine-color-border-0) !important;
background-color: var(--color-background) !important; background-color: var(--mantine-color-background-0) !important;
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
&:focus { &:focus {
border-color: var(--color-text-pri) !important; border-color: var(--mantine-color-primary-0) !important;
} }
display: flex !important; display: flex !important;
overflow: clip !important; overflow: clip !important;
height: 36px !important; height: 36px !important;
&::placeholder { &::placeholder {
color: var(--color-text-acc) !important; color: var(--mantine-color-accent-0) !important;
} }
} }
.menuSelectOptions { .menuSelectOptions {
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
} }
.menuSelectOption { .menuSelectOption {
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
font-size: 14px !important; font-size: 14px !important;
&[data-checked] { &[data-checked] {
background-color: var(--color-text-acc) !important; background-color: var(--mantine-color-accent-0) !important;
color: var(--color-background) !important; color: var(--mantine-color-background-0) !important;
&:hover { &:hover {
background-color: var(--color-text-acc) !important; background-color: var(--mantine-color-accent-0) !important;
color: var(--color-background) !important; color: var(--mantine-color-background-0) !important;
} }
} }
&:hover { &:hover {
background-color: var(--color-text-pri) !important; background-color: var(--mantine-color-primary-0) !important;
color: var(--color-background) !important; color: var(--mantine-color-background-0) !important;
} }
} }
.dropdown { .dropdown {
border: none !important; border: none !important;
background-color: var(--color-search-background) !important; background-color: var(--mantine-color-search-0) !important;
backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
} }
.options { .options {
.option { .option {
transition: all .1s ease !important; transition: all .1s ease !important;
color: var(--color-text-acc); color: var(--mantine-color-accent-0);
font-size: 18px; font-size: 18px;
&[data-combobox-selected="true"] { &[data-combobox-selected="true"] {
background-color: var(--color-background); background-color: var(--mantine-color-background-0);
} }
&:hover { &:hover {
background-color: var(--color-background); background-color: var(--mantine-color-background-0);
} }
} }
} }
@@ -64,9 +64,9 @@
justify-content: center; justify-content: center;
.input { .input {
border: 0; border: 0;
border-bottom: thin solid var(--color-border); border-bottom: thin solid var(--mantine-color-border-0);
background-color: transparent; background-color: transparent;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
font-style: italic; font-style: italic;
font-size: 0.8em; font-size: 0.8em;
height: 3.5em; height: 3.5em;
@@ -76,14 +76,10 @@
padding-right: 1em; padding-right: 1em;
text-align: center; text-align: center;
&[data-active="true"] { &[data-active="true"] {
background-color: color-mix( background-color: color-mix(in srgb, var(--mantine-color-search-0), transparent 50%);
in srgb, border-color: var(--mantine-color-border-0);
var(--color-search-background),
transparent 50%
);
border-color: var(--color-border);
outline: none; outline: none;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 1.2em; font-size: 1.2em;
@@ -97,7 +93,7 @@
} }
.section { .section {
transition: opacity 0.1s 0s ease; transition: opacity 0.1s 0s ease;
color: var(--color-border); color: var(--mantine-color-border-0);
width: auto; width: auto;
padding-left: .5rem; padding-left: .5rem;
opacity: 0; opacity: 0;
@@ -105,10 +101,10 @@
} }
.wrapper:focus-within { .wrapper:focus-within {
.input { .input {
background-color: var(--color-search-background); background-color: var(--mantine-color-search-0);
border-color: var(--color-border); border-color: var(--mantine-color-border-0);
outline: none; outline: none;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 1.2em; font-size: 1.2em;
@@ -119,10 +115,10 @@
border-bottom-left-radius: .25em; border-bottom-left-radius: .25em;
border-bottom-right-radius: .25em; border-bottom-right-radius: .25em;
&[data-active="true"] { &[data-active="true"] {
background-color: var(--color-search-background); background-color: var(--mantine-color-search-0);
border-color: var(--color-border); border-color: var(--mantine-color-border-0);
outline: none; outline: none;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 1.2em; font-size: 1.2em;
@@ -136,7 +132,7 @@
} }
.section { .section {
transition: opacity 0.4s 0.4s ease; transition: opacity 0.4s 0.4s ease;
color: var(--color-border); color: var(--mantine-color-border-0);
width: auto; width: auto;
padding-left: .5rem; padding-left: .5rem;
opacity: 1; opacity: 1;

12
src/styles/Slider.module.css
View File

@@ -1,23 +1,23 @@
.default { .default {
.trackContainer { .trackContainer {
.track::before { .track::before {
background-color: var(--color-border); background-color: var(--mantine-color-border-0);
} }
.bar { .bar {
background-color: var(--color-text-pri); background-color: var(--mantine-color-primary-0);
} }
.mark { .mark {
border-color: var(--color-text-acc); border-color: var(--mantine-color-accent-0);
} }
.thumb { .thumb {
border-color: var(--color-text-acc); border-color: var(--mantine-color-accent-0);
} }
.markLabel { .markLabel {
display: none; display: none;
} }
} }
.label { .label {
color: var(--color-background); color: var(--mantine-color-background-0);
background-color: var(--color-text-pri); background-color: var(--mantine-color-primary-0);
} }
} }

6
src/styles/Stack.module.css
View File

@@ -30,7 +30,7 @@
stroke-dasharray: 260; stroke-dasharray: 260;
stroke-width: 10px; stroke-width: 10px;
fill: transparent; fill: transparent;
stroke: var(--color-search-background); stroke: var(--mantine-color-search-0);
animation: svgAnimation 1.5s linear infinite; animation: svgAnimation 1.5s linear infinite;
} }
@@ -49,7 +49,7 @@
.menuStack { .menuStack {
height: 150px; height: 150px;
background-color: var(--color-search-background); background-color: var(--mantine-color-search-0);
border-radius: 10px; border-radius: 10px;
} }
@@ -65,7 +65,7 @@
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
&[data-loaded="true"] { &[data-loaded="true"] {
opacity: 0; opacity: 0;
background-color: var(--color-background); background-color: var(--mantine-color-background-0);
z-index: -1; z-index: -1;
} }
} }

12
src/styles/Switch.module.css
View File

@@ -11,26 +11,26 @@
&.root { &.root {
.label { .label {
font-size: 16px; font-size: 16px;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
} }
.track { .track {
transition: all .2s ease !important; transition: all .2s ease !important;
border: none; border: none;
background-color: var(--color-search-background); background-color: var(--mantine-color-search-0);
border-color: var(--color-text-acc); border-color: var(--mantine-color-accent-0);
} }
.thumb { .thumb {
transition: all .2s ease !important; transition: all .2s ease !important;
border: none; border: none;
background-color: var(--color-text-acc); background-color: var(--mantine-color-accent-0);
} }
.input:checked + * > .thumb { .input:checked + * > .thumb {
transition: all .2s ease !important; transition: all .2s ease !important;
background-color: var(--color-background); background-color: var(--mantine-color-background-0);
} }
.input:checked + .track { .input:checked + .track {
transition: all .2s ease !important; transition: all .2s ease !important;
background-color: var(--color-text-acc); background-color: var(--mantine-color-accent-0);
} }
} }
} }

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

@@ -10,26 +10,26 @@
} }
} }
.panel { .panel {
border-top: solid 2px var(--color-text-acc); border-top: solid 2px var(--mantine-color-accent-0);
} }
.tab { .tab {
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
border-color: var(--color-text-acc); border-color: var(--mantine-color-accent-0);
&:hover { &:hover {
color: var(--color-background); color: var(--mantine-color-background-0);
background-color: var(--color-text-acc); background-color: var(--mantine-color-accent-0);
} }
&[data-active="true"] { &[data-active="true"] {
border-color: var(--color-text-pri); border-color: var(--mantine-color-primary-0);
} }
} }
.list { .list {
border-top: solid 2px var(--color-text-acc); border-top: solid 2px var(--mantine-color-accent-0);
padding-left: 2rem; padding-left: 2rem;
padding-top: 2rem; padding-top: 2rem;
} }
.list::before { .list::before {
border-color: var(--color-text-acc); border-color: var(--mantine-color-accent-0);
} }
&.root { &.root {
overflow: hidden; overflow: hidden;

24
src/styles/Text.module.css
View File

@@ -8,7 +8,7 @@
font-size: 3.5em; font-size: 3.5em;
font-weight: 400; font-weight: 400;
width: max-content; width: max-content;
color: var(--color-text-acc); color: var(--mantine-color-accent-0);
} }
} }
@@ -23,7 +23,7 @@
margin-right: 1em; margin-right: 1em;
text-transform: uppercase; text-transform: uppercase;
font-weight: 300; font-weight: 300;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
} }
} }
@@ -37,13 +37,13 @@
text-transform: uppercase; text-transform: uppercase;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
} }
} }
.label { .label {
&.root { &.root {
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
} }
} }
@@ -52,7 +52,7 @@
font-weight: 400; font-weight: 400;
font-size: 11px; font-size: 11px;
font-style: normal; font-style: normal;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
font-family: "Jost", sans-serif; font-family: "Jost", sans-serif;
margin: 0; margin: 0;
} }
@@ -64,7 +64,7 @@
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
text-transform: uppercase; text-transform: uppercase;
color: var(--color-text-acc); color: var(--mantine-color-accent-0);
margin: 0; margin: 0;
} }
} }
@@ -74,7 +74,7 @@
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
height: 10px; height: 10px;
color: var(--color-text-acc); color: var(--mantine-color-accent-0);
text-transform: uppercase; text-transform: uppercase;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
@@ -86,7 +86,7 @@
display: block; display: block;
font-size: 14px; font-size: 14px;
line-height: 2; line-height: 2;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
width: min-content; width: min-content;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@@ -99,8 +99,8 @@
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
margin-top: 1.5rem; margin-top: 1.5rem;
color: var(--color-text-acc); color: var(--mantine-color-accent-0);
background-color: var(--color-search-background); background-color: var(--mantine-color-search-0);
border-radius: 8px; border-radius: 8px;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
@@ -111,7 +111,7 @@
&.root { &.root {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
} }
} }
@@ -137,6 +137,6 @@
} }
a { a {
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
text-decoration: none; text-decoration: none;
} }

14
src/styles/TextInput.module.css
View File

@@ -6,12 +6,12 @@
.input { .input {
width: 100%; width: 100%;
border: none; border: none;
background-color: var(--color-search-background); background-color: var(--mantine-color-search-0);
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
font-size: 18px; font-size: 18px;
} }
.section { .section {
color: var(--color-border); color: var(--mantine-color-border-0);
width: auto; width: auto;
padding-left: .5rem; padding-left: .5rem;
opacity: 1; opacity: 1;
@@ -28,18 +28,18 @@
.input { .input {
width: 100%; width: 100%;
border: none; border: none;
background-color: var(--color-search-background); background-color: var(--mantine-color-search-0);
color: var(--color-text-pri); color: var(--mantine-color-primary-0);
font-size: 18px; font-size: 18px;
} }
.section { .section {
color: var(--color-border); color: var(--mantine-color-border-0);
width: auto; width: auto;
padding-left: .5rem; padding-left: .5rem;
opacity: 1; opacity: 1;
} }
::placeholder { ::placeholder {
color: var(--color-text-acc) !important; color: var(--mantine-color-accent-0) !important;
opacity: 50%; opacity: 50%;
} }
} }

2
src/styles/ThemeIcon.module.css
View File

@@ -1,6 +1,6 @@
.weatherIcon { .weatherIcon {
height: auto !important; height: auto !important;
width: auto !important; width: auto !important;
color: var(--color-text-pri) !important; color: var(--mantine-color-primary-0) !important;
background: transparent !important; background: transparent !important;
} }