Theme changes
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user