prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dont use isDarkMode, use themed color for setting icon colors

Browse source
This commit is contained in:
Jackson Harper 2022-03-30 20:31:50 -07:00
parent 88c96c824f
commit a0ef2fd40a
4 changed files with 13 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/web/components/elements/Avatar.tsx
View file

@ -52,5 +52,5 @@ const StyledFallback = styled(Fallback, {
fontSize: '$2',
fontWeight: 700,
backgroundColor: '$avatarBg',
color: '$avatarFont',
color: '$toolColor',
})

7
packages/web/components/elements/LabelColorDropdown.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from 'react'
import { styled } from '../tokens/stitches.config'
import { styled, theme } from '../tokens/stitches.config'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { HexColorPicker } from 'react-colorful'
import { Button } from './Button'
@ -17,6 +17,7 @@ import {
import { labelColorObjects } from '../../utils/settings-page/labels/labelColorObjects'
import { DropdownOption } from './DropdownElements'
import { isDarkTheme } from '../../lib/themeUpdater'
import { useDarkModeListener } from '../../lib/hooks/useDarkModeListener'
const DropdownMenuContent = styled(DropdownMenuPrimitive.Content, {
maxWidth: 190,
@ -77,8 +78,6 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
setLabelColorHex,
} = props
const isDarkMode = isDarkTheme()
const iconColor = isDarkMode ? '#FFFFFF': '#0A0806'
const [open, setOpen] = useState<boolean | undefined>(false);
const handleCustomColorChange = (color: string) => {
@ -147,7 +146,7 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
)}
</SpanBox>
<CaretDown size={16} color={iconColor} weight="bold" />
<CaretDown size={16} color={theme.colors.toolColor.toString()} weight="bold" />
</Button>
</DropdownMenuTrigger>

4
packages/web/components/tokens/stitches.config.ts
View file

@ -160,7 +160,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
// Avatar Fallback color
avatarBg: '#FFFFFF',
avatarFont: '#0A0806',
toolColor: '#0A0806',
labelButtonsBg: '#F5F5F4',
tooltipIcons: '#FDFAEC'
@ -212,7 +212,7 @@ const darkThemeSpec = {
readerTableHeader: '#FFFFFF',
tooltipIcons: '#5F5E58',
avatarBg: '#000000',
avatarFont: 'rgba(255, 255, 255, 0.8)',
toolColor: 'rgba(255, 255, 255, 0.8)',
labelButtonsBg: '#5F5E58',
},

18
packages/web/pages/settings/labels.tsx
View file

@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
import { Button } from '../../components/elements/Button'
import { PlusIcon } from '../../components/elements/images/PlusIcon'
import { styled } from '../../components/tokens/stitches.config'
import { styled, theme } from '../../components/tokens/stitches.config'
import {
Box,
SpanBox,
@ -14,7 +14,7 @@ import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuer
import { createLabelMutation } from '../../lib/networking/mutations/createLabelMutation'
import { updateLabelMutation } from '../../lib/networking/mutations/updateLabelMutation'
import { deleteLabelMutation } from '../../lib/networking/mutations/deleteLabelMutation'
import { applyStoredTheme, isDarkTheme } from '../../lib/themeUpdater'
import { applyStoredTheme } from '../../lib/themeUpdater'
import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
import { Label } from '../../lib/networking/queries/useGetLabelsQuery'
import { StyledText } from '../../components/elements/StyledText'
@ -24,7 +24,6 @@ import {
PencilSimple,
Trash,
Plus,
DotsSixVertical,
} from 'phosphor-react'
import {
LabelColor,
@ -470,9 +469,6 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
editingLabelId === label?.id || (isCreateMode && !label)
const labelName = label?.name || nameInputText
const isDarkMode = isDarkTheme()
const iconColor = isDarkMode ? '#D8D7D5': '#5F5E58'
const handleEdit = () => {
editingLabelId && updateLabel(editingLabelId)
setEditingLabelId(null)
@ -492,7 +488,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
disabled={isCreateMode}
>
<Dropdown
triggerElement={<DotsThree size={24} color={iconColor} />}
triggerElement={<DotsThree size={24} color={theme.colors.toolColor.toString()} />}
>
<DropdownOption onSelect={() => null}>
<Button
@ -507,7 +503,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
onClick={() => onEditPress(label)}
disabled={isCreateMode}
>
<PencilSimple size={24} color={iconColor} />
<PencilSimple size={24} color={theme.colors.toolColor.toString()} />
<StyledText
color="$grayText"
css={{ fontSize: '$5', marginLeft: '$2' }}
@ -683,7 +679,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
onClick={() => handleGenerateRandomColor(label?.id)}
disabled={!(isCreateMode && !label) && !(editingLabelId === label?.id)}
>
<ArrowClockwise size={16} color={iconColor} />
<ArrowClockwise size={16} color={theme.colors.toolColor.toString()} />
</IconButton>
</Box>
</TooltipWrapped>
@ -741,7 +737,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
onClick={() => onEditPress(label)}
disabled={isCreateMode}
>
<PencilSimple size={16} color={iconColor} />
<PencilSimple size={16} color={theme.colors.toolColor.toString()} />
</IconButton>
<IconButton
style="ctaWhite"
@ -749,7 +745,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
onClick={() => deleteLabel(label.id)}
disabled={isCreateMode}
>
<Trash size={16} color={iconColor} />
<Trash size={16} color={theme.colors.toolColor.toString()} />
</IconButton>
{moreActionsButton()}
</HStack>