Skip to content

feat: liquid glass + orange design overhaul #40

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
TargetMisser merged 3 commits into from
Apr 6, 2026
Merged

feat: liquid glass + orange design overhaul #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efc23ab
refactor: design & code quality refresh
TargetMisser Apr 6, 2026
7e0cf9b
fix: address code review blockers
TargetMisser Apr 6, 2026
571c760
feat: liquid glass + orange overhaul
TargetMisser Apr 6, 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
52 changes: 32 additions & 20 deletions App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ function AppInner() {
// ─── Auto-schedule flight notifications on startup ─────────────────────────
useEffect(() => {
autoScheduleNotifications().then(count => {
if (count > 0) console.log(`Auto-scheduled ${count} notifications`);
if (count > 0 && __DEV__) console.log(`Auto-scheduled ${count} notifications`);
}).catch(() => {});
}, []);

Expand Down Expand Up @@ -175,8 +175,13 @@ function AppInner() {
backgroundColor={colors.appBar}
/>

{/* Top App Bar */}
<View style={[styles.appBar, { backgroundColor: colors.appBar, borderBottomColor: colors.border }]}>
{/* Top App Bar — liquid glass */}
<BlurView
intensity={colors.isDark ? 60 : 50}
tint={colors.isDark ? 'dark' : 'light'}
style={[styles.appBar, { borderBottomColor: colors.glassBorder }]}
>
<View style={[StyleSheet.absoluteFill, { backgroundColor: colors.appBar }]} />
{overlay ? (
<TouchableOpacity onPress={handleBack} style={styles.iconBtn}>
<MaterialIcons name="arrow-back" size={22} color={colors.primaryDark} />
Expand All @@ -187,15 +192,20 @@ function AppInner() {
</TouchableOpacity>
)}
<View style={styles.titleRow}>
<Text style={[styles.appBarTitle, { color: colors.primaryDark }]}>{appBarTitle}</Text>
<Text style={[styles.appBarTitle, { color: colors.text }]}>{appBarTitle}</Text>
{isWeather && (
<Text style={styles.weatherChip}>{colors.weatherIcon} {colors.weatherLabel}</Text>
)}
</View>
<View style={[styles.avatar, { backgroundColor: colors.primaryLight }]}>
<Text style={[styles.avatarText, { color: colors.primaryDark }]}>MR</Text>
</View>
</View>
<LinearGradient
colors={[colors.primaryLight, colors.primary]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.avatar}
>
<Text style={styles.avatarText}>MR</Text>
</LinearGradient>
</BlurView>

{/* Screen Content */}
{isWeather ? (
Expand Down Expand Up @@ -237,8 +247,8 @@ function AppInner() {
icon={tab.icon}
label={tab.label}
focused={active}
activeColor={colors.primary}
inactiveColor={colors.isDark ? '#94A3B8' : '#64748B'}
activeColor={colors.tabIconActive}
inactiveColor={colors.tabIconInactive}
onPress={() => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
goToTab(TABS.findIndex(t => t.id === tab.id));
Expand Down Expand Up @@ -282,10 +292,11 @@ const styles = StyleSheet.create({
paddingHorizontal: 12,
paddingVertical: 10,
borderBottomWidth: 1,
overflow: 'hidden',
},
iconBtn: { padding: 6, borderRadius: 8, marginRight: 6 },
titleRow: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 8 },
appBarTitle: { fontSize: 18, fontWeight: 'bold', letterSpacing: 0.3 },
appBarTitle: { fontSize: 18, fontWeight: '700', letterSpacing: 0.3 },
weatherChip: {
fontSize: 11, color: 'rgba(255,255,255,0.8)',
backgroundColor: 'rgba(255,255,255,0.15)',
Expand All @@ -295,8 +306,9 @@ const styles = StyleSheet.create({
avatar: {
width: 34, height: 34, borderRadius: 17,
justifyContent: 'center', alignItems: 'center',
overflow: 'hidden',
},
avatarText: { fontSize: 12, fontWeight: 'bold' },
avatarText: { fontSize: 12, fontWeight: '700', color: '#FFFFFF' },
content: { flex: 1 },
// ─── Glassmorphic floating tab bar ───
tabBarWrapper: {
Expand All @@ -307,19 +319,19 @@ const styles = StyleSheet.create({
},
tabBarBlur: {
flexDirection: 'row',
height: 64,
borderRadius: 32,
height: 66,
borderRadius: 33,
justifyContent: 'space-around',
alignItems: 'center',
overflow: 'hidden',
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.15)',
borderWidth: 0.75,
borderColor: 'rgba(255,255,255,0.22)',
},
glassTab: {
alignItems: 'center',
justifyContent: 'center',
width: 64,
height: 54,
width: 68,
height: 56,
},
glassLabel: {
fontSize: 10,
Expand All @@ -329,8 +341,8 @@ const styles = StyleSheet.create({
},
glassIndicator: {
position: 'absolute',
bottom: 0,
width: 20,
bottom: 4,
width: 18,
height: 3,
borderRadius: 999,
},
Expand Down
197 changes: 197 additions & 0 deletions src/components/AeroStaffLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
import React from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

type Size = 'small' | 'large';

interface Props {
/** 'large' = icon + wordmark (drawer header); 'small' = icon only */
variant?: Size;
/** White-only mode for use inside orange/dark headers */
monochrome?: boolean;
}

export default function AeroStaffLogo({ variant = 'large', monochrome = false }: Props) {
return (
<View style={[styles.root, variant === 'small' && styles.rootSmall]}>
<AeroIconMark small={variant === 'small'} monochrome={monochrome} />
{variant === 'large' && (
<View style={styles.wordmarkWrapper}>
<Text style={[styles.wordmarkAero, monochrome && styles.wordmarkMono]}>AERO</Text>
<View style={styles.staffWrapper}>
{!monochrome && (
<LinearGradient
colors={['#FF9A42', '#F47B16']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={StyleSheet.absoluteFillObject}
/>
)}
<Text style={[styles.wordmarkStaff, monochrome && styles.wordmarkMono]}>STAFF</Text>
</View>
<View style={[styles.proBadge, monochrome && styles.proBadgeMono]}>
<Text style={[styles.proBadgeText, monochrome && { color: '#F47B16' }]}>PRO</Text>
</View>
</View>
)}
</View>
);
}

function AeroIconMark({ small, monochrome }: { small: boolean; monochrome: boolean }) {
const S = small ? 36 : 44;
const R = small ? 9 : 11;
const scale = S / 44;

const fuselageW = Math.round(22 * scale);
const fuselageH = Math.round(4 * scale);
const wingW = Math.round(20 * scale);
const wingH = Math.round(2.5 * scale);
const tailW = Math.round(8 * scale);
const tailH = Math.round(2 * scale);

const white = '#FFFFFF';
const orange = '#F47B16';
const fg = monochrome ? orange : white;

return (
<View style={[iconStyles.container, { width: S, height: S, borderRadius: R }]}>
{monochrome ? (
<View style={[StyleSheet.absoluteFillObject, { backgroundColor: '#FFFFFF' }]} />
) : (
<LinearGradient
colors={['#FFB060', '#F47B16', '#C2520A']}
start={{ x: 0.1, y: 0 }}
end={{ x: 0.9, y: 1 }}
style={StyleSheet.absoluteFillObject}
/>
)}
{/* Specular highlight */}
<LinearGradient
colors={['rgba(255,255,255,0.38)', 'rgba(255,255,255,0.00)']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={StyleSheet.absoluteFillObject}
pointerEvents="none"
/>
{/* Aircraft mark */}
<View style={iconStyles.aircraft}>
{/* Upper wing */}
<View style={[
iconStyles.wing,
{
width: wingW, height: wingH,
backgroundColor: fg,
transform: [{ skewX: '-18deg' }],
marginBottom: 1,
},
]} />
{/* Fuselage */}
<View style={[
iconStyles.fuselage,
{ width: fuselageW, height: fuselageH, borderRadius: fuselageH / 2, backgroundColor: fg },
]} />
{/* Lower wing */}
<View style={[
iconStyles.wing,
{
width: wingW, height: wingH,
backgroundColor: fg,
transform: [{ skewX: '18deg' }],
marginTop: 1,
},
]} />
{/* Tail fin */}
<View style={[
iconStyles.tail,
{ width: tailW, height: tailH, backgroundColor: monochrome ? 'rgba(244,123,22,0.6)' : 'rgba(255,255,255,0.65)' },
]} />
</View>
</View>
);
}

const FONT = Platform.select({ ios: undefined, android: 'Roboto', default: undefined });

const styles = StyleSheet.create({
root: {
flexDirection: 'row',
alignItems: 'center',
gap: 10,
},
rootSmall: { gap: 0 },
wordmarkWrapper: {
flexDirection: 'row',
alignItems: 'center',
},
wordmarkAero: {
fontSize: 19,
fontWeight: '700',
letterSpacing: 2.5,
color: '#FFFFFF',
fontFamily: FONT,
},
wordmarkMono: {
color: '#FFFFFF',
},
staffWrapper: {
overflow: 'hidden',
borderRadius: 2,
},
wordmarkStaff: {
fontSize: 19,
fontWeight: '700',
letterSpacing: 2.5,
color: '#1C1C1E',
fontFamily: FONT,
},
proBadge: {
marginLeft: 6,
backgroundColor: '#F47B16',
borderRadius: 4,
paddingHorizontal: 5,
paddingVertical: 2,
alignSelf: 'center',
marginBottom: 1,
},
proBadgeMono: {
backgroundColor: '#FFFFFF',
},
proBadgeText: {
fontSize: 8,
fontWeight: '800',
letterSpacing: 0.8,
color: '#FFFFFF',
fontFamily: FONT,
},
});

const iconStyles = StyleSheet.create({
container: {
overflow: 'hidden',
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#F47B16',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.45,
shadowRadius: 10,
elevation: 8,
},
aircraft: {
alignItems: 'center',
justifyContent: 'center',
},
fuselage: {
alignSelf: 'center',
},
wing: {
alignSelf: 'flex-end',
borderRadius: 1,
},
tail: {
alignSelf: 'flex-start',
marginTop: 1,
borderRadius: 1,
transform: [{ skewX: '-18deg' }],
},
});
Loading
Loading