Tweak avi follow button styles (#4304)

* Tighten up

* Tweak colors

* Tweak for night mode

* Add missing file

* Contrast plus

src/alf/index.tsx

@@ -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
 

src/alf/themes.ts

@@ -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,

src/alf/util/themeSelector.ts

@@ -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}`)
+  }
+}

src/view/com/posts/AviFollowButton.tsx

@@ -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,
+              bottom: 0,
-              right: -2,
+              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>
       )}