Skip to content

feat(formulus): aligning headers … #530

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
IamLRBA merged 2 commits into from
Mar 19, 2026
Merged

feat(formulus): aligning headers … #530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4fc6ad
ui(formulus): align About/Help headers with logo and rename Settings …
IamLRBA Mar 19, 2026
1cbff75
Merge branch 'dev' into Headers
IamLRBA Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 27 additions & 29 deletions formulus/src/screens/AboutScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
return (
<BlurredScreenBackground>
<SafeAreaView
style={[styles.container, { backgroundColor: 'transparent' }]}

Check warning on line 58 in formulus/src/screens/AboutScreen.tsx

View workflow job for this annotation

GitHub Actions / Formulus (React Native) 

Color literal: { backgroundColor: 'transparent' }
edges={['top']}>
<View
style={[
Expand All @@ -65,24 +65,27 @@
borderBottomColor: themeColors.divider as string,
},
]}>
<Text
style={[styles.title, { color: themeColors.onPrimary as string }]}>
About
</Text>
</View>

<ScrollView
style={styles.scrollTransparent}
contentContainerStyle={styles.content}>
<View style={styles.brandRow}>
<View style={styles.logoWrapper}>
<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.appName, { color: themeColors.onSurface }]}>
ODE
<Text
style={[
styles.title,
{ color: themeColors.onPrimary as string },
]}>
About
</Text>
</View>
</View>

<ScrollView
style={styles.scrollTransparent}
contentContainerStyle={styles.content}>
<View style={cardStyle}>
<Text style={[styles.cardTitle, { color: sectionColor }]}>
Formulus
Expand Down Expand Up @@ -149,7 +152,7 @@
container: {
flex: 1,
},
scrollTransparent: {

Check warning on line 155 in formulus/src/screens/AboutScreen.tsx

View workflow job for this annotation

GitHub Actions / Formulus (React Native) 

Color literal: { backgroundColor: 'transparent' }
backgroundColor: 'transparent',
},
header: {
Expand All @@ -170,36 +173,31 @@
marginBottom: odeSpacing.xs,
textAlign: 'left',
},
logoContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
},
content: {
padding: odeSpacing.md,
paddingBottom: odeSpacing.xl,
},
brandRow: {
alignItems: 'center',
marginBottom: odeSpacing.md,
gap: odeSpacing.xs,
},
logoWrapper: {

Check warning on line 185 in formulus/src/screens/AboutScreen.tsx

View workflow job for this annotation

GitHub Actions / Formulus (React Native) 

Color literal: { backgroundColor: 'transparent' }
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: {

Check warning on line 196 in formulus/src/screens/AboutScreen.tsx

View workflow job for this annotation

GitHub Actions / Formulus (React Native) 

Color literal: { backgroundColor: 'transparent' }
width: 56,
height: 56,
width: 40,
height: 40,
backgroundColor: 'transparent',
},
appName: {
fontSize: odeTypography.sectionTitle,
fontWeight: '700',
textAlign: 'center',
},
version: {
marginTop: odeSpacing.xxs,
fontSize: odeTypography.caption,
Expand Down
43 changes: 39 additions & 4 deletions formulus/src/screens/HelpScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -18,6 +19,7 @@ import {
odeRadius,
odeScreenHeaderHeight,
} from '../theme/odeDesign';
import logo from '../../assets/images/logo.png';

const FORUM_URL = 'https://forum.opendataensemble.org';

Expand Down Expand Up @@ -48,10 +50,22 @@ const HelpScreen: React.FC = () => {
borderBottomColor: themeColors.divider as string,
},
]}>
<Text
style={[styles.title, { color: themeColors.onPrimary as string }]}>
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: themeColors.onPrimary as string },
]}>
Help & Support
</Text>
</View>
</View>

<ScrollView
Expand Down Expand Up @@ -134,6 +148,27 @@ const styles = StyleSheet.create({
marginBottom: odeSpacing.xs,
textAlign: 'left',
},
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',
},
content: {
padding: odeSpacing.md,
paddingBottom: odeSpacing.xl,
Expand Down
2 changes: 1 addition & 1 deletion formulus/src/screens/SettingsScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,7 @@ const SettingsScreen = () => {
<Image source={Logo} style={styles.logo} resizeMode="contain" />
</View>
<Text style={[styles.brandName, { color: themeColors.onPrimary }]}>
ODE
Settings
</Text>
</View>
</View>
Expand Down
Loading