feat(admin): modernize tenant admin PWA with cockpit layout and slate theme
- Replaced rainbow grid with phase-aware cockpit layout - Implemented smart lifecycle hero with readiness logic - Introduced dark command bar header with context pill and search placeholder - Updated global Tamagui theme to slate/indigo palette - Refined bottom navigation with minimalist spotlight style
This commit is contained in:
Codex Agent
@@ -1,48 +1,46 @@
|
||||
import { useTheme } from '@tamagui/core';
|
||||
|
||||
export const ADMIN_COLORS = {
|
||||
primary: '#FF5C5C',
|
||||
primaryStrong: '#E63B57',
|
||||
accent: '#3D5AFE',
|
||||
accentSoft: '#E8ECFF',
|
||||
accentWarm: '#FFE3D6',
|
||||
warning: '#FBBF24',
|
||||
success: '#22C55E',
|
||||
danger: '#EF4444',
|
||||
text: '#0B132B',
|
||||
textMuted: '#54606E',
|
||||
textSubtle: '#8C99A8',
|
||||
border: '#F3D6C9',
|
||||
primary: '#4F46E5', // Indigo 600
|
||||
primaryStrong: '#4338CA', // Indigo 700
|
||||
accent: '#F43F5E', // Rose 500
|
||||
accentSoft: '#E0E7FF', // Indigo 100
|
||||
accentWarm: '#FFE4E6', // Rose 100
|
||||
warning: '#F59E0B', // Amber 500
|
||||
success: '#10B981', // Emerald 500
|
||||
danger: '#EF4444', // Red 500
|
||||
text: '#0F172A', // Slate 900
|
||||
textMuted: '#475569', // Slate 600
|
||||
textSubtle: '#64748B', // Slate 500
|
||||
border: '#E2E8F0', // Slate 200
|
||||
surface: '#FFFFFF',
|
||||
surfaceMuted: '#FFF6F0',
|
||||
backdrop: '#0B132B',
|
||||
surfaceMuted: '#F8FAFC', // Slate 50
|
||||
backdrop: '#0F172A',
|
||||
};
|
||||
|
||||
export const ADMIN_ACTION_COLORS = {
|
||||
settings: '#00C2A8',
|
||||
tasks: '#FFC857',
|
||||
qr: '#3D5AFE',
|
||||
images: '#FF7AB6',
|
||||
liveShow: '#FF6D00',
|
||||
liveShowSettings: '#00B0FF',
|
||||
guests: '#22C55E',
|
||||
guestMessages: '#FF8A00',
|
||||
branding: '#00B4D8',
|
||||
photobooth: '#FF3D71',
|
||||
settings: '#64748B', // Slate 500
|
||||
tasks: '#F43F5E', // Rose 500 (Accent)
|
||||
qr: '#10B981', // Emerald 500
|
||||
images: '#4F46E5', // Indigo 600 (Primary)
|
||||
liveShow: '#F59E0B', // Amber 500
|
||||
liveShowSettings: '#6366F1', // Indigo 500
|
||||
guests: '#334155', // Slate 700
|
||||
guestMessages: '#4F46E5',
|
||||
branding: '#6366F1',
|
||||
photobooth: '#8B5CF6', // Violet 500
|
||||
recap: '#94A3B8',
|
||||
packages: ADMIN_COLORS.primary,
|
||||
analytics: '#22C55E',
|
||||
invites: '#3D5AFE',
|
||||
packages: '#4F46E5',
|
||||
analytics: '#10B981',
|
||||
invites: '#10B981',
|
||||
};
|
||||
|
||||
export const ADMIN_GRADIENTS = {
|
||||
primaryCta: `linear-gradient(135deg, ${ADMIN_COLORS.primary}, #FF9A5C, ${ADMIN_COLORS.accent})`,
|
||||
softCard: 'linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,245,238,0.92))',
|
||||
loginBackground: 'linear-gradient(135deg, #0b132b, #162040, #0b132b)',
|
||||
appBackground:
|
||||
'radial-gradient(circle at 15% 0%, rgba(255, 92, 92, 0.22), transparent 50%), radial-gradient(circle at 85% 10%, rgba(61, 90, 254, 0.2), transparent 55%), linear-gradient(180deg, #fff4ee 0%, #ffefe4 100%)',
|
||||
appBackgroundDark:
|
||||
'radial-gradient(circle at 15% 0%, rgba(255, 92, 92, 0.18), transparent 55%), radial-gradient(circle at 85% 10%, rgba(61, 90, 254, 0.18), transparent 55%), linear-gradient(180deg, #0b132b 0%, #0e1a33 100%)',
|
||||
primaryCta: `linear-gradient(135deg, ${ADMIN_COLORS.primary}, ${ADMIN_COLORS.primaryStrong})`,
|
||||
softCard: 'linear-gradient(145deg, rgba(255,255,255,1), rgba(248,250,252,0.95))',
|
||||
loginBackground: 'linear-gradient(135deg, #0F172A, #1E293B, #0F172A)',
|
||||
appBackground: 'linear-gradient(180deg, #F1F5F9 0%, #F1F5F9 100%)',
|
||||
appBackgroundDark: 'linear-gradient(180deg, #0F172A 0%, #1E293B 100%)',
|
||||
};
|
||||
|
||||
export const ADMIN_MOTION = {
|
||||
@@ -78,7 +76,7 @@ function parseRgb(color: string): Rgb | null {
|
||||
return null;
|
||||
}
|
||||
|
||||
function withAlpha(color: string, alpha: number): string {
|
||||
export function withAlpha(color: string, alpha: number): string {
|
||||
const rgb = parseRgb(color);
|
||||
if (! rgb) {
|
||||
return color;
|
||||
@@ -99,47 +97,47 @@ function isDarkColor(color: string): boolean {
|
||||
|
||||
export function useAdminTheme() {
|
||||
const theme = useTheme();
|
||||
const background = String(theme.background?.val ?? '#FFF8F5');
|
||||
const background = String(theme.background?.val ?? ADMIN_COLORS.surfaceMuted);
|
||||
const surface = String(theme.surface?.val ?? ADMIN_COLORS.surface);
|
||||
const border = String(theme.borderColor?.val ?? ADMIN_COLORS.border);
|
||||
const isDark = isDarkColor(background);
|
||||
const glassSurface = withAlpha(surface, isDark ? 0.96 : 0.98);
|
||||
const glassSurfaceStrong = withAlpha(surface, isDark ? 1 : 1);
|
||||
const glassBorder = withAlpha(border, isDark ? 0.85 : 0.95);
|
||||
const glassShadow = isDark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(11, 19, 43, 0.18)';
|
||||
const glassShadow = isDark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(15, 23, 42, 0.08)';
|
||||
const appBackground = isDark ? ADMIN_GRADIENTS.appBackgroundDark : ADMIN_GRADIENTS.appBackground;
|
||||
|
||||
return {
|
||||
theme,
|
||||
background,
|
||||
surface,
|
||||
surfaceMuted: String(theme.gray2?.val ?? ADMIN_COLORS.surfaceMuted),
|
||||
surfaceMuted: String(theme.muted?.val ?? ADMIN_COLORS.surfaceMuted),
|
||||
border,
|
||||
text: String(theme.color?.val ?? ADMIN_COLORS.text),
|
||||
textStrong: String(theme.color12?.val ?? theme.color?.val ?? ADMIN_COLORS.text),
|
||||
muted: String(theme.gray?.val ?? ADMIN_COLORS.textMuted),
|
||||
subtle: String(theme.gray8?.val ?? ADMIN_COLORS.textSubtle),
|
||||
textStrong: String(theme.text?.val ?? theme.color?.val ?? ADMIN_COLORS.text),
|
||||
muted: String(theme.muted?.val ?? ADMIN_COLORS.textMuted),
|
||||
subtle: String(theme.textSubtle?.val ?? ADMIN_COLORS.textSubtle),
|
||||
primary: String(theme.primary?.val ?? ADMIN_COLORS.primary),
|
||||
accent: String(theme.blue6?.val ?? theme.accent?.val ?? ADMIN_COLORS.accent),
|
||||
accent: String(theme.accent?.val ?? ADMIN_COLORS.accent),
|
||||
accentSoft: String(theme.blue3?.val ?? ADMIN_COLORS.accentSoft),
|
||||
accentStrong: String(theme.blue10?.val ?? ADMIN_COLORS.primaryStrong),
|
||||
successBg: String(theme.green3?.val ?? '#DCFCE7'),
|
||||
accentStrong: String(theme.blue11?.val ?? ADMIN_COLORS.primaryStrong),
|
||||
successBg: String(theme.backgroundStrong?.val ?? '#DCFCE7'),
|
||||
successText: String(theme.green10?.val ?? '#166534'),
|
||||
dangerBg: String(theme.red3?.val ?? '#FEE2E2'),
|
||||
dangerText: String(theme.red11?.val ?? ADMIN_COLORS.danger),
|
||||
warningBg: String(theme.yellow3?.val ?? '#FFF7ED'),
|
||||
warningBorder: String(theme.yellow6?.val ?? '#FED7AA'),
|
||||
warningText: String(theme.yellow11?.val ?? '#92400E'),
|
||||
warningBg: String(theme.yellow3?.val ?? '#FEF3C7'),
|
||||
warningBorder: String(theme.yellow6?.val ?? '#FCD34D'),
|
||||
warningText: String(theme.yellow11?.val ?? '#B45309'),
|
||||
infoBg: String(theme.blue3?.val ?? ADMIN_COLORS.accentSoft),
|
||||
infoText: String(theme.blue10?.val ?? ADMIN_COLORS.primaryStrong),
|
||||
danger: String(theme.red10?.val ?? ADMIN_COLORS.danger),
|
||||
backdrop: String(theme.gray12?.val ?? ADMIN_COLORS.backdrop),
|
||||
overlay: withAlpha(String(theme.gray12?.val ?? ADMIN_COLORS.backdrop), 0.6),
|
||||
shadow: String(theme.shadowColor?.val ?? 'rgba(15, 23, 42, 0.12)'),
|
||||
danger: String(theme.danger?.val ?? ADMIN_COLORS.danger),
|
||||
backdrop: String(theme.backgroundStrong?.val ?? ADMIN_COLORS.backdrop),
|
||||
overlay: withAlpha(String(theme.backgroundStrong?.val ?? ADMIN_COLORS.backdrop), 0.6),
|
||||
shadow: String(theme.shadowColor?.val ?? 'rgba(15, 23, 42, 0.08)'),
|
||||
glassSurface,
|
||||
glassSurfaceStrong,
|
||||
glassBorder,
|
||||
glassShadow,
|
||||
appBackground,
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user