goon-foss/goon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(mobile): unify header branding to logo mark + fix top-tab overflow on narrow phones

Browse source 
- Header showed the 'goon' text wordmark while the login screen leads with the GoonMark
  symbol — switch the header to GoonMark so the logo is consistent across login + main.
- Scenes/Movies/Sites could overlap the header action icons on narrow phones: the mark is
  narrower than the wordmark, row gap reduced 16->10, and the 'Sign out' text replaced with
  a compact icon — frees ~80px so the left (logo+tabs) and right (actions) fit down to ~320px.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jtrzupek 2026-06-01 21:44:16 +02:00
parent 817b50fbf8
commit bb5a97e288
1 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
mobile/src/navigation.tsx
View file

@ -4,7 +4,7 @@ import {
useNavigationContainerRef,
} from '@react-navigation/native';
import { BugReportFAB } from './components/BugReportFAB';
import { GoonWordmark } from './components/GoonWordmark';
import { GoonMark } from './components/GoonWordmark';
import { GoonClient } from './api';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
@ -94,9 +94,10 @@ function TopTabs({
}) {
const tabs: TopTab[] = ['Scenes', 'Movies', 'Sites'];
return (
<View style={{ flexDirection: 'row', gap: 16, paddingHorizontal: 12, alignItems: 'center' }}>
{/* Wordmark — branding po lewej, dystans do pierwszego tabu. */}
<GoonWordmark size={24} />
<View style={{ flexDirection: 'row', gap: 10, paddingHorizontal: 10, alignItems: 'center' }}>
{/* Logo (mark) — spójne z ekranem logowania; węższe od wordmarku, więc Scenes/Movies/Sites
+ akcje po prawej mieszczą się bez nachodzenia na wąskich telefonach. */}
<GoonMark size={30} />
<View style={{ width: 1, height: 18, backgroundColor: theme.border, marginRight: 2 }} />
{tabs.map((t) => {
const active = t === current;
@ -178,7 +179,7 @@ export function AppNavigator({ onLogout, client, appVersion }: AppNavigatorProps
<Text style={{ color: theme.muted, fontSize: 18 }}>⚙</Text>
</Pressable>
<Pressable onPress={onLogout} hitSlop={12}>
<Text style={{ color: theme.muted, fontSize: 13 }}>Sign out</Text>
<Text style={{ fontSize: 17 }}>🚪</Text>
</Pressable>
</View>
),
@ -199,7 +200,7 @@ export function AppNavigator({ onLogout, client, appVersion }: AppNavigatorProps
headerRight: () => (
<View style={{ flexDirection: 'row', gap: 14, alignItems: 'center' }}>
<Pressable onPress={onLogout} hitSlop={12}>
<Text style={{ color: theme.muted, fontSize: 13 }}>Sign out</Text>
<Text style={{ fontSize: 17 }}>🚪</Text>
</Pressable>
</View>
),
@ -220,7 +221,7 @@ export function AppNavigator({ onLogout, client, appVersion }: AppNavigatorProps
headerRight: () => (
<View style={{ flexDirection: 'row', gap: 14, alignItems: 'center' }}>
<Pressable onPress={onLogout} hitSlop={12}>
<Text style={{ color: theme.muted, fontSize: 13 }}>Sign out</Text>
<Text style={{ fontSize: 17 }}>🚪</Text>
</Pressable>
</View>
),