soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 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

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>