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

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}
>