tknuth/QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Onboarding verbessern

Browse Source
This commit is contained in:
Timo Knuth
2026-04-23 19:24:33 +02:00
parent eacaef1fbd
commit c6f20f7f0b
5 changed files with 10 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/(main)/(app)/dashboard/page.tsx
View File

@@ -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>
) : (

23
src/app/(main)/onboarding/OnboardingClient.tsx
View File

@@ -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">

18
src/components/dashboard/OnboardingChecklist.tsx
View File

@@ -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"

2
src/components/dashboard/QRCodeCard.tsx
View File

@@ -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>

2
src/components/dashboard/StatsGrid.tsx
View File

@@ -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>