feat: add NextForm logo to admin navigation, dashboard header and mobile home screen

This commit is contained in:
Aleksandar 2025-12-11 14:24:37 +01:00
parent 8c2a3daee0
commit ad6fdc2226
5 changed files with 88 additions and 10 deletions

View File

@ -0,0 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<!-- Background shape -->
<defs>
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#2FB7E8;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0B7FB3;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Arrow/Chevron background -->
<path d="M 140 50 L 180 50 L 140 100 Z" fill="url(#logoGrad)" opacity="0.9"/>
<path d="M 60 50 L 100 100 L 60 100 Z" fill="url(#logoGrad)" opacity="0.8"/>
<!-- Dumbbell icon -->
<g transform="translate(70, 80)">
<!-- Left weight -->
<rect x="0" y="15" width="8" height="30" fill="white" rx="2"/>
<circle cx="4" cy="12" r="6" fill="white"/>
<circle cx="4" cy="48" r="6" fill="white"/>
<!-- Bar -->
<rect x="10" y="20" width="20" height="8" fill="white" rx="2"/>
<!-- Right weight -->
<rect x="32" y="15" width="8" height="30" fill="white" rx="2"/>
<circle cx="36" cy="12" r="6" fill="white"/>
<circle cx="36" cy="48" r="6" fill="white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -51,11 +51,18 @@ export default function Home() {
{/* Hero Section */}
<div className="pt-8 pb-4">
<div className="space-y-3">
<div className="flex items-center gap-3">
<div className="h-12 w-1 bg-gradient-to-b from-blue-600 to-cyan-600 rounded-full"></div>
<h1 className="text-5xl font-black bg-gradient-to-r from-blue-600 via-blue-700 to-cyan-600 bg-clip-text text-transparent">
FitAI Dashboard
</h1>
<div className="flex items-center gap-4">
<img
src="/nextform-logo.svg"
alt="NextForm"
className="h-12 w-12"
/>
<div className="flex items-center gap-3">
<div className="h-12 w-1 bg-gradient-to-b from-blue-600 to-cyan-600 rounded-full"></div>
<h1 className="text-5xl font-black bg-gradient-to-r from-blue-600 via-blue-700 to-cyan-600 bg-clip-text text-transparent">
NextForm Dashboard
</h1>
</div>
</div>
<p className="text-lg text-gray-600 ml-4">Performance metrics & athlete insights</p>
</div>

View File

@ -52,9 +52,16 @@ export function Navigation(): ReactElement {
{/* Logo */}
<Link
href="/"
className="text-xl font-bold text-[#FF0000] hover:text-[#00FF00] transition-colors"
className="flex items-center gap-2 hover:opacity-80 transition-opacity"
>
FitAI
<img
src="/nextform-logo.svg"
alt="NextForm"
className="h-8 w-8"
/>
<span className="text-lg font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">
NextForm
</span>
</Link>
{/* Navigation Items */}

View File

@ -0,0 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<!-- Background shape -->
<defs>
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#2FB7E8;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0B7FB3;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Arrow/Chevron background -->
<path d="M 140 50 L 180 50 L 140 100 Z" fill="url(#logoGrad)" opacity="0.9"/>
<path d="M 60 50 L 100 100 L 60 100 Z" fill="url(#logoGrad)" opacity="0.8"/>
<!-- Dumbbell icon -->
<g transform="translate(70, 80)">
<!-- Left weight -->
<rect x="0" y="15" width="8" height="30" fill="white" rx="2"/>
<circle cx="4" cy="12" r="6" fill="white"/>
<circle cx="4" cy="48" r="6" fill="white"/>
<!-- Bar -->
<rect x="10" y="20" width="20" height="8" fill="white" rx="2"/>
<!-- Right weight -->
<rect x="32" y="15" width="8" height="30" fill="white" rx="2"/>
<circle cx="36" cy="12" r="6" fill="white"/>
<circle cx="36" cy="48" r="6" fill="white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -110,9 +110,15 @@ export default function HomeScreen() {
>
{/* Header Section */}
<View style={styles.header}>
<View>
<Text style={styles.greeting}>{getGreeting()},</Text>
<Text style={styles.name}>{user?.firstName || "Athlete"}</Text>
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<Image
source={require("../../public/nextform-logo.svg")}
style={{ width: 32, height: 32 }}
/>
<View>
<Text style={styles.greeting}>{getGreeting()},</Text>
<Text style={styles.name}>{user?.firstName || "Athlete"}</Text>
</View>
</View>
<View style={styles.avatarContainer}>
{user?.imageUrl ? (