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

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

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

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

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

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

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

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

@@ -20,11 +20,13 @@ function AppSettingsItem({
const Icon = allIcons[icon];
const [textDecoration, setTextDecoration] = useState<string>('none');
const [hover, setHover] = useState<boolean>(false);
const { isMobile, theme } = useCommonHooks();
const { isMobile } = useCommonHooks();
return (
<Box pos={'relative'}>
{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
className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -33,7 +33,7 @@ function ThemePlaylistModal({
handleSavePlaylist: () => void;
allThemes: Theme[];
}) {
const { theme, isMobile, modalStyle } = useCommonHooks();
const { isMobile } = useCommonHooks();
const [themeList, setThemeList] = useState<any>([]);
useEffect(() => {
@@ -57,13 +57,12 @@ function ThemePlaylistModal({
handleClose();
setThemeList('[]');
}}
style={modalStyle}
>
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
<Modal.Content>
<Modal.Header style={{ justifyContent: 'center' }}>
<Group pos={'absolute'}>
<Text c={theme.backgroundColor}>Name:</Text>
<Text c={'var(--mantine-color-background-0)'}>Name:</Text>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
@@ -74,12 +73,12 @@ function ThemePlaylistModal({
}
styles={{
label: {
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
},
input: {
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
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',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: theme.borderColor,
backgroundColor: 'var(--mantine-color-border-0)',
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.backgroundColor,
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)',
}}
/>
)}
@@ -149,11 +149,11 @@ function ThemePlaylists() {
fontSize: '2em',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: theme.borderColor,
backgroundColor: 'var(--mantine-color-border-0)',
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
? 'var(--mantine-color-accent-0)'
: '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>
<Select
labelProps={{ display: 'none' }}
comboboxProps={{ withinPortal: false }}
placeholder='Select Theme'
defaultValue={themeList[index]}
data={allThemes?.map((theme: Theme) => {

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

@@ -121,9 +121,9 @@ function ThemesSettings() {
<Switch
label={
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'

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
.settingsItem {
&.root {
color: var(--color-text-pri);
color: var(--mantine-color-primary-0);
background-color: transparent;
backdrop-filter: blur(10px) brightness(1.25) !important;
}
@@ -8,12 +8,12 @@
.settingsItemHover {
&.root {
color: var(--color-text-pri);
color: var(--mantine-color-primary-0);
background-color: transparent;
backdrop-filter: blur(10px) brightness(1.25) !important;
cursor: pointer;
&: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 {
color: var(--color-text-pri);
border-color: var(--color-text-pri) !important;
color: var(--mantine-color-primary-0);
border-color: var(--mantine-color-primary-0) !important;
backdrop-filter: blur(10px) brightness(3) !important;
}
.item {
&:hover {
background-color: var(--color-text-pri);
color: var(--color-background);
background-color: var(--mantine-color-primary-0);
color: var(--mantine-color-background-0);
}
}
.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 {
.content {
border-radius: 15px;
color: var(--color-text-pri);
background-color: var(--color-background);
color: var(--mantine-color-primary-0);
background-color: var(--mantine-color-background-0);
.header {
color: var(--color-text-pri);
color: var(--mantine-color-primary-0);
.title {
font-size: 22px;
}
@@ -31,11 +31,11 @@
.content {
justify-content: center;
align-content: center;
color: var(--color-text-pri);
background-color: var(--color-background);
color: var(--mantine-color-primary-0);
background-color: var(--mantine-color-background-0);
.header {
color: var(--color-text-pri);
background-color: var(--color-text-acc);
color: var(--mantine-color-primary-0);
background-color: var(--mantine-color-accent-0);
.close {
color: white;
background-color: var(--mantine-color-red-6);

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

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

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

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

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

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

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

@@ -11,26 +11,26 @@
&.root {
.label {
font-size: 16px;
color: var(--color-text-pri);
color: var(--mantine-color-primary-0);
}
.track {
transition: all .2s ease !important;
border: none;
background-color: var(--color-search-background);
border-color: var(--color-text-acc);
background-color: var(--mantine-color-search-0);
border-color: var(--mantine-color-accent-0);
}
.thumb {
transition: all .2s ease !important;
border: none;
background-color: var(--color-text-acc);
background-color: var(--mantine-color-accent-0);
}
.input:checked + * > .thumb {
transition: all .2s ease !important;
background-color: var(--color-background);
background-color: var(--mantine-color-background-0);
}
.input:checked + .track {
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 {
border-top: solid 2px var(--color-text-acc);
border-top: solid 2px var(--mantine-color-accent-0);
}
.tab {
color: var(--color-text-pri);
border-color: var(--color-text-acc);
color: var(--mantine-color-primary-0);
border-color: var(--mantine-color-accent-0);
&:hover {
color: var(--color-background);
background-color: var(--color-text-acc);
color: var(--mantine-color-background-0);
background-color: var(--mantine-color-accent-0);
}
&[data-active="true"] {
border-color: var(--color-text-pri);
border-color: var(--mantine-color-primary-0);
}
}
.list {
border-top: solid 2px var(--color-text-acc);
border-top: solid 2px var(--mantine-color-accent-0);
padding-left: 2rem;
padding-top: 2rem;
}
.list::before {
border-color: var(--color-text-acc);
border-color: var(--mantine-color-accent-0);
}
&.root {
overflow: hidden;

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

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

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

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

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

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