From c8f264b78b1dfb95f68bfb820bd012828cd5fddc Mon Sep 17 00:00:00 2001 From: Samuel Newman 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/components/Layout.tsx | 85 +++++++++++++++++++++++----- src/components/dialogs/BirthDateSettings.tsx | 2 +- src/components/dialogs/SwitchAccount.tsx | 2 + src/components/icons/Bubble.tsx | 4 ++ src/components/icons/Car.tsx | 5 ++ src/components/icons/CircleQuestion.tsx | 2 +- src/components/icons/CodeBrackets.tsx | 4 ++ src/components/icons/CodeLines.tsx | 5 ++ src/components/icons/Freeze.tsx | 5 ++ src/components/icons/Globe.tsx | 4 ++ src/components/icons/Haptic.tsx | 5 ++ src/components/icons/Home.tsx | 6 +- src/components/icons/Key.tsx | 5 ++ src/components/icons/Macintosh.tsx | 5 ++ src/components/icons/Newspaper.tsx | 5 ++ src/components/icons/Pencil.tsx | 4 ++ src/components/icons/Person.tsx | 4 ++ src/components/icons/RaisingHand.tsx | 6 +- src/components/icons/Wrench.tsx | 5 ++ 19 files changed, 146 insertions(+), 17 deletions(-) create mode 100644 src/components/icons/Car.tsx create mode 100644 src/components/icons/CodeLines.tsx create mode 100644 src/components/icons/Freeze.tsx create mode 100644 src/components/icons/Haptic.tsx create mode 100644 src/components/icons/Key.tsx create mode 100644 src/components/icons/Macintosh.tsx create mode 100644 src/components/icons/Newspaper.tsx create mode 100644 src/components/icons/Wrench.tsx (limited to 'src/components') diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 57e373164..ea11e2217 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -1,16 +1,22 @@ -import React from 'react' +import React, {useContext, useMemo} from 'react' import {View, ViewStyle} from 'react-native' import {StyleProp} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {ScrollView} from '#/view/com/util/Views' +import {CenteredView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' // Every screen should have a Layout component wrapping it. // This component provides a default padding for the top of the screen. // This allows certain screens to avoid the top padding if they want to. -// -// In a future PR I will add a unified header component to this file and -// things like a preconfigured scrollview. + +const LayoutContext = React.createContext({ + withinScreen: false, + topPaddingDisabled: false, + withinScrollView: false, +}) /** * Every screen should have a Layout.Screen component wrapping it. @@ -18,7 +24,7 @@ import {atoms as a} from '#/alf' * and height/minHeight */ let Screen = ({ - disableTopPadding, + disableTopPadding = false, style, ...props }: React.ComponentProps & { @@ -26,16 +32,69 @@ let Screen = ({ style?: StyleProp }): React.ReactNode => { const {top} = useSafeAreaInsets() + const context = useMemo( + () => ({ + withinScreen: true, + topPaddingDisabled: disableTopPadding, + withinScrollView: false, + }), + [disableTopPadding], + ) return ( - + + + ) } Screen = React.memo(Screen) export {Screen} + +let Header = ( + props: React.ComponentProps, +): React.ReactNode => { + const {withinScrollView} = useContext(LayoutContext) + if (!withinScrollView) { + return ( + + + + ) + } else { + return + } +} +Header = React.memo(Header) +export {Header} + +let Content = ({ + style, + contentContainerStyle, + ...props +}: React.ComponentProps & { + style?: StyleProp + contentContainerStyle?: StyleProp +}): React.ReactNode => { + const context = useContext(LayoutContext) + const newContext = useMemo( + () => ({...context, withinScrollView: true}), + [context], + ) + return ( + + + + ) +} +Content = React.memo(Content) +export {Content} diff --git a/src/components/dialogs/BirthDateSettings.tsx b/src/components/dialogs/BirthDateSettings.tsx index 81d0c6740..8f47d05b0 100644 --- a/src/components/dialogs/BirthDateSettings.tsx +++ b/src/components/dialogs/BirthDateSettings.tsx @@ -29,7 +29,7 @@ export function BirthDateSettingsDialog({ const {isLoading, error, data: preferences} = usePreferencesQuery() return ( - + diff --git a/src/components/dialogs/SwitchAccount.tsx b/src/components/dialogs/SwitchAccount.tsx index ea870e2da..daad01d2a 100644 --- a/src/components/dialogs/SwitchAccount.tsx +++ b/src/components/dialogs/SwitchAccount.tsx @@ -56,6 +56,8 @@ export function SwitchAccountDialog({ pendingDid={pendingDid} /> + + ) diff --git a/src/components/icons/Bubble.tsx b/src/components/icons/Bubble.tsx index ff6da2531..3654fcf78 100644 --- a/src/components/icons/Bubble.tsx +++ b/src/components/icons/Bubble.tsx @@ -11,3 +11,7 @@ export const Bubble_Stroke2_Corner2_Rounded = createSinglePathSVG({ export const Bubble_Stroke2_Corner3_Rounded = createSinglePathSVG({ path: 'M2.002 7a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H12.28l-4.762 2.858A1 1 0 0 1 6.002 21v-2a4 4 0 0 1-4-4V7Zm4-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h1a1 1 0 0 1 1 1v1.234l3.486-2.092a1 1 0 0 1 .514-.142h6a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-12Z', }) + +export const Bubbles_Stroke2_Corner2_Rounded = createSinglePathSVG({ + path: 'M6.002 6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-1v1a3 3 0 0 1-3 3h-4.24l-4.274 2.374a1 1 0 0 1-1.486-.874V19a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3h1V6Zm-1 3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h1a1 1 0 0 1 1 1v.8l3.015-1.674a1 1 0 0 1 .485-.126h4.5a1 1 0 0 0 1-1v-1.933a1 1 0 0 1 0-.134V10a1 1 0 0 0-1-1h-10Zm13 4v-3a3 3 0 0 0-3-3h-7V6a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-1Z', +}) diff --git a/src/components/icons/Car.tsx b/src/components/icons/Car.tsx new file mode 100644 index 000000000..25859176a --- /dev/null +++ b/src/components/icons/Car.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Car_Stroke2_Corner2_Rounded = createSinglePathSVG({ + path: 'M7.018 6a1 1 0 0 0-.808.412L5.4 5.824l.809.588L3 10.825V17a1 1 0 1 0 2 0 1 1 0 0 1 1-1h12a1 1 0 0 1 1 1 1 1 0 1 0 2 0v-5.998l-3.22-4.577A1 1 0 0 0 16.962 6H7.018ZM23 11.686V17a3 3 0 0 1-5.83 1H6.83A3.001 3.001 0 0 1 1 17v-5.5a1 1 0 1 1 0-2h.49l3.102-4.265A3 3 0 0 1 7.018 4h9.944a3 3 0 0 1 2.453 1.274l3.104 4.412H23a1 1 0 1 1 0 2ZM5 13a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm10 0a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z', +}) diff --git a/src/components/icons/CircleQuestion.tsx b/src/components/icons/CircleQuestion.tsx index 4eb369379..6242a2b51 100644 --- a/src/components/icons/CircleQuestion.tsx +++ b/src/components/icons/CircleQuestion.tsx @@ -1,5 +1,5 @@ import {createSinglePathSVG} from './TEMPLATE' export const CircleQuestion_Stroke2_Corner2_Rounded = createSinglePathSVG({ - path: 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z" clip-rule="evenodd"/>