about summary refs log tree commit diff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/view/com/modals/PreferencesHomeFeed.tsx119
-rw-r--r--src/view/screens/Settings.tsx2
2 files changed, 69 insertions, 52 deletions
diff --git a/src/view/com/modals/PreferencesHomeFeed.tsx b/src/view/com/modals/PreferencesHomeFeed.tsx
index 0950b6366..32620b3aa 100644
--- a/src/view/com/modals/PreferencesHomeFeed.tsx
+++ b/src/view/com/modals/PreferencesHomeFeed.tsx
@@ -23,10 +23,12 @@ function RepliesThresholdInput({enabled}: {enabled: boolean}) {
         marginTop: 10,
         opacity: enabled ? 1 : 0.3,
       }}>
-      <Text>
+      <Text type="xs">
         {value === 0
           ? `Show all replies`
-          : `Show replies with greater than ${value} likes`}
+          : `Show replies with greater than ${value} ${
+              value > 1 ? `likes` : `like`
+            }`}
       </Text>
       <Slider
         value={value}
@@ -53,55 +55,67 @@ export const Component = observer(function Component() {
     <View
       testID="preferencesHomeFeedModal"
       style={[pal.view, styles.container]}>
-      <Text type="title-lg" style={[pal.text, styles.title]}>
-        Home Feed Preferences
-      </Text>
+      <View style={{padding: 20, paddingBottom: 30}}>
+        <Text type="title-lg" style={[pal.text, styles.title]}>
+          Home Feed Preferences
+        </Text>
+        <Text type="xl" style={[pal.textLight, styles.description]}>
+          Fine-tune the content you see on your home screen.
+        </Text>
+      </View>
 
       <ScrollView>
-        <View style={[styles.card]}>
-          <Text type="title-sm" style={[s.pb5]}>
-            Show Replies
-          </Text>
-          <Text style={[s.pb10]}>
-            Replies are shown in your home feed by default. If this setting is
-            disabled, you'll see only new posts and threads.
-          </Text>
-          <ToggleButton
-            type="default-light"
-            label={store.preferences.homeFeedRepliesEnabled ? 'Yes' : 'No'}
-            isSelected={store.preferences.homeFeedRepliesEnabled}
-            onPress={store.preferences.toggleHomeFeedRepliesEnabled}
-          />
+        <View style={{paddingHorizontal: 20}}>
+          <View style={[styles.card]}>
+            <Text type="title-sm" style={[s.pb5]}>
+              Show Replies
+            </Text>
+            <Text style={[s.pb10]}>
+              Adjust the number of likes a reply must have to be shown in your
+              feed.
+            </Text>
+            <ToggleButton
+              type="default-light"
+              label={store.preferences.homeFeedRepliesEnabled ? 'Yes' : 'No'}
+              isSelected={store.preferences.homeFeedRepliesEnabled}
+              onPress={store.preferences.toggleHomeFeedRepliesEnabled}
+            />
 
-          <RepliesThresholdInput
-            enabled={store.preferences.homeFeedRepliesEnabled}
-          />
-        </View>
+            <RepliesThresholdInput
+              enabled={store.preferences.homeFeedRepliesEnabled}
+            />
+          </View>
 
-        <View style={[styles.card]}>
-          <Text type="title-sm" style={[s.pb5]}>
-            Show Reposts
-          </Text>
-          <Text style={[s.pb10]}>Description</Text>
-          <ToggleButton
-            type="default-light"
-            label={store.preferences.homeFeedRepostsEnabled ? 'Yes' : 'No'}
-            isSelected={store.preferences.homeFeedRepostsEnabled}
-            onPress={store.preferences.toggleHomeFeedRepostsEnabled}
-          />
-        </View>
+          <View style={[styles.card]}>
+            <Text type="title-sm" style={[s.pb5]}>
+              Show Reposts
+            </Text>
+            <Text style={[s.pb10]}>
+              Disable this setting to hide all reposts from your feed.
+            </Text>
+            <ToggleButton
+              type="default-light"
+              label={store.preferences.homeFeedRepostsEnabled ? 'Yes' : 'No'}
+              isSelected={store.preferences.homeFeedRepostsEnabled}
+              onPress={store.preferences.toggleHomeFeedRepostsEnabled}
+            />
+          </View>
 
-        <View style={[styles.card]}>
-          <Text type="title-sm" style={[s.pb5]}>
-            Show Quote Posts
-          </Text>
-          <Text style={[s.pb10]}>Description</Text>
-          <ToggleButton
-            type="default-light"
-            label={store.preferences.homeFeedQuotePostsEnabled ? 'Yes' : 'No'}
-            isSelected={store.preferences.homeFeedQuotePostsEnabled}
-            onPress={store.preferences.toggleHomeFeedQuotePostsEnabled}
-          />
+          <View style={[styles.card]}>
+            <Text type="title-sm" style={[s.pb5]}>
+              Show Quote Posts
+            </Text>
+            <Text style={[s.pb10]}>
+              Disable this setting to hide all quote posts from your feed.
+              Reposts will still be visible.
+            </Text>
+            <ToggleButton
+              type="default-light"
+              label={store.preferences.homeFeedQuotePostsEnabled ? 'Yes' : 'No'}
+              isSelected={store.preferences.homeFeedQuotePostsEnabled}
+              onPress={store.preferences.toggleHomeFeedQuotePostsEnabled}
+            />
+          </View>
         </View>
       </ScrollView>
 
@@ -125,15 +139,18 @@ export const Component = observer(function Component() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 20,
     paddingBottom: isDesktopWeb ? 0 : 60,
   },
   title: {
     textAlign: 'center',
-    marginBottom: 20,
+    marginBottom: 5,
+  },
+  description: {
+    textAlign: 'center',
+    paddingHorizontal: 32,
   },
   card: {
-    ...s.p20,
+    padding: 16,
     backgroundColor: s.gray1.color,
     borderRadius: 10,
     marginBottom: 20,
@@ -147,8 +164,8 @@ const styles = StyleSheet.create({
     backgroundColor: colors.blue3,
   },
   btnContainer: {
-    paddingTop: 10,
-    paddingHorizontal: 10,
+    paddingTop: 20,
+    paddingHorizontal: 20,
     borderTopWidth: isDesktopWeb ? 0 : 1,
   },
 })
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index b145741fe..75785c01a 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -396,7 +396,7 @@ export const SettingsScreen = withAuthRequired(
               />
             </View>
             <Text type="lg" style={pal.text}>
-              Preferences
+              Home Feed Preferences
             </Text>
           </TouchableOpacity>
           <TouchableOpacity