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

- 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

View file

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