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>
2024-10-29 21:14:54 +00:00
parent ab492cd77a
commit c8f264b78b
59 changed files with 1811 additions and 133 deletions
@@ -0,0 +1,91 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+
+import {CommonNavigatorParams} from '#/lib/routes/types'
+import {useAppPasswordsQuery} from '#/state/queries/app-passwords'
+import * as SettingsList from '#/screens/Settings/components/SettingsList'
+import {atoms as a} from '#/alf'
+import * as Admonition from '#/components/Admonition'
+import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlashIcon} from '#/components/icons/EyeSlash'
+import {Key_Stroke2_Corner2_Rounded as KeyIcon} from '#/components/icons/Key'
+import {Verified_Stroke2_Corner2_Rounded as VerifiedIcon} from '#/components/icons/Verified'
+import * as Layout from '#/components/Layout'
+import {InlineLinkText} from '#/components/Link'
+import {Email2FAToggle} from './components/Email2FAToggle'
+import {PwiOptOut} from './components/PwiOptOut'
+
+type Props = NativeStackScreenProps<
+  CommonNavigatorParams,
+  'PrivacyAndSecuritySettings'
+>
+export function PrivacyAndSecuritySettingsScreen({}: Props) {
+  const {_} = useLingui()
+  const {data: appPasswords} = useAppPasswordsQuery()
+  return (
+    <Layout.Screen>
+      <Layout.Header title={_(msg`Privacy and Security`)} />
+      <Layout.Content>
+        <SettingsList.Container>
+          <SettingsList.Item>
+            <SettingsList.ItemIcon icon={VerifiedIcon} />
+            <SettingsList.ItemText>
+              <Trans>Two-factor authentication (2FA)</Trans>
+            </SettingsList.ItemText>
+            <Email2FAToggle />
+          </SettingsList.Item>
+          <SettingsList.LinkItem
+            to="/settings/app-passwords"
+            label={_(msg`App passwords`)}>
+            <SettingsList.ItemIcon icon={KeyIcon} />
+            <SettingsList.ItemText>
+              <Trans>App passwords</Trans>
+            </SettingsList.ItemText>
+            {appPasswords && appPasswords.length > 0 && (
+              <SettingsList.BadgeText>
+                {appPasswords.length}
+              </SettingsList.BadgeText>
+            )}
+          </SettingsList.LinkItem>
+          <SettingsList.Divider />
+          <SettingsList.Group>
+            <SettingsList.ItemIcon icon={EyeSlashIcon} />
+            <SettingsList.ItemText>
+              <Trans>Logged-out visibility</Trans>
+            </SettingsList.ItemText>
+            <PwiOptOut />
+          </SettingsList.Group>
+          <SettingsList.Item>
+            <Admonition.Outer type="tip" style={[a.flex_1]}>
+              <Admonition.Row>
+                <Admonition.Icon />
+                <View style={[a.flex_1, a.gap_sm]}>
+                  <Admonition.Text>
+                    <Trans>
+                      Note: Bluesky is an open and public network. This setting
+                      only limits the visibility of your content on the Bluesky
+                      app and website, and other apps may not respect this
+                      setting. Your content may still be shown to logged-out
+                      users by other apps and websites.
+                    </Trans>
+                  </Admonition.Text>
+                  <Admonition.Text>
+                    <InlineLinkText
+                      label={_(
+                        msg`Learn more about what is public on Bluesky.`,
+                      )}
+                      to="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy">
+                      <Trans>Learn more about what is public on Bluesky.</Trans>
+                    </InlineLinkText>
+                  </Admonition.Text>
+                </View>
+              </Admonition.Row>
+            </Admonition.Outer>
+          </SettingsList.Item>
+        </SettingsList.Container>
+      </Layout.Content>
+    </Layout.Screen>
+  )
+}