feat: Add title to HathorList and refactor Settings page

HathorNetwork · Oct 5, 2023 · f6572ee · f6572ee
1 parent ea5ecd8
commit f6572ee
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/components/HathorList.js b/src/components/HathorList.js
@@ -31,6 +31,16 @@ export class HathorList extends Component {
       shadowColor: COLORS.textColor,
       shadowOpacity: 0.08,
     },
+    title: {
+      alignSelf: 'flex-start',
+      paddingHorizontal: 32,
+      fontSize: 14,
+      // HSL is preferable than RGB because it allows an
+      // easier manipulation in arithmetic fashion.
+      // The following color is Black with 55% of light,
+      // which yields a tone of grey.
+      color: 'hsl(0, 0%, 55%)',
+    },
     infinityView: {
       flex: 1,
       marginBottom: 0,
@@ -48,9 +58,13 @@ export class HathorList extends Component {
     }
 
     return (
+      <>
+      {this.props.title
+        && <Text style={[this.style.title]}>{this.props.title}</Text>}
       <View style={style}>
         {this.props.children}
       </View>
+      </>
     );
   }
 }

diff --git a/src/screens/Settings.js b/src/screens/Settings.js
@@ -98,7 +98,7 @@ export class Settings extends React.Component {
             )
           )}
 
-          <HathorList infinity>
+          <HathorList title={t`General Settings`}>
             <ListItem
               text={(
                 <View style={{ flex: 1 }}>
@@ -169,6 +169,7 @@ export class Settings extends React.Component {
               )}
             />
           </HathorList>
+
         </ScrollView>
         <OfflineBar />
       </View>