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:
parent
817b50fbf8
commit
bb5a97e288
1 changed files with 8 additions and 7 deletions
|
|
@ -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>
|
||||||
),
|
),
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue