From c8f264b78b1dfb95f68bfb820bd012828cd5fddc Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 29 Oct 2024 21:14:54 +0000
Subject: Settings revamp (#5745)

* start building storybook

* add title

* add some styles

* try out new icons

* more settings list component parts

* make text do the spacing

* clean up storybook

* gated new settings screen

* switch account

* add current profile

* use Layout.Screen

* Layout.Header and Layout.Content

* translate helpdesk text

thanks @surfdude29!

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* add account settings

* undo changes to export car dialog

* privacy and security screen

* Translate protect account stuff

Thanks @surfdude29!

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* content and media settings

* about settings

* 2fa copy

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* a11y and appearance

* use new components for appearance settings

* redesign accessibility settings

* Update ContentAndMediaSettings.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* add divider

* remove a11y and appearance middleman screen

* fix web settingslist styles

* new SettingsList.Group component

* explain how portal magic works

* hide pwioptout in old location

* Update Settings.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* replace gate with `IS_INTERNAL`

* add IS_INTERNAL to app-info.web

* fix profile area growing

* add close button to switch account

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
---
 src/screens/Settings/AppearanceSettings.tsx | 165 +++++++++++++---------------
 1 file changed, 76 insertions(+), 89 deletions(-)

(limited to 'src/screens/Settings/AppearanceSettings.tsx')

diff --git a/src/screens/Settings/AppearanceSettings.tsx b/src/screens/Settings/AppearanceSettings.tsx
index c317c930f..d0beb7d50 100644
--- a/src/screens/Settings/AppearanceSettings.tsx
+++ b/src/screens/Settings/AppearanceSettings.tsx
@@ -1,18 +1,15 @@
 import React, {useCallback} from 'react'
-import {View} from 'react-native'
 import Animated, {
-  FadeInDown,
-  FadeOutDown,
+  FadeInUp,
+  FadeOutUp,
   LayoutAnimationConfig,
+  LinearTransition,
 } from 'react-native-reanimated'
-import {msg, Trans} from '@lingui/macro'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {useSetThemePrefs, useThemePrefs} from '#/state/shell'
-import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
-import {ScrollView} from '#/view/com/util/Views'
 import {atoms as a, native, useAlf, useTheme} from '#/alf'
 import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Props as SVGIconProps} from '#/components/icons/common'
@@ -22,12 +19,11 @@ import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/T
 import {TitleCase_Stroke2_Corner0_Rounded as Aa} from '#/components/icons/TitleCase'
 import * as Layout from '#/components/Layout'
 import {Text} from '#/components/Typography'
+import * as SettingsList from './components/SettingsList'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppearanceSettings'>
 export function AppearanceSettingsScreen({}: Props) {
-  const t = useTheme()
   const {_} = useLingui()
-  const {isTabletOrMobile} = useWebMediaQueries()
   const {fonts} = useAlf()
 
   const {colorMode, darkTheme} = useThemePrefs()
@@ -77,66 +73,54 @@ export function AppearanceSettingsScreen({}: Props) {
   return (
     <LayoutAnimationConfig skipExiting skipEntering>
       <Layout.Screen testID="preferencesThreadsScreen">
-        <ScrollView
-          // @ts-ignore web only -prf
-          dataSet={{'stable-gutters': 1}}
-          contentContainerStyle={{paddingBottom: 75}}>
-          <SimpleViewHeader
-            showBackButton={isTabletOrMobile}
-            style={[t.atoms.border_contrast_medium, a.border_b]}>
-            <View style={a.flex_1}>
-              <Text style={[a.text_2xl, a.font_bold]}>
-                <Trans>Appearance</Trans>
-              </Text>
-            </View>
-          </SimpleViewHeader>
-
-          <View style={[a.gap_3xl, a.pt_xl, a.px_xl]}>
-            <View style={[a.gap_lg]}>
-              <AppearanceToggleButtonGroup
-                title={_(msg`Color mode`)}
-                icon={PhoneIcon}
-                items={[
-                  {
-                    label: _(msg`System`),
-                    name: 'system',
-                  },
-                  {
-                    label: _(msg`Light`),
-                    name: 'light',
-                  },
-                  {
-                    label: _(msg`Dark`),
-                    name: 'dark',
-                  },
-                ]}
-                values={[colorMode]}
-                onChange={onChangeAppearance}
-              />
+        <Layout.Header title={_(msg`Appearance`)} />
+        <Layout.Content>
+          <SettingsList.Container>
+            <AppearanceToggleButtonGroup
+              title={_(msg`Color mode`)}
+              icon={PhoneIcon}
+              items={[
+                {
+                  label: _(msg`System`),
+                  name: 'system',
+                },
+                {
+                  label: _(msg`Light`),
+                  name: 'light',
+                },
+                {
+                  label: _(msg`Dark`),
+                  name: 'dark',
+                },
+              ]}
+              values={[colorMode]}
+              onChange={onChangeAppearance}
+            />
 
-              {colorMode !== 'light' && (
-                <Animated.View
-                  entering={native(FadeInDown)}
-                  exiting={native(FadeOutDown)}>
-                  <AppearanceToggleButtonGroup
-                    title={_(msg`Dark theme`)}
-                    icon={MoonIcon}
-                    items={[
-                      {
-                        label: _(msg`Dim`),
-                        name: 'dim',
-                      },
-                      {
-                        label: _(msg`Dark`),
-                        name: 'dark',
-                      },
-                    ]}
-                    values={[darkTheme ?? 'dim']}
-                    onChange={onChangeDarkTheme}
-                  />
-                </Animated.View>
-              )}
+            {colorMode !== 'light' && (
+              <Animated.View
+                entering={native(FadeInUp)}
+                exiting={native(FadeOutUp)}>
+                <AppearanceToggleButtonGroup
+                  title={_(msg`Dark theme`)}
+                  icon={MoonIcon}
+                  items={[
+                    {
+                      label: _(msg`Dim`),
+                      name: 'dim',
+                    },
+                    {
+                      label: _(msg`Dark`),
+                      name: 'dark',
+                    },
+                  ]}
+                  values={[darkTheme ?? 'dim']}
+                  onChange={onChangeDarkTheme}
+                />
+              </Animated.View>
+            )}
 
+            <Animated.View layout={native(LinearTransition)}>
               <AppearanceToggleButtonGroup
                 title={_(msg`Font`)}
                 description={_(
@@ -177,9 +161,9 @@ export function AppearanceSettingsScreen({}: Props) {
                 values={[fonts.scale]}
                 onChange={onChangeFontScale}
               />
-            </View>
-          </View>
-        </ScrollView>
+            </Animated.View>
+          </SettingsList.Container>
+        </Layout.Content>
       </Layout.Screen>
     </LayoutAnimationConfig>
   )
@@ -205,29 +189,32 @@ export function AppearanceToggleButtonGroup({
 }) {
   const t = useTheme()
   return (
-    <View style={[a.gap_sm]}>
-      <View style={[a.gap_xs]}>
-        <View style={[a.flex_row, a.align_center, a.gap_md]}>
-          <Icon style={t.atoms.text} />
-          <Text style={[a.text_md, a.font_bold]}>{title}</Text>
-        </View>
+    <>
+      <SettingsList.Group contentContainerStyle={[a.gap_sm]} iconInset={false}>
+        <SettingsList.ItemIcon icon={Icon} />
+        <SettingsList.ItemText>{title}</SettingsList.ItemText>
         {description && (
           <Text
-            style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
+            style={[
+              a.text_sm,
+              a.leading_snug,
+              t.atoms.text_contrast_medium,
+              a.w_full,
+            ]}>
             {description}
           </Text>
         )}
-      </View>
-      <ToggleButton.Group label={title} values={values} onChange={onChange}>
-        {items.map(item => (
-          <ToggleButton.Button
-            key={item.name}
-            label={item.label}
-            name={item.name}>
-            <ToggleButton.ButtonText>{item.label}</ToggleButton.ButtonText>
-          </ToggleButton.Button>
-        ))}
-      </ToggleButton.Group>
-    </View>
+        <ToggleButton.Group label={title} values={values} onChange={onChange}>
+          {items.map(item => (
+            <ToggleButton.Button
+              key={item.name}
+              label={item.label}
+              name={item.name}>
+              <ToggleButton.ButtonText>{item.label}</ToggleButton.ButtonText>
+            </ToggleButton.Button>
+          ))}
+        </ToggleButton.Group>
+      </SettingsList.Group>
+    </>
   )
 }
-- 
cgit 1.4.1