Tweak avi follow button styles (#4304)
* Tighten up * Tweak colors * Tweak for night mode * Add missing file * Contrast pluszio/stable
parent
f868821cfc
commit
5cda807d9d
|
@ -1,12 +1,14 @@
|
|||
import React from 'react'
|
||||
import {Dimensions} from 'react-native'
|
||||
|
||||
import * as themes from '#/alf/themes'
|
||||
|
||||
export * from '#/alf/types'
|
||||
export * as tokens from '#/alf/tokens'
|
||||
export {atoms} from '#/alf/atoms'
|
||||
export * from '#/alf/util/platform'
|
||||
export * as tokens from '#/alf/tokens'
|
||||
export * from '#/alf/types'
|
||||
export * from '#/alf/util/flatten'
|
||||
export * from '#/alf/util/platform'
|
||||
export * from '#/alf/util/themeSelector'
|
||||
|
||||
type BreakpointName = keyof typeof breakpoints
|
||||
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import {atoms} from '#/alf/atoms'
|
||||
import * as tokens from '#/alf/tokens'
|
||||
import type {Mutable} from '#/alf/types'
|
||||
import {atoms} from '#/alf/atoms'
|
||||
import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
|
||||
|
||||
export type ThemeName = 'light' | 'dim' | 'dark'
|
||||
export type ReadonlyTheme = typeof light
|
||||
export type Theme = Mutable<ReadonlyTheme>
|
||||
export type Theme = Mutable<ReadonlyTheme> & {name: ThemeName}
|
||||
export type ReadonlyPalette = typeof lightPalette
|
||||
export type Palette = Mutable<ReadonlyPalette>
|
||||
|
||||
|
@ -193,7 +193,7 @@ export const dimPalette: Palette = {
|
|||
} as const
|
||||
|
||||
export const light = {
|
||||
name: 'light',
|
||||
name: 'light' as ThemeName,
|
||||
palette: lightPalette,
|
||||
atoms: {
|
||||
text: {
|
||||
|
@ -278,7 +278,7 @@ export const light = {
|
|||
}
|
||||
|
||||
export const dark: Theme = {
|
||||
name: 'dark',
|
||||
name: 'dark' as ThemeName,
|
||||
palette: darkPalette,
|
||||
atoms: {
|
||||
text: {
|
||||
|
@ -367,7 +367,7 @@ export const dark: Theme = {
|
|||
|
||||
export const dim: Theme = {
|
||||
...dark,
|
||||
name: 'dim',
|
||||
name: 'dim' as ThemeName,
|
||||
palette: dimPalette,
|
||||
atoms: {
|
||||
...dark.atoms,
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
import {ThemeName} from '#/alf/themes'
|
||||
|
||||
export function select<T>(name: ThemeName, options: Record<ThemeName, T>) {
|
||||
switch (name) {
|
||||
case 'light':
|
||||
return options.light
|
||||
case 'dark':
|
||||
return options.dark || options.dim
|
||||
case 'dim':
|
||||
return options.dim || options.dark
|
||||
default:
|
||||
throw new Error(`select(theme, options) received unknown theme ${name}`)
|
||||
}
|
||||
}
|
|
@ -16,7 +16,7 @@ import {
|
|||
NativeDropdown,
|
||||
} from '#/view/com/util/forms/NativeDropdown'
|
||||
import * as Toast from '#/view/com/util/Toast'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {atoms as a, select, useTheme} from '#/alf'
|
||||
import {Button} from '#/components/Button'
|
||||
import {useFollowMethods} from '#/components/hooks/useFollowMethods'
|
||||
import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
|
||||
|
@ -90,17 +90,30 @@ export function AviFollowButton({
|
|||
hitSlop={createHitslop(3)}
|
||||
style={[
|
||||
a.rounded_full,
|
||||
t.atoms.bg_contrast_975,
|
||||
select(t.name, {
|
||||
light: t.atoms.bg_contrast_100,
|
||||
dim: t.atoms.bg_contrast_100,
|
||||
dark: t.atoms.bg_contrast_200,
|
||||
}),
|
||||
a.absolute,
|
||||
{
|
||||
bottom: -2,
|
||||
right: -2,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
borderWidth: 1,
|
||||
borderColor: t.atoms.bg.backgroundColor,
|
||||
},
|
||||
]}>
|
||||
<NativeDropdown items={items}>
|
||||
<Plus size="sm" fill={t.atoms.bg.backgroundColor} />
|
||||
<Plus
|
||||
size="sm"
|
||||
fill={
|
||||
select(t.name, {
|
||||
light: t.atoms.bg_contrast_600,
|
||||
dim: t.atoms.bg_contrast_500,
|
||||
dark: t.atoms.bg_contrast_600,
|
||||
}).backgroundColor
|
||||
}
|
||||
/>
|
||||
</NativeDropdown>
|
||||
</Button>
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue