soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Align admin mobile colors with Tamagui v2 tokens

Browse Source
This commit is contained in:
Codex Agent
2026-02-04 11:44:07 +01:00
parent 0eacb5646c
commit 56a39d0535
8 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
resources/js/admin/mobile/welcome/WelcomeEventPage.tsx
View File

@@ -10,11 +10,12 @@ import { MobileCard, CTAButton } from '../components/Primitives';
import { ADMIN_HOME_PATH, ADMIN_WELCOME_BASE_PATH, ADMIN_WELCOME_PACKAGES_PATH, ADMIN_WELCOME_SUMMARY_PATH, adminPath } from '../../constants';
import { getTenantPackagesOverview, trackOnboarding } from '../../api';
import { getSelectedPackageId } from '../lib/onboardingSelection';
import { ADMIN_COLORS } from '../theme';
import { useAdminTheme } from '../theme';
export default function WelcomeEventPage() {
const navigate = useNavigate();
const { t } = useTranslation('onboarding');
const theme = useAdminTheme();
const selectedId = getSelectedPackageId();
const { data: overview } = useQuery({
@@ -54,7 +55,7 @@ export default function WelcomeEventPage() {
<Text fontSize="$sm" fontWeight="800">
{t('eventSetup.step.title', 'Event setup in minutes')}
</Text>
<Text fontSize="$sm" color={ADMIN_COLORS.textMuted}>
<Text fontSize="$sm" color={theme.muted}>
{t(
'eventSetup.step.description',
'We guide you through name, date, mood, and tasks. Afterwards you can moderate photos and support guests live.',
@@ -83,7 +84,7 @@ export default function WelcomeEventPage() {
<Text fontSize="$sm" fontWeight="800">
{t('eventSetup.cta.heading', 'Ready for your first event?')}
</Text>
<Text fontSize="$sm" color={ADMIN_COLORS.textMuted}>
<Text fontSize="$sm" color={theme.muted}>
{t(
'eventSetup.cta.description',
"You're switching to the event manager. Assign tasks, invite members, and test the gallery. You can always return to the welcome journey.",
@@ -120,23 +121,24 @@ function FeatureRow({
title: string;
body: string;
}) {
const theme = useAdminTheme();
return (
<XStack alignItems="center" gap="$2">
<XStack
width={34}
height={34}
borderRadius={12}
backgroundColor={ADMIN_COLORS.accentSoft}
backgroundColor={theme.accentSoft}
alignItems="center"
justifyContent="center"
>
<Icon size={16} color={ADMIN_COLORS.primary} />
<Icon size={16} color={theme.primary} />
</XStack>
<YStack>
<Text fontSize="$sm" fontWeight="700">
{title}
</Text>
<Text fontSize="$xs" color={ADMIN_COLORS.textMuted}>
<Text fontSize="$xs" color={theme.muted}>
{body}
</Text>
</YStack>

11
resources/js/admin/mobile/welcome/WelcomeLandingPage.tsx
View File

@@ -15,12 +15,13 @@ import {
ADMIN_WELCOME_PACKAGES_PATH,
adminPath,
} from '../../constants';
import { ADMIN_COLORS } from '../theme';
import { useAdminTheme } from '../theme';
export default function WelcomeLandingPage() {
const navigate = useNavigate();
const { t } = useTranslation('onboarding');
const { hasEvents } = useEventContext();
const theme = useAdminTheme();
const { data: packagesData } = useQuery({
queryKey: ['mobile', 'onboarding', 'packages-overview'],
@@ -53,7 +54,7 @@ export default function WelcomeLandingPage() {
<Text fontSize="$lg" fontWeight="900">
{t('hero.title', 'Design the next Fotospiel experience')}
</Text>
<Text fontSize="$sm" color={ADMIN_COLORS.textMuted}>
<Text fontSize="$sm" color={theme.muted}>
{t(
'hero.description',
'In just a few steps you guide guests through a magical photo journey – complete with storytelling, tasks, and a moderated gallery.',
@@ -124,11 +125,11 @@ function FeatureCard({
width={36}
height={36}
borderRadius={12}
backgroundColor={ADMIN_COLORS.accentSoft}
backgroundColor={theme.accentSoft}
alignItems="center"
justifyContent="center"
>
<Icon size={18} color={ADMIN_COLORS.primary} />
<Icon size={18} color={theme.primary} />
</XStack>
<Text fontSize="$sm" fontWeight="800">
{title}
@@ -136,7 +137,7 @@ function FeatureCard({
</XStack>
{badge ? <PillBadge tone="muted">{badge}</PillBadge> : null}
</XStack>
<Text fontSize="$sm" color={ADMIN_COLORS.textMuted}>
<Text fontSize="$sm" color={theme.muted}>
{body}
</Text>
</MobileCard>

26
resources/js/admin/mobile/welcome/WelcomeSummaryPage.tsx
View File

@@ -10,7 +10,7 @@ import { MobileCard, CTAButton, PillBadge } from '../components/Primitives';
import { getPackages, getTenantPackagesOverview } from '../../api';
import { ADMIN_WELCOME_BASE_PATH, ADMIN_WELCOME_EVENT_PATH, ADMIN_WELCOME_PACKAGES_PATH, adminPath } from '../../constants';
import { getSelectedPackageId } from '../lib/onboardingSelection';
import { ADMIN_COLORS } from '../theme';
import { useAdminTheme } from '../theme';
type SummaryPackage = {
id: number;
@@ -25,6 +25,7 @@ type SummaryPackage = {
export default function WelcomeSummaryPage() {
const navigate = useNavigate();
const { t } = useTranslation('onboarding');
const theme = useAdminTheme();
const selectedId = getSelectedPackageId();
const { data: catalog, isLoading: catalogLoading } = useQuery({
@@ -79,7 +80,7 @@ export default function WelcomeSummaryPage() {
>
{loading ? (
<MobileCard>
<Text fontSize="$sm" color={ADMIN_COLORS.textMuted}>
<Text fontSize="$sm" color={theme.muted}>
{t('summary.state.loading', 'Checking available packages …')}
</Text>
</MobileCard>
@@ -88,7 +89,7 @@ export default function WelcomeSummaryPage() {
<Text fontSize="$sm" fontWeight="800">
{t('summary.state.missingTitle', 'No package selected')}
</Text>
<Text fontSize="$sm" color={ADMIN_COLORS.textMuted}>
<Text fontSize="$sm" color={theme.muted}>
{t('summary.state.missingDescription', 'Select a package first or refresh if data changed.')}
</Text>
<CTAButton label={t('summary.footer.back', 'Back to package selection')} onPress={() => navigate(ADMIN_WELCOME_PACKAGES_PATH)} />
@@ -101,17 +102,17 @@ export default function WelcomeSummaryPage() {
width={36}
height={36}
borderRadius={12}
backgroundColor={ADMIN_COLORS.accentSoft}
backgroundColor={theme.accentSoft}
alignItems="center"
justifyContent="center"
>
<PackageIcon size={18} color={ADMIN_COLORS.primary} />
<PackageIcon size={18} color={theme.primary} />
</XStack>
<YStack>
<Text fontSize="$sm" fontWeight="800">
{resolvedPackage.name}
</Text>
<Text fontSize="$xs" color={ADMIN_COLORS.textMuted}>
<Text fontSize="$xs" color={theme.muted}>
{resolvedPackage.active
? t('summary.details.section.statusActive', 'Already purchased')
: t('summary.details.section.statusInactive', 'Not purchased yet')}
@@ -149,8 +150,8 @@ export default function WelcomeSummaryPage() {
{resolvedPackage.active ? (
<XStack alignItems="center" gap="$2">
<CheckCircle2 size={18} color={ADMIN_COLORS.success} />
<Text fontSize="$sm" color={ADMIN_COLORS.success} fontWeight="700">
<CheckCircle2 size={18} color={theme.successText} />
<Text fontSize="$sm" color={theme.successText} fontWeight="700">
{t('summary.details.section.statusActive', 'Already purchased')}
</Text>
</XStack>
@@ -172,10 +173,10 @@ export default function WelcomeSummaryPage() {
],
}) as string[]).map((item) => (
<XStack key={item} gap="$2">
<Text fontSize="$xs" color={ADMIN_COLORS.textMuted}>
<Text fontSize="$xs" color={theme.muted}>
•
</Text>
<Text fontSize="$sm" color={ADMIN_COLORS.textMuted}>
<Text fontSize="$sm" color={theme.muted}>
{item}
</Text>
</XStack>
@@ -202,12 +203,13 @@ export default function WelcomeSummaryPage() {
}
function SummaryRow({ label, value }: { label: string; value: string }) {
const theme = useAdminTheme();
return (
<XStack alignItems="center" justifyContent="space-between">
<Text fontSize="$sm" color={ADMIN_COLORS.text}>
<Text fontSize="$sm" color={theme.text}>
{label}
</Text>
<Text fontSize="$sm" color={ADMIN_COLORS.textMuted}>
<Text fontSize="$sm" color={theme.muted}>
{value}
</Text>
</XStack>