From c6f20f7f0be8faa9504fc8869104fe5ef7b495cb Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuthtimo@gmail.com>
Date: Thu, 23 Apr 2026 19:24:33 +0200
Subject: [PATCH] Onboarding verbessern

---
 src/app/(main)/(app)/dashboard/page.tsx       |  6 ++---
 .../(main)/onboarding/OnboardingClient.tsx    | 23 -------------------
 .../dashboard/OnboardingChecklist.tsx         | 18 ++++-----------
 src/components/dashboard/QRCodeCard.tsx       |  2 +-
 src/components/dashboard/StatsGrid.tsx        |  2 +-
 5 files changed, 10 insertions(+), 41 deletions(-)

diff --git a/src/app/(main)/(app)/dashboard/page.tsx b/src/app/(main)/(app)/dashboard/page.tsx
index 2d8928e..0e80299 100644
--- a/src/app/(main)/(app)/dashboard/page.tsx
+++ b/src/app/(main)/(app)/dashboard/page.tsx
@@ -338,7 +338,7 @@ export default function DashboardPage() {
           </Badge>
           {userPlan === 'FREE' && (
             <Link href="/pricing">
-              <Button className="bg-slate-900 text-white hover:bg-slate-800">Upgrade</Button>
+              <Button className="bg-primary-600 text-white hover:bg-primary-700">Upgrade</Button>
             </Link>
           )}
         </div>
@@ -371,7 +371,7 @@ export default function DashboardPage() {
               </Button>
             )}
             <Link href="/create">
-              <Button className="bg-slate-900 text-white hover:bg-slate-800">Create New QR Code</Button>
+              <Button className="bg-primary-600 text-white hover:bg-primary-700">Create New QR Code</Button>
             </Link>
           </div>
         </div>
