From b6ac177d3b2b880b0a5b3ab33f05b1d462b05053 Mon Sep 17 00:00:00 2001
From: IamLRBA <jerrylarubafestus@gmail.com>
Date: Thu, 19 Mar 2026 13:56:19 +0300
Subject: [PATCH] ui(formulus): align About/Help headers and rename Settings
 title

---
 formulus/src/screens/AboutScreen.tsx    | 60 +++++++++++--------------
 formulus/src/screens/HelpScreen.tsx     | 39 ++++++++++++++--
 formulus/src/screens/SettingsScreen.tsx |  2 +-
 3 files changed, 63 insertions(+), 38 deletions(-)

diff --git a/formulus/src/screens/AboutScreen.tsx b/formulus/src/screens/AboutScreen.tsx
index 2d0958816..d09f700f3 100644
--- a/formulus/src/screens/AboutScreen.tsx
+++ b/formulus/src/screens/AboutScreen.tsx
@@ -67,21 +67,21 @@ const AboutScreen: React.FC = () => {
               borderBottomColor: themeColors.divider as string,
             },
           ]}>
-          <Text style={[styles.title, { color: sectionColor }]}>About</Text>
+          <View style={styles.logoContainer}>
+            <View
+              style={[
+                styles.logoWrapper,
+                { borderColor: themeColors.onPrimary as string },
+              ]}>
+              <Image source={logo} style={styles.logo} resizeMode="contain" />
+            </View>
+            <Text style={[styles.title, { color: sectionColor }]}>About</Text>
+          </View>
         </View>
 
         <ScrollView
           style={styles.scrollTransparent}
           contentContainerStyle={styles.content}>
-          <View style={styles.brandRow}>
-            <View style={styles.logoWrapper}>
-              <Image source={logo} style={styles.logo} resizeMode="contain" />
-            </View>
-            <Text style={[styles.appName, { color: themeColors.onSurface }]}>
-              ODE
-            </Text>
-          </View>
-
           <View style={cardStyle}>
             <Text style={[styles.cardTitle, { color: sectionColor }]}>
               Formulus
@@ -148,41 +148,35 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     alignItems: 'flex-start',
   },
-  title: {
-    fontSize: odeTypography.screenTitle,
-    fontWeight: 'bold',
-    marginBottom: odeSpacing.xs,
-    textAlign: 'left',
-  },
-  content: {
-    padding: odeSpacing.md,
-    paddingBottom: odeSpacing.xl,
-  },
-  brandRow: {
+  logoContainer: {
+    flexDirection: 'row',
     alignItems: 'center',
-    marginBottom: odeSpacing.md,
-    gap: odeSpacing.xs,
+    justifyContent: 'flex-start',
   },
   logoWrapper: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
     borderWidth: 1,
-    borderColor: colors.brand.primary[500] as string,
     justifyContent: 'center',
     alignItems: 'center',
+    marginRight: 12,
     overflow: 'hidden',
     backgroundColor: 'transparent',
   },
   logo: {
-    width: 56,
-    height: 56,
+    width: 40,
+    height: 40,
     backgroundColor: 'transparent',
   },
-  appName: {
-    fontSize: odeTypography.sectionTitle,
-    fontWeight: '700',
-    textAlign: 'center',
+  title: {
+    fontSize: odeTypography.screenTitle,
+    fontWeight: 'bold',
+    textAlign: 'left',
+  },
+  content: {
+    padding: odeSpacing.md,
+    paddingBottom: odeSpacing.xl,
   },
   version: {
     marginTop: odeSpacing.xxs,
diff --git a/formulus/src/screens/HelpScreen.tsx b/formulus/src/screens/HelpScreen.tsx
index 7f443a2c7..6fc896351 100644
--- a/formulus/src/screens/HelpScreen.tsx
+++ b/formulus/src/screens/HelpScreen.tsx
@@ -6,6 +6,7 @@ import {
   ScrollView,
   Linking,
   Pressable,
+  Image,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import colors from '../theme/colors';
@@ -17,6 +18,7 @@ import {
   odeBorderWidth,
   odeRadius,
 } from '../theme/odeDesign';
+import logo from '../../assets/images/logo.png';
 
 const FORUM_URL = 'https://forum.opendataensemble.org';
 
@@ -50,9 +52,18 @@ const HelpScreen: React.FC = () => {
               borderBottomColor: themeColors.divider as string,
             },
           ]}>
-          <Text style={[styles.title, { color: sectionColor }]}>
-            Help & Support
-          </Text>
+          <View style={styles.logoContainer}>
+            <View
+              style={[
+                styles.logoWrapper,
+                { borderColor: themeColors.onPrimary as string },
+              ]}>
+              <Image source={logo} style={styles.logo} resizeMode="contain" />
+            </View>
+            <Text style={[styles.title, { color: sectionColor }]}>
+              Help & Support
+            </Text>
+          </View>
         </View>
 
         <ScrollView
@@ -123,10 +134,30 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     alignItems: 'flex-start',
   },
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  logoWrapper: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+  },
+  logo: {
+    width: 40,
+    height: 40,
+    backgroundColor: 'transparent',
+  },
   title: {
     fontSize: odeTypography.screenTitle,
     fontWeight: 'bold',
-    marginBottom: odeSpacing.xs,
     textAlign: 'left',
   },
   content: {
diff --git a/formulus/src/screens/SettingsScreen.tsx b/formulus/src/screens/SettingsScreen.tsx
index 0aa6c64f8..f17122569 100644
--- a/formulus/src/screens/SettingsScreen.tsx
+++ b/formulus/src/screens/SettingsScreen.tsx
@@ -384,7 +384,7 @@ const SettingsScreen = () => {
               <Image source={Logo} style={styles.logo} resizeMode="contain" />
             </View>
             <Text style={[styles.brandName, { color: themeColors.onPrimary }]}>
-              ODE
+              Settings
             </Text>
           </View>
         </View>