dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance UI with metallic gradient cards - admin and mobile consistent color schemes

Browse Source
This commit is contained in:
Aleksandar 2025-12-15 12:10:44 +01:00
parent 337351dd06
commit 2f79d1547f
8 changed files with 55 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/admin/src/app/page.tsx
View File

@ -107,7 +107,7 @@ export default function Home() {
{/* Main Content Grid */} {/* Main Content Grid */}
<div className="space-y-6 pb-12"> <div className="space-y-6 pb-12">
{/* User Management - Full Width */} {/* User Management - Full Width */}
<div className="bg-white rounded-2xl shadow-lg border border-slate-200/80 p-7 hover:shadow-xl transition-shadow"> <div className="bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50 rounded-2xl shadow-lg border border-slate-200/50 p-7 hover:shadow-2xl transition-all duration-300 backdrop-blur-sm">
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h2 className="text-2xl font-bold text-slate-900">Active Athletes</h2> <h2 className="text-2xl font-bold text-slate-900">Active Athletes</h2>

16
apps/admin/src/components/analytics/AnalyticsDashboard.tsx
View File

@ -79,7 +79,7 @@ export function AnalyticsDashboard() {
<div className="space-y-4"> <div className="space-y-4">
{/* Key Metrics Cards - 3 columns */} {/* Key Metrics Cards - 3 columns */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div className="bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white"> <div className="bg-gradient-to-br from-blue-700 via-cyan-500 to-blue-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Athletes</p> <p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Athletes</p>
<div className="flex items-baseline gap-2"> <div className="flex items-baseline gap-2">
<div className="text-2xl font-black text-white">{totalUsers}</div> <div className="text-2xl font-black text-white">{totalUsers}</div>
@ -87,7 +87,7 @@ export function AnalyticsDashboard() {
</div> </div>
</div> </div>
<div className="bg-gradient-to-br from-emerald-600 via-teal-500 to-cyan-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white"> <div className="bg-gradient-to-br from-amber-700 via-yellow-500 to-amber-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Revenue</p> <p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Revenue</p>
<div className="flex items-baseline gap-2"> <div className="flex items-baseline gap-2">
<div className="text-2xl font-black text-white">${totalRevenue.toLocaleString()}</div> <div className="text-2xl font-black text-white">${totalRevenue.toLocaleString()}</div>
@ -95,7 +95,7 @@ export function AnalyticsDashboard() {
</div> </div>
</div> </div>
<div className="bg-gradient-to-br from-purple-600 via-pink-500 to-blue-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white"> <div className="bg-gradient-to-br from-pink-700 via-fuchsia-500 to-pink-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Active Members</p> <p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Active Members</p>
<div className="flex items-baseline gap-2"> <div className="flex items-baseline gap-2">
<div className="text-2xl font-black text-white">{activeMembers}</div> <div className="text-2xl font-black text-white">{activeMembers}</div>
@ -106,7 +106,7 @@ export function AnalyticsDashboard() {
{/* Charts - 3 Columns Horizontal */} {/* Charts - 3 Columns Horizontal */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-3"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<div className="bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all"> <div className="bg-gradient-to-br from-blue-700 via-cyan-500 to-blue-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
<div className="mb-3"> <div className="mb-3">
<h3 className="text-sm font-bold text-white">User Growth Trend</h3> <h3 className="text-sm font-bold text-white">User Growth Trend</h3>
<p className="text-xs text-blue-100">Last 6 months performance</p> <p className="text-xs text-blue-100">Last 6 months performance</p>
@ -116,20 +116,20 @@ export function AnalyticsDashboard() {
</div> </div>
</div> </div>
<div className="bg-gradient-to-br from-emerald-600 via-teal-500 to-cyan-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all"> <div className="bg-gradient-to-br from-amber-700 via-yellow-500 to-amber-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
<div className="mb-3"> <div className="mb-3">
<h3 className="text-sm font-bold text-white">Membership Mix</h3> <h3 className="text-sm font-bold text-white">Membership Mix</h3>
<p className="text-xs text-emerald-100">Distribution breakdown</p> <p className="text-xs text-amber-100">Distribution breakdown</p>
</div> </div>
<div className="h-48 overflow-auto"> <div className="h-48 overflow-auto">
<MembershipDistributionChart data={membershipData} /> <MembershipDistributionChart data={membershipData} />
</div> </div>
</div> </div>
<div className="bg-gradient-to-br from-purple-600 via-pink-500 to-blue-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all"> <div className="bg-gradient-to-br from-pink-700 via-fuchsia-500 to-pink-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
<div className="mb-3"> <div className="mb-3">
<h3 className="text-sm font-bold text-white">Revenue Stream</h3> <h3 className="text-sm font-bold text-white">Revenue Stream</h3>
<p className="text-xs text-purple-100">Monthly earnings</p> <p className="text-xs text-pink-100">Monthly earnings</p>
</div> </div>
<div className="h-48 overflow-auto"> <div className="h-48 overflow-auto">
<RevenueChart data={revenueData} /> <RevenueChart data={revenueData} />

32
apps/admin/src/components/ui/StatsCard.tsx
View File

@ -13,39 +13,39 @@ interface StatsCardProps {
export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) { export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
const colorStyles = { const colorStyles = {
blue: { blue: {
bg: "from-blue-600 via-cyan-500 to-teal-500", bg: "from-blue-700 via-cyan-500 to-blue-600",
text: "text-white", text: "text-white",
light: "from-blue-50 to-cyan-50", light: "from-blue-50 to-cyan-50",
badge: "bg-blue-100 text-blue-700", badge: "bg-blue-200/60 text-blue-900 backdrop-blur-sm",
icon: "bg-blue-100/50 text-blue-600", icon: "bg-white/20 text-white backdrop-blur-sm",
}, },
green: { green: {
bg: "from-emerald-600 via-teal-500 to-cyan-500", bg: "from-pink-700 via-fuchsia-500 to-pink-600",
text: "text-white", text: "text-white",
light: "from-emerald-50 to-teal-50", light: "from-pink-50 to-rose-50",
badge: "bg-emerald-100 text-emerald-700", badge: "bg-pink-200/60 text-pink-900 backdrop-blur-sm",
icon: "bg-emerald-100/50 text-emerald-600", icon: "bg-white/20 text-white backdrop-blur-sm",
}, },
purple: { purple: {
bg: "from-purple-600 via-pink-500 to-blue-500", bg: "from-amber-700 via-yellow-500 to-amber-600",
text: "text-white", text: "text-white",
light: "from-purple-50 to-blue-50", light: "from-amber-50 to-yellow-50",
badge: "bg-purple-100 text-purple-700", badge: "bg-amber-200/60 text-amber-900 backdrop-blur-sm",
icon: "bg-purple-100/50 text-purple-600", icon: "bg-white/20 text-white backdrop-blur-sm",
}, },
orange: { orange: {
bg: "from-orange-600 via-red-500 to-pink-500", bg: "from-emerald-700 via-teal-500 to-emerald-600",
text: "text-white", text: "text-white",
light: "from-orange-50 to-red-50", light: "from-emerald-50 to-teal-50",
badge: "bg-orange-100 text-orange-700", badge: "bg-emerald-200/60 text-emerald-900 backdrop-blur-sm",
icon: "bg-orange-100/50 text-orange-600", icon: "bg-white/20 text-white backdrop-blur-sm",
}, },
}; };
const styles = colorStyles[color]; const styles = colorStyles[color];
return ( return (
<Card className={`bg-gradient-to-br ${styles.bg} border-0 shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group h-full`}> <Card className={`bg-gradient-to-br ${styles.bg} border-0 shadow-2xl hover:shadow-2xl transition-all duration-500 overflow-hidden group h-full relative before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/10 before:to-transparent before:pointer-events-none`}>
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2.5 pt-5 px-5"> <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2.5 pt-5 px-5">
<CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}> <CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}>
{title} {title}

2
apps/mobile/src/app/(tabs)/index.tsx
View File

@ -112,7 +112,7 @@ export default function HomeScreen() {
<View style={styles.header}> <View style={styles.header}>
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}> <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<Image <Image
source={require("../../public/nextform-logo.png")} source={require("../../../public/nextform-logo.png")}
style={{ width: 40, height: 40, resizeMode: 'contain' }} style={{ width: 40, height: 40, resizeMode: 'contain' }}
/> />
<View> <View>

2
apps/mobile/src/components/ActivityWidget.tsx
View File

@ -16,7 +16,7 @@ export function ActivityWidget({ steps, calories, duration }: ActivityWidgetProp
return ( return (
<View style={styles.container}> <View style={styles.container}>
<LinearGradient <LinearGradient
colors={theme.gradients.dark} colors={['#0c4a6e', '#0369a1', '#0ea5e9']}
start={{ x: 0, y: 0 }} start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }} end={{ x: 1, y: 1 }}
style={[styles.card, theme.shadows.medium]} style={[styles.card, theme.shadows.medium]}

2
apps/mobile/src/components/HydrationWidget.tsx
View File

@ -15,7 +15,7 @@ export function HydrationWidget({ current, goal }: HydrationWidgetProps) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<LinearGradient <LinearGradient
colors={['#e0f2fe', '#dbeafe']} // Light blue background colors={['#0369a1', '#0ea5e9', '#06b6d4']}
style={[styles.card, theme.shadows.subtle]} style={[styles.card, theme.shadows.subtle]}
> >
<View style={styles.content}> <View style={styles.content}>

44
apps/mobile/src/components/PerformanceMetrics.tsx
View File

@ -16,37 +16,37 @@ interface MetricProps {
const getColorScheme = (colorScheme: 'blue' | 'green' | 'purple' | 'orange') => { const getColorScheme = (colorScheme: 'blue' | 'green' | 'purple' | 'orange') => {
const schemes = { const schemes = {
blue: { blue: {
colors: ['#1e3a8a', '#0c4a6e'], colors: ['#1e40af', '#0369a1', '#06b6d4'] as const,
text: '#ffffff', text: '#ffffff',
label: '#93c5fd', label: '#e0f2fe',
badge: '#3b82f6', badge: '#0ea5e9',
badgeText: '#ffffff', badgeText: '#ffffff',
icon: '#60a5fa', icon: '#06b6d4',
}, },
green: { green: {
colors: ['#064e3b', '#047857'], colors: ['#be185d', '#ec4899', '#f472b6'] as const,
text: '#ffffff', text: '#ffffff',
label: '#86efac', label: '#fbcfe8',
badge: '#ec4899',
badgeText: '#ffffff',
icon: '#f472b6',
},
purple: {
colors: ['#b45309', '#d97706', '#fbbf24'] as const,
text: '#ffffff',
label: '#fef3c7',
badge: '#f59e0b',
badgeText: '#ffffff',
icon: '#fbbf24',
},
orange: {
colors: ['#047857', '#059669', '#10b981'] as const,
text: '#ffffff',
label: '#d1fae5',
badge: '#10b981', badge: '#10b981',
badgeText: '#ffffff', badgeText: '#ffffff',
icon: '#34d399', icon: '#34d399',
}, },
purple: {
colors: ['#581c87', '#7c3aed'],
text: '#ffffff',
label: '#d8b4fe',
badge: '#a855f7',
badgeText: '#ffffff',
icon: '#c084fc',
},
orange: {
colors: ['#92400e', '#b45309'],
text: '#ffffff',
label: '#fcd34d',
badge: '#f97316',
badgeText: '#ffffff',
icon: '#fb923c',
},
}; };
return schemes[colorScheme]; return schemes[colorScheme];
}; };

5
apps/mobile/src/styles/theme.ts
View File

@ -64,6 +64,11 @@ export const theme = {
forest: ['#10b981', '#059669'] as const, forest: ['#10b981', '#059669'] as const,
lavender: ['#a78bfa', '#ec4899'] as const, lavender: ['#a78bfa', '#ec4899'] as const,
dark: ['#1e293b', '#0f172a'] as const, dark: ['#1e293b', '#0f172a'] as const,
// Premium metallic gradients
blueMetallic: ['#1e40af', '#06b6d4', '#10b981'] as const,
amberMetallic: ['#b45309', '#f59e0b', '#fbbf24'] as const,
magentaMetallic: ['#be185d', '#ec4899', '#f472b6'] as const,
emeraldMetallic: ['#047857', '#10b981', '#6ee7b7'] as const,
}, },
// Shadow System // Shadow System