patch of change color scheme settings into toggle group list · round #0 · pull #8 · jollywhoppers.com/witchsky.app

+42 -33
src/screens/Settings/AppearanceSettings.tsx
···

       1
       1
        
       import {useCallback} from 'react'

     

       2
       2
       +
       import {View} from 'react-native'

     

       2
       3
        
       import Animated, {

     

       3
       4
        
         FadeInUp,

     

       4
       5
        
         FadeOutUp,

     
···

       17
       18
        
       import {SettingsListItem as AppIconSettingsListItem} from '#/screens/Settings/AppIconSettings/SettingsListItem'

     

       18
       19
        
       import {type Alf, atoms as a, native, useAlf, useTheme} from '#/alf'

     

       19
       20
        
       import * as SegmentedControl from '#/components/forms/SegmentedControl'

     

       21
       21
       +
       import * as Toggle from '#/components/forms/Toggle'

     

       20
       22
        
       import {type Props as SVGIconProps} from '#/components/icons/common'

     

       21
       23
        
       import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'

     

       22
       24
        
       import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone'

     
···

       32
       34
        
       export function AppearanceSettingsScreen({}: Props) {

     

       33
       35
        
         const {_} = useLingui()

     

       34
       36
        
         const {fonts} = useAlf()

     

       37
       37
       +
         const t = useTheme()

     

       35
       38
        
       

     

       36
       39
        
         const {colorMode, colorScheme, darkTheme} = useThemePrefs()

     

       37
       40
        
         const {setColorMode, setColorScheme, setDarkTheme} = useSetThemePrefs()

     
···

       79
       82
        
           [fonts],

     

       80
       83
        
         )

     

       81
       84
        
       

     

       85
       85
       +
         const colorSchemes = [

     

       86
       86
       +
           {name: 'witchsky', label: _(msg`Witchsky`)},

     

       87
       87
       +
           {name: 'bluesky', label: _(msg`Bluesky`)},

     

       88
       88
       +
           {name: 'blacksky', label: _(msg`Blacksky`)},

     

       89
       89
       +
           {name: 'deer', label: _(msg`Deer`)},

     

       90
       90
       +
           {name: 'zeppelin', label: _(msg`Zeppelin`)},

     

       91
       91
       +
           {name: 'kitty', label: _(msg`Kitty`)},

     

       92
       92
       +
         ]

     

       93
       93
       +
       

     

       82
       94
        
         return (

     

       83
       95
        
           <LayoutAnimationConfig skipExiting skipEntering>

     

       84
       96
        
             <Layout.Screen testID="preferencesThreadsScreen">

     
···

       114
       126
        
                     onChange={onChangeAppearance}

     

       115
       127
        
                   />

     

       116
       128
        
       

     

       117
       117
       -
                   <AppearanceToggleButtonGroup

     

       118
       118
       -
                     title={_(msg`Color scheme`)}

     

       119
       119
       -
                     icon={PizzaIcon}

     

       120
       120
       -
                     items={[

     

       121
       121
       -
                       {

     

       122
       122
       -
                         label: _(msg`Witchsky`),

     

       123
       123
       -
                         name: 'witchsky',

     

       124
       124
       -
                       },

     

       125
       125
       -
                       {

     

       126
       126
       -
                         label: _(msg`Bluesky`),

     

       127
       127
       -
                         name: 'bluesky',

     

       128
       128
       -
                       },

     

       129
       129
       -
                       {

     

       130
       130
       -
                         label: _(msg`Blacksky`),

     

       131
       131
       -
                         name: 'blacksky',

     

       132
       132
       -
                       },

     

       133
       133
       -
                       {

     

       134
       134
       -
                         label: _(msg`Deer`),

     

       135
       135
       -
                         name: 'deer',

     

       136
       136
       -
                       },

     

       137
       137
       -
                       {

     

       138
       138
       -
                         label: _(msg`Zeppelin`),

     

       139
       139
       -
                         name: 'zeppelin',

     

       140
       140
       -
                       },

     

       141
       141
       -
                       {

     

       142
       142
       -
                         label: _(msg`Kitty`),

     

       143
       143
       -
                         name: 'kitty',

     

       144
       144
       -
                       },

     

       145
       145
       -
                     ]}

     

       146
       146
       -
                     value={colorScheme}

     

       147
       147
       -
                     onChange={onChangeScheme}

     

       148
       148
       -
                   />

     

       149
       149
       -
       

     

       150
       129
        
                   {colorMode !== 'light' && (

     

       151
       130
        
                     <Animated.View

     

       152
       131
        
                       entering={native(FadeInUp)}

     
···

       170
       149
        
                     </Animated.View>

     

       171
       150
        
                   )}

     

       172
       151
        
       

     

       152
       152
       +
                   <SettingsList.Group>

     

       153
       153
       +
                     <SettingsList.ItemIcon icon={PizzaIcon} />

     

       154
       154
       +
                     <SettingsList.ItemText>

     

       155
       155
       +
                       <Trans>Color Theme</Trans>

     

       156
       156
       +
                     </SettingsList.ItemText>

     

       157
       157
       +
                     <View style={[a.w_full, a.gap_md]}>

     

       158
       158
       +
                       <Text style={[a.flex_1, t.atoms.text_contrast_medium]}>

     

       159
       159
       +
                         <Trans>Choose which color scheme to use:</Trans>

     

       160
       160
       +
                       </Text>

     

       161
       161
       +
                       <Toggle.Group

     

       162
       162
       +
                         label={_(msg`Color Theme`)}

     

       163
       163
       +
                         type="radio"

     

       164
       164
       +
                         values={[colorScheme]}

     

       165
       165
       +
                         onChange={([value]) =>

     

       166
       166
       +
                           onChangeScheme(value as typeof colorScheme)

     

       167
       167
       +
                         }>

     

       168
       168
       +
                         <View style={[a.gap_sm, a.flex_1]}>

     

       169
       169
       +
                           {colorSchemes.map(({name, label}) => (

     

       170
       170
       +
                             <Toggle.Item key={name} name={name} label={label}>

     

       171
       171
       +
                               <Toggle.Radio />

     

       172
       172
       +
                               <Toggle.LabelText>

     

       173
       173
       +
                                 <Trans>{label}</Trans>

     

       174
       174
       +
                               </Toggle.LabelText>

     

       175
       175
       +
                             </Toggle.Item>

     

       176
       176
       +
                           ))}

     

       177
       177
       +
                         </View>

     

       178
       178
       +
                       </Toggle.Group>

     

       179
       179
       +
                     </View>

     

       180
       180
       +
                   </SettingsList.Group>

     

       181
       181
       +
       

     

       173
       182
        
                   <Animated.View layout={native(LinearTransition)}>

     

       174
       183
        
                     <SettingsList.Divider />

     

       175
       184