@@ -401,7 +401,7 @@ export default function DashboardPage() {
               You have {FREE_DYNAMIC_QR_LIMIT} free dynamic QR codes. They redirect wherever you want and track every scan.
             </p>
             <Link href="/create">
-              <Button className="bg-slate-900 text-white hover:bg-slate-800">Create QR Code — it takes 90 seconds</Button>
+              <Button className="bg-primary-600 text-white hover:bg-primary-700">Create QR Code — it takes 90 seconds</Button>
             </Link>
           </div>
         ) : (
diff --git a/src/app/(main)/onboarding/OnboardingClient.tsx b/src/app/(main)/onboarding/OnboardingClient.tsx
index 66e1246..315099b 100644
--- a/src/app/(main)/onboarding/OnboardingClient.tsx
+++ b/src/app/(main)/onboarding/OnboardingClient.tsx
@@ -622,29 +622,6 @@ export default function OnboardingClient() {
             <div className="h-full rounded-full bg-slate-900 transition-all duration-300" style={{ width: `${progress}%` }} />
           </div>
 
-          <div className="mt-4 grid grid-cols-4 gap-2 sm:grid-cols-8">
-            {stepLabels.map((label, index) => {
-              const stepNumber = index + 1;
-              const isCurrent = stepNumber === step;
-              const isDone = stepNumber < step;
-
-              return (
-                <div
-                  key={label}
-                  className={`rounded-2xl border px-2 py-3 text-center text-xs font-medium transition-colors ${
-                    isCurrent
-                      ? 'border-slate-900 bg-slate-900 text-white'
-                      : isDone
-                        ? 'border-slate-300 bg-slate-100 text-slate-700'
-                        : 'border-slate-200 bg-white text-slate-400'
-                  }`}
-                >
-                  <div className="mb-1 text-[11px] font-semibold">{stepNumber}</div>
-                  <div className="truncate">{label}</div>
-                </div>
-              );
-            })}
-          </div>
         </section>
 
         <section className="mt-6 rounded-[28px] border border-slate-200 bg-white p-5 text-slate-900 shadow-[0_20px_60px_-48px_rgba(15,23,42,0.45)] sm:p-8">
diff --git a/src/components/dashboard/OnboardingChecklist.tsx b/src/components/dashboard/OnboardingChecklist.tsx
index 0d53ec4..ced4949 100644
--- a/src/components/dashboard/OnboardingChecklist.tsx
+++ b/src/components/dashboard/OnboardingChecklist.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { ArrowRight, X } from 'lucide-react';
+import { X } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Card, CardContent } from '@/components/ui/Card';
 import { appendRedirectParam } from '@/lib/auth-flow';
@@ -89,7 +89,7 @@ export function OnboardingChecklist({ state }: OnboardingChecklistProps) {
             </p>
           </div>
           <div className="flex items-center gap-3">
-            <div className="rounded-full border border-slate-200 px-3 py-1 text-xs font-semibold text-slate-600">
+            <div className="rounded-full border border-primary-200 bg-primary-50 px-3 py-1 text-xs font-semibold text-primary-700">
               {completed}/{items.length}
             </div>
             <button
@@ -109,7 +109,7 @@ export function OnboardingChecklist({ state }: OnboardingChecklistProps) {
         <div className="space-y-3">
           <div className="h-1.5 overflow-hidden rounded-full bg-slate-100">
             <div
-              className="h-full rounded-full bg-slate-900 transition-all duration-300"
+              className="h-full rounded-full bg-primary-600 transition-all duration-300"
               style={{ width: `${progress}%` }}
             />
           </div>
@@ -122,8 +122,8 @@ export function OnboardingChecklist({ state }: OnboardingChecklistProps) {
                 })}
                 className={`rounded-full border px-3 py-2 text-center text-xs font-medium transition-colors ${
                   item.done
-                    ? 'border-slate-900 bg-slate-900 text-white'
-                    : 'border-slate-200 bg-slate-50 text-slate-500 hover:border-slate-300 hover:text-slate-700'
+                    ? 'border-primary-600 bg-primary-600 text-white'
+                    : 'border-slate-200 bg-slate-50 text-slate-500 hover:border-primary-200 hover:bg-primary-50 hover:text-primary-700'
                 }`}
               >
                 {index + 1}. {item.label}
@@ -133,14 +133,6 @@ export function OnboardingChecklist({ state }: OnboardingChecklistProps) {
         </div>
 
         <div className="flex flex-col gap-3 sm:flex-row">
-          {!allDone && (
-            <Link href="/onboarding" className="block">
-              <Button className="h-11 rounded-2xl bg-slate-900 px-5 text-sm font-semibold text-white hover:bg-slate-800">
-                Continue onboarding
-                <ArrowRight className="ml-2 h-4 w-4" />
-              </Button>
-            </Link>
-          )}
           <Button
             variant="outline"
             className="h-11 rounded-2xl border-slate-300 px-5 text-sm font-semibold text-slate-700"
diff --git a/src/components/dashboard/QRCodeCard.tsx b/src/components/dashboard/QRCodeCard.tsx
index 70500b4..830572c 100644
--- a/src/components/dashboard/QRCodeCard.tsx
+++ b/src/components/dashboard/QRCodeCard.tsx
@@ -206,7 +206,7 @@ END:VCARD`;
           <div className="flex-1">
             <h3 className="font-semibold text-gray-900 mb-1">{qr.title}</h3>
             <div className="flex items-center space-x-2">
-              <Badge className={qr.type === 'DYNAMIC' ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-700'}>
+              <Badge className={qr.type === 'DYNAMIC' ? 'bg-primary-600 text-white' : 'bg-slate-100 text-slate-700'}>
                 {qr.type}
               </Badge>
             </div>
diff --git a/src/components/dashboard/StatsGrid.tsx b/src/components/dashboard/StatsGrid.tsx
index 797da4b..d9364d2 100644
--- a/src/components/dashboard/StatsGrid.tsx
+++ b/src/components/dashboard/StatsGrid.tsx
@@ -96,7 +96,7 @@ export const StatsGrid: React.FC<StatsGridProps> = ({ stats, trends }) => {
                   {card.change}
                 </p>
               </div>
-              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 text-slate-700">
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary-50 text-primary-600">
                 {card.icon}
               </div>
             </div>