Add labels to colors

This commit is contained in:
Brandon Presley 2022-11-30 14:32:42 +13:00
parent 4375a9c24e
commit 8e31dc2186
3 changed files with 36 additions and 32 deletions

View File

@ -1,4 +1,4 @@
import {ComponentProps} from 'react'
import {ComponentProps, useMemo} from 'react'
import {FAB, useTheme} from 'react-native-paper'
import {CombinedDarkTheme, CombinedDefaultTheme} from './App'
import {lightColors} from './colors'
@ -6,9 +6,13 @@ import {lightColors} from './colors'
export default function MassiveFab(props: Partial<ComponentProps<typeof FAB>>) {
const {colors} = useTheme()
const fabColor = lightColors.includes(colors.primary)
? CombinedDarkTheme.colors.background
: CombinedDefaultTheme.colors.background
const fabColor = useMemo(
() =>
lightColors.map(color => color.hex).includes(colors.primary)
? CombinedDarkTheme.colors.background
: CombinedDefaultTheme.colors.background,
[colors.primary],
)
return (
<FAB

View File

@ -241,24 +241,14 @@ export default function SettingsPage() {
]}
/>
)}
{'date format'.includes(term.toLowerCase()) && (
<Select
value={date}
onChange={changeDate}
items={formatOptions.map(option => ({
label: `Date format: ${format(today, option)}`,
value: option,
}))}
/>
)}
{'color'.includes(term.toLowerCase()) && (
<Select
value={darkColor}
onChange={changeDarkColor}
items={lightColors.map(colorOption => ({
label: 'Dark color',
value: colorOption,
color: colorOption,
items={lightColors.map(color => ({
label: `Dark color: ${color.name}`,
value: color.hex,
color: color.hex,
}))}
/>
)}
@ -266,10 +256,20 @@ export default function SettingsPage() {
<Select
value={lightColor}
onChange={changeLightColor}
items={darkColors.map(colorOption => ({
label: 'Light color',
value: colorOption,
color: colorOption,
items={darkColors.map(color => ({
label: `Light color: ${color.name}`,
value: color.hex,
color: color.hex,
}))}
/>
)}
{'date format'.includes(term.toLowerCase()) && (
<Select
value={date}
onChange={changeDate}
items={formatOptions.map(option => ({
label: `Date format: ${format(today, option)}`,
value: option,
}))}
/>
)}

View File

@ -1,19 +1,19 @@
import {DarkTheme, DefaultTheme} from 'react-native-paper'
export const lightColors = [
DarkTheme.colors.primary,
'#B3E5FC',
'#FA8072',
'#FFC0CB',
'#E9DCC9',
'#BBA1CE',
{hex: DarkTheme.colors.primary, name: 'Purple'},
{hex: '#B3E5FC', name: 'Blue'},
{hex: '#FA8072', name: 'Salmon'},
{hex: '#FFC0CB', name: 'Pink'},
{hex: '#E9DCC9', name: 'Linen'},
{hex: '#BBA1CE', name: 'Light purple'},
]
export const darkColors = [
DefaultTheme.colors.primary,
'#007AFF',
'#000000',
'#CD5C5C',
{hex: DefaultTheme.colors.primary, name: 'Purple'},
{hex: '#007AFF', name: 'Blue'},
{hex: '#000000', name: 'Black'},
{hex: '#CD5C5C', name: 'Red'},
]
export const colorShade = (color: any, amount: number) => {