about summary refs log tree commit diff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/view/screens/AccessibilitySettings.tsx4
-rw-r--r--src/view/screens/PreferencesExternalEmbeds.tsx33
-rw-r--r--src/view/screens/PreferencesFollowingFeed.tsx93
-rw-r--r--src/view/screens/PreferencesThreads.tsx108
4 files changed, 90 insertions, 148 deletions
diff --git a/src/view/screens/AccessibilitySettings.tsx b/src/view/screens/AccessibilitySettings.tsx
index 9ac979336..abe155076 100644
--- a/src/view/screens/AccessibilitySettings.tsx
+++ b/src/view/screens/AccessibilitySettings.tsx
@@ -36,7 +36,7 @@ export function AccessibilitySettingsScreen({}: Props) {
   const pal = usePalette('default')
   const setMinimalShellMode = useSetMinimalShellMode()
   const {screen} = useAnalytics()
-  const {isMobile} = useWebMediaQueries()
+  const {isMobile, isTabletOrMobile} = useWebMediaQueries()
   const {_} = useLingui()
 
   const requireAltTextEnabled = useRequireAltTextEnabled()
@@ -58,7 +58,7 @@ export function AccessibilitySettingsScreen({}: Props) {
   return (
     <View style={s.hContentRegion} testID="accessibilitySettingsScreen">
       <SimpleViewHeader
-        showBackButton={isMobile}
+        showBackButton={isTabletOrMobile}
         style={[
           pal.border,
           {borderBottomWidth: 1},
diff --git a/src/view/screens/PreferencesExternalEmbeds.tsx b/src/view/screens/PreferencesExternalEmbeds.tsx
index 5eec7e507..57ca5e765 100644
--- a/src/view/screens/PreferencesExternalEmbeds.tsx
+++ b/src/view/screens/PreferencesExternalEmbeds.tsx
@@ -30,7 +30,7 @@ export function PreferencesExternalEmbeds({}: Props) {
   const pal = usePalette('default')
   const setMinimalShellMode = useSetMinimalShellMode()
   const {screen} = useAnalytics()
-  const {isMobile} = useWebMediaQueries()
+  const {isTabletOrMobile} = useWebMediaQueries()
 
   useFocusEffect(
     React.useCallback(() => {
@@ -41,26 +41,23 @@ export function PreferencesExternalEmbeds({}: Props) {
 
   return (
     <View style={s.hContentRegion} testID="preferencesExternalEmbedsScreen">
-      <SimpleViewHeader
-        showBackButton={isMobile}
-        style={[
-          pal.border,
-          {borderBottomWidth: 1},
-          !isMobile && {borderLeftWidth: 1, borderRightWidth: 1},
-        ]}>
-        <View style={{flex: 1}}>
-          <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
-            <Trans>External Media Preferences</Trans>
-          </Text>
-          <Text style={pal.textLight}>
-            <Trans>Customize media from external sites.</Trans>
-          </Text>
-        </View>
-      </SimpleViewHeader>
       <ScrollView
         // @ts-ignore web only -prf
         dataSet={{'stable-gutters': 1}}
-        contentContainerStyle={[pal.viewLight, {paddingBottom: 200}]}>
+        contentContainerStyle={[pal.viewLight, {paddingBottom: 75}]}>
+        <SimpleViewHeader
+          showBackButton={isTabletOrMobile}
+          style={[pal.border, {borderBottomWidth: 1}]}>
+          <View style={{flex: 1}}>
+            <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
+              <Trans>External Media Preferences</Trans>
+            </Text>
+            <Text style={pal.textLight}>
+              <Trans>Customize media from external sites.</Trans>
+            </Text>
+          </View>
+        </SimpleViewHeader>
+
         <View style={[pal.view]}>
           <View style={styles.infoCard}>
             <Text style={pal.text}>
diff --git a/src/view/screens/PreferencesFollowingFeed.tsx b/src/view/screens/PreferencesFollowingFeed.tsx
index b427a0f2b..879c925fb 100644
--- a/src/view/screens/PreferencesFollowingFeed.tsx
+++ b/src/view/screens/PreferencesFollowingFeed.tsx
@@ -1,24 +1,24 @@
 import React, {useState} from 'react'
-import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {Slider} from '@miblanchard/react-native-slider'
 import debounce from 'lodash.debounce'
 
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {colors, s} from '#/lib/styles'
+import {isWeb} from '#/platform/detection'
 import {
   usePreferencesQuery,
   useSetFeedViewPreferencesMutation,
 } from '#/state/queries/preferences'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {colors, s} from 'lib/styles'
-import {isWeb} from 'platform/detection'
-import {ToggleButton} from 'view/com/util/forms/ToggleButton'
-import {ViewHeader} from 'view/com/util/ViewHeader'
-import {CenteredView} from 'view/com/util/Views'
-import {Text} from '../com/util/text/Text'
+import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
+import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
+import {Text} from '#/view/com/util/text/Text'
+import {ScrollView} from '#/view/com/util/Views'
 
 function RepliesThresholdInput({
   enabled,
@@ -79,10 +79,10 @@ type Props = NativeStackScreenProps<
   CommonNavigatorParams,
   'PreferencesFollowingFeed'
 >
-export function PreferencesFollowingFeed({navigation}: Props) {
+export function PreferencesFollowingFeed({}: Props) {
   const pal = usePalette('default')
   const {_} = useLingui()
-  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {isTabletOrMobile} = useWebMediaQueries()
   const {data: preferences} = usePreferencesQuery()
   const {mutate: setFeedViewPref, variables} =
     useSetFeedViewPreferencesMutation()
@@ -92,26 +92,25 @@ export function PreferencesFollowingFeed({navigation}: Props) {
   )
 
   return (
-    <CenteredView
-      testID="preferencesHomeFeedScreen"
-      style={[
-        pal.view,
-        pal.border,
-        styles.container,
-        isTabletOrDesktop && styles.desktopContainer,
-      ]}>
-      <ViewHeader title={_(msg`Following Feed Preferences`)} showOnDesktop />
-      <View
-        style={[
-          styles.titleSection,
-          isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20},
-        ]}>
-        <Text type="xl" style={[pal.textLight, styles.description]}>
-          <Trans>Fine-tune the content you see on your Following feed.</Trans>
-        </Text>
-      </View>
-
-      <ScrollView>
+    <View testID="preferencesHomeFeedScreen" style={s.hContentRegion}>
+      <ScrollView
+        // @ts-ignore web only -sfn
+        dataSet={{'stable-gutters': 1}}
+        contentContainerStyle={{paddingBottom: 75}}>
+        <SimpleViewHeader
+          showBackButton={isTabletOrMobile}
+          style={[pal.border, {borderBottomWidth: 1}]}>
+          <View style={{flex: 1}}>
+            <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
+              <Trans>Following Feed Preferences</Trans>
+            </Text>
+            <Text style={pal.textLight}>
+              <Trans>
+                Fine-tune the content you see on your Following feed.
+              </Trans>
+            </Text>
+          </View>
+        </SimpleViewHeader>
         <View style={styles.cardsContainer}>
           <View style={[pal.viewLight, styles.card]}>
             <Text type="title-sm" style={[pal.text, s.pb5]}>
@@ -253,7 +252,7 @@ export function PreferencesFollowingFeed({navigation}: Props) {
 
           <View style={[pal.viewLight, styles.card]}>
             <Text type="title-sm" style={[pal.text, s.pb5]}>
-              <FontAwesomeIcon icon="flask" color={pal.colors.text} />
+              <FontAwesomeIcon icon="flask" color={pal.colors.text} />{' '}
               <Trans>Show Posts from My Feeds</Trans>
             </Text>
             <Text style={[pal.text, s.pb10]}>
@@ -288,42 +287,17 @@ export function PreferencesFollowingFeed({navigation}: Props) {
           </View>
         </View>
       </ScrollView>
-
-      <View
-        style={[
-          styles.btnContainer,
-          !isTabletOrDesktop && {borderTopWidth: 1, paddingHorizontal: 20},
-          pal.border,
-        ]}>
-        <TouchableOpacity
-          testID="confirmBtn"
-          onPress={() => {
-            navigation.canGoBack()
-              ? navigation.goBack()
-              : navigation.navigate('Settings')
-          }}
-          style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Confirm`)}
-          accessibilityHint="">
-          <Text style={[s.white, s.bold, s.f18]}>
-            <Trans>Done</Trans>
-          </Text>
-        </TouchableOpacity>
-      </View>
-    </CenteredView>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingBottom: 90,
   },
   desktopContainer: {
     borderLeftWidth: 1,
     borderRightWidth: 1,
-    paddingBottom: 40,
   },
   titleSection: {
     paddingBottom: 30,
@@ -338,6 +312,7 @@ const styles = StyleSheet.create({
   },
   cardsContainer: {
     paddingHorizontal: 20,
+    paddingVertical: 16,
   },
   card: {
     padding: 16,
diff --git a/src/view/screens/PreferencesThreads.tsx b/src/view/screens/PreferencesThreads.tsx
index 321c67293..3b09f0abb 100644
--- a/src/view/screens/PreferencesThreads.tsx
+++ b/src/view/screens/PreferencesThreads.tsx
@@ -1,33 +1,29 @@
 import React from 'react'
-import {
-  ActivityIndicator,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
+import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Text} from '../com/util/text/Text'
-import {s, colors} from 'lib/styles'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {ToggleButton} from 'view/com/util/forms/ToggleButton'
-import {RadioGroup} from 'view/com/util/forms/RadioGroup'
-import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {ViewHeader} from 'view/com/util/ViewHeader'
-import {CenteredView} from 'view/com/util/Views'
-import {Trans, msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {colors, s} from '#/lib/styles'
 import {
   usePreferencesQuery,
   useSetThreadViewPreferencesMutation,
 } from '#/state/queries/preferences'
+import {RadioGroup} from '#/view/com/util/forms/RadioGroup'
+import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
+import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
+import {Text} from '#/view/com/util/text/Text'
+import {ScrollView} from '#/view/com/util/Views'
+import {atoms as a} from '#/alf'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'>
-export function PreferencesThreads({navigation}: Props) {
+export function PreferencesThreads({}: Props) {
   const pal = usePalette('default')
   const {_} = useLingui()
-  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {isTabletOrMobile} = useWebMediaQueries()
   const {data: preferences} = usePreferencesQuery()
   const {mutate: setThreadViewPrefs, variables} =
     useSetThreadViewPreferencesMutation()
@@ -42,27 +38,25 @@ export function PreferencesThreads({navigation}: Props) {
   )
 
   return (
-    <CenteredView
-      testID="preferencesThreadsScreen"
-      style={[
-        pal.view,
-        pal.border,
-        styles.container,
-        isTabletOrDesktop && styles.desktopContainer,
-      ]}>
-      <ViewHeader title={_(msg`Thread Preferences`)} showOnDesktop />
-      <View
-        style={[
-          styles.titleSection,
-          isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20},
-        ]}>
-        <Text type="xl" style={[pal.textLight, styles.description]}>
-          <Trans>Fine-tune the discussion threads.</Trans>
-        </Text>
-      </View>
+    <View testID="preferencesThreadsScreen" style={s.hContentRegion}>
+      <ScrollView
+        // @ts-ignore web only -prf
+        dataSet={{'stable-gutters': 1}}
+        contentContainerStyle={{paddingBottom: 75}}>
+        <SimpleViewHeader
+          showBackButton={isTabletOrMobile}
+          style={[pal.border, {borderBottomWidth: 1}]}>
+          <View style={{flex: 1}}>
+            <Text type="title-lg" style={[pal.text, {fontWeight: 'bold'}]}>
+              <Trans>Thread Preferences</Trans>
+            </Text>
+            <Text style={pal.textLight}>
+              <Trans>Fine-tune the discussion threads.</Trans>
+            </Text>
+          </View>
+        </SimpleViewHeader>
 
-      {preferences ? (
-        <ScrollView>
+        {preferences ? (
           <View style={styles.cardsContainer}>
             <View style={[pal.viewLight, styles.card]}>
               <Text type="title-sm" style={[pal.text, s.pb5]}>
@@ -136,46 +130,21 @@ export function PreferencesThreads({navigation}: Props) {
               />
             </View>
           </View>
-        </ScrollView>
-      ) : (
-        <ActivityIndicator />
-      )}
-
-      <View
-        style={[
-          styles.btnContainer,
-          !isTabletOrDesktop && {borderTopWidth: 1, paddingHorizontal: 20},
-          pal.border,
-        ]}>
-        <TouchableOpacity
-          testID="confirmBtn"
-          onPress={() => {
-            navigation.canGoBack()
-              ? navigation.goBack()
-              : navigation.navigate('Settings')
-          }}
-          style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Confirm`)}
-          accessibilityHint="">
-          <Text style={[s.white, s.bold, s.f18]}>
-            <Trans context="action">Done</Trans>
-          </Text>
-        </TouchableOpacity>
-      </View>
-    </CenteredView>
+        ) : (
+          <ActivityIndicator style={a.flex_1} />
+        )}
+      </ScrollView>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingBottom: 90,
   },
   desktopContainer: {
     borderLeftWidth: 1,
     borderRightWidth: 1,
-    paddingBottom: 40,
   },
   titleSection: {
     paddingBottom: 30,
@@ -190,6 +159,7 @@ const styles = StyleSheet.create({
   },
   cardsContainer: {
     paddingHorizontal: 20,
+    paddingVertical: 16,
   },
   card: {
     padding: 16,
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-11 21:38:21 +0000