acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Swap out on all settings screens

Browse Source
This commit is contained in:
Eric Bailey
2024-12-02 16:31:19 -06:00
parent 703d13e3f7
commit a00672a7c6
15 changed files with 117 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layout/index.tsx
+1 -18
View File
@@ -9,11 +9,9 @@ import Animated, {AnimatedScrollViewProps} from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {isWeb} from '#/platform/detection'
import {ViewHeader} from '#/view/com/util/ViewHeader'
import {CenteredView} from '#/view/com/util/Views'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
export * as HeaderNew from './Header'
export * as Header from '#/components/Layout/Header'
// Every screen should have a Layout component wrapping it.
// This component provides a default padding for the top of the screen.
@@ -63,21 +61,6 @@ export const Screen = React.memo(function Screen({
)
})
export const Header = React.memo(function Header(
props: React.ComponentProps<typeof ViewHeader>,
) {
const {withinScrollView} = useContext(LayoutContext)
if (!withinScrollView) {
return (
<CenteredView topBorder={false} sideBorders>
<ViewHeader showOnDesktop showBorder {...props} />
</CenteredView>
)
} else {
return <ViewHeader showOnDesktop showBorder {...props} />
}
})
export type ContentProps = AnimatedScrollViewProps & {
style?: StyleProp<ViewStyle>
contentContainerStyle?: StyleProp<ViewStyle>
src/screens/Settings/AboutSettings.tsx
+8 -1
View File
@@ -21,8 +21,15 @@ export function AboutSettingsScreen({}: Props) {
return (
<Layout.Screen>
<Layout.Header title={_(msg`About`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>About</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
<SettingsList.Container>
<SettingsList.LinkItem
to="https://bsky.social/about/support/tos"
src/screens/Settings/AccessibilitySettings.tsx
+8 -1
View File
@@ -39,8 +39,15 @@ export function AccessibilitySettingsScreen({}: Props) {
return (
<Layout.Screen>
<Layout.Header title={_(msg`Accessibility`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>Accessibility</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
<SettingsList.Container>
<SettingsList.Group contentContainerStyle={[a.gap_sm]}>
<SettingsList.ItemIcon icon={AccessibilityIcon} />
src/screens/Settings/AccountSettings.tsx
+7 -7
View File
@@ -39,14 +39,14 @@ export function AccountSettingsScreen({}: Props) {
return (
<Layout.Screen>
<Layout.Content>
<Layout.HeaderNew.Outer>
<Layout.HeaderNew.BackButton />
<Layout.HeaderNew.Content>
<Layout.HeaderNew.TitleText>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>Account</Trans>
</Layout.HeaderNew.TitleText>
</Layout.HeaderNew.Content>
</Layout.HeaderNew.Outer>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
<SettingsList.Container>
<SettingsList.Item>
src/screens/Settings/AppIconSettings.tsx
+9 -2
View File
@@ -1,7 +1,7 @@
import React from 'react'
import {Alert, View} from 'react-native'
import {Image} from 'expo-image'
import {msg} from '@lingui/macro'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import * as AppIcon from '@mozzius/expo-dynamic-app-icon'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
@@ -20,9 +20,16 @@ export function AppIconSettingsScreen({}: Props) {
return (
<Layout.Screen>
<Layout.Header title={_('App Icon')} />
<Layout.Content
contentContainerStyle={[a.py_2xl, a.px_xl, {paddingBottom: 100}]}>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>App Icon</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
<Text style={[a.text_lg, a.font_heavy]}>Defaults</Text>
<View style={[a.flex_row, a.flex_wrap]}>
{sets.defaults.map(icon => (
src/screens/Settings/AppPasswords.tsx
+8 -1
View File
@@ -44,8 +44,15 @@ export function AppPasswordsScreen({}: Props) {
return (
<Layout.Screen testID="AppPasswordsScreen">
<Layout.Header title={_(msg`App Passwords`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>App Passwords</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
{error ? (
<ErrorScreen
title={_(msg`Oops!`)}
src/screens/Settings/AppearanceSettings.tsx
+8 -1
View File
@@ -79,8 +79,15 @@ export function AppearanceSettingsScreen({}: Props) {
return (
<LayoutAnimationConfig skipExiting skipEntering>
<Layout.Screen testID="preferencesThreadsScreen">
<Layout.Header title={_(msg`Appearance`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>Appearance</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
<SettingsList.Container>
<AppearanceToggleButtonGroup
title={_(msg`Color mode`)}
src/screens/Settings/ContentAndMediaSettings.tsx
+8 -1
View File
@@ -32,8 +32,15 @@ export function ContentAndMediaSettingsScreen({}: Props) {
return (
<Layout.Screen>
<Layout.Header title={_(msg`Content and Media`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>Content & Media</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
<SettingsList.Container>
<SettingsList.LinkItem
to="/settings/saved-feeds"
src/screens/Settings/ExternalMediaPreferences.tsx
+9 -4
View File
@@ -1,7 +1,6 @@
import {Fragment} from 'react'
import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/macro'
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
import {
@@ -23,11 +22,17 @@ type Props = NativeStackScreenProps<
'PreferencesExternalEmbeds'
>
export function ExternalMediaPreferencesScreen({}: Props) {
const {_} = useLingui()
return (
<Layout.Screen testID="externalMediaPreferencesScreen">
<Layout.Header title={_(msg`External Media Preferences`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>External Media Preferences</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
<SettingsList.Container>
<SettingsList.Item>
<Admonition type="info" style={[a.flex_1]}>
src/screens/Settings/FollowingFeedPreferences.tsx
+8 -1
View File
@@ -46,8 +46,15 @@ export function FollowingFeedPreferencesScreen({}: Props) {
return (
<Layout.Screen testID="followingFeedPreferencesScreen">
<Layout.Header title={_(msg`Following Feed Preferences`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>Following Feed Preferences</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
<SettingsList.Container>
<SettingsList.Item>
<Admonition type="tip" style={[a.flex_1]}>
src/screens/Settings/LanguageSettings.tsx
+8 -1
View File
@@ -64,8 +64,15 @@ export function LanguageSettingsScreen({}: Props) {
return (
<Layout.Screen testID="PreferencesLanguagesScreen">
<Layout.Header title={_(msg`Languages`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>Languages</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
<SettingsList.Container>
<SettingsList.Group iconInset={false}>
<SettingsList.ItemText>
src/screens/Settings/NotificationSettings.tsx
+8 -1
View File
@@ -33,8 +33,15 @@ export function NotificationSettingsScreen({}: Props) {
return (
<Layout.Screen>
<Layout.Header title={_(msg`Notification Settings`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>Notification Settings</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
{isQueryError ? (
<Error
title={_(msg`Oops!`)}
src/screens/Settings/PrivacyAndSecuritySettings.tsx
+8 -1
View File
@@ -29,8 +29,15 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
return (
<Layout.Screen>
<Layout.Header title={_(msg`Privacy and Security`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>Privacy and Security</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
<SettingsList.Container>
<SettingsList.Item>
<SettingsList.ItemIcon
src/screens/Settings/Settings.tsx
+9 -1
View File
@@ -73,8 +73,16 @@ export function SettingsScreen({}: Props) {
return (
<Layout.Screen>
<Layout.Header title={_(msg`Settings`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>Settings</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
</Layout.Header.Outer>
<SettingsList.Container>
<View
style={[
src/screens/Settings/ThreadPreferences.tsx
+10 -1
View File
@@ -38,8 +38,17 @@ export function ThreadPreferencesScreen({}: Props) {
return (
<Layout.Screen testID="threadPreferencesScreen">
<Layout.Header title={_(msg`Thread Preferences`)} />
<Layout.Content>
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>Thread Preferences</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
<Layout.Header.Slot />
</Layout.Header.Outer>
<SettingsList.Container>
<SettingsList.Group>
<SettingsList.ItemIcon icon={BubblesIcon} />