Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix light mode selected colour on the labels picker

Browse Source
This commit is contained in:
Jackson Harper
2023-06-22 10:52:37 +08:00
parent a0556055c5
commit f9d35ee216
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/web/components/elements/EditLabelChip.tsx
View File

@ -2,6 +2,7 @@ import { Button } from './Button'
import { SpanBox, HStack } from './LayoutPrimitives'
import { Circle, X } from 'phosphor-react'
import { isDarkTheme } from '../../lib/themeUpdater'
import { theme } from '../tokens/stitches.config'
type EditLabelChipProps = {
text: string
@ -13,9 +14,12 @@ type EditLabelChipProps = {
export function EditLabelChip(props: EditLabelChipProps): JSX.Element {
const isDark = isDarkTheme()
const selectedBorder = isDark ? '#FFEA9F' : '#D9D9D9'
const selectedBorder = isDark ? '#FFEA9F' : '$omnivoreGray'
const unSelectedBorder = isDark ? 'transparent' : '#DEDEDE'
const xUnselectedColor = isDark ? '#6A6968' : '#DEDEDE'
const xSelectedColor = isDark
? '#FFEA9F'
: theme.colors.omnivoreGray.toString()
const xUnselectedColor = isDark ? '#6A6968' : '#2A2A2A'
return (
<SpanBox
@ -50,7 +54,7 @@ export function EditLabelChip(props: EditLabelChipProps): JSX.Element {
>
<X
size={14}
color={props.isSelected ? '#FFEA9F' : xUnselectedColor}
color={props.isSelected ? xSelectedColor : xUnselectedColor}
/>
</Button>
</HStack>

3
packages/web/components/elements/EditLabelChipStack.tsx
View File

@ -4,6 +4,7 @@ import { Circle, X } from 'phosphor-react'
import { isDarkTheme } from '../../lib/themeUpdater'
import { Label } from '../../lib/networking/fragments/labelFragment'
import { useMemo } from 'react'
import { theme } from '../tokens/stitches.config'
type EditLabelChipStackProps = {
labels: Label[]
@ -16,7 +17,7 @@ export function EditLabelChipStack(
): JSX.Element {
const isDark = isDarkTheme()
const selectedBorder = isDark ? '#FFEA9F' : '#D9D9D9'
const selectedBorder = isDark ? '#FFEA9F' : '$omnivoreGray'
const unSelectedBorder = isDark ? 'transparent' : '#DEDEDE'
const colors = useMemo(() => {