UI: Fix streak modal, light mode contrast, state datalist, and plan mapping
This commit is contained in:
@@ -8,8 +8,10 @@ import { Activity, BrainCircuit, ArrowRight, Clock, Target, CheckCircle2, Trendi
|
||||
import * as htmlToImage from 'html-to-image'
|
||||
import { MistakeHeatmap } from "@/components/AI/MistakeHeatmap"
|
||||
import { AdaptiveStudyPlan } from "@/components/AI/AdaptiveStudyPlan"
|
||||
import { useActiveUser } from "@/hooks/useActiveUser"
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { user, hasAccessTo } = useActiveUser()
|
||||
const progressRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const handleExport = async () => {
|
||||
@@ -29,7 +31,7 @@ export default function DashboardPage() {
|
||||
return (
|
||||
<div className="p-8 max-w-6xl mx-auto space-y-10 animate-in fade-in duration-500 slide-in-from-bottom-4">
|
||||
<header className="flex justify-end mb-2">
|
||||
<Button size="lg" className="gap-2 shadow-sm bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 font-bold">
|
||||
<Button size="lg" className="gap-2 shadow-sm bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold">
|
||||
<BrainCircuit size={18} />
|
||||
Generate AI Plan
|
||||
</Button>
|
||||
@@ -133,22 +135,41 @@ export default function DashboardPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="relative opacity-60 cursor-not-allowed border-dashed">
|
||||
<CardContent className="p-5 flex items-center justify-between">
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="p-3 bg-secondary rounded-xl text-muted-foreground">
|
||||
<Lock size={20} />
|
||||
{hasAccessTo("topic-wise-microtests-unlimited") ? (
|
||||
<Card className="hover:border-primary/30 hover:shadow-md cursor-pointer transition-all duration-300 group">
|
||||
<CardContent className="p-5 flex items-center justify-between">
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="p-3 bg-secondary rounded-xl text-foreground">
|
||||
<BrainCircuit size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-base group-hover:text-primary transition-colors">Biology: Human Physiology</h3>
|
||||
<p className="text-sm text-muted-foreground mt-0.5">30 Questions • Medium Priority</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-base text-muted-foreground">Biology: Human Physiology</h3>
|
||||
<p className="text-sm text-muted-foreground mt-0.5 flex items-center gap-1"><Lock size={12}/> Pro Feature</p>
|
||||
<Button variant="outline" size="sm" className="gap-2 rounded-xl group-hover:bg-primary group-hover:text-primary-foreground group-hover:border-primary transition-all">
|
||||
Start <ArrowRight size={14} />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="relative opacity-60 cursor-not-allowed border-dashed">
|
||||
<CardContent className="p-5 flex items-center justify-between">
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="p-3 bg-secondary rounded-xl text-muted-foreground">
|
||||
<Lock size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-base text-muted-foreground">Biology: Human Physiology</h3>
|
||||
<p className="text-sm text-muted-foreground mt-0.5 flex items-center gap-1"><Lock size={12}/> Pro Feature</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" disabled className="gap-2 rounded-xl">
|
||||
Locked
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Button variant="outline" size="sm" disabled className="gap-2 rounded-xl">
|
||||
Locked
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -171,13 +192,23 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
<Button variant="secondary" className="rounded-xl font-medium">Remind Me</Button>
|
||||
</div>
|
||||
<div className="p-5 bg-secondary/50 flex items-center justify-between transition-colors hover:bg-secondary/70">
|
||||
<div>
|
||||
<h3 className="font-medium text-sm text-foreground flex items-center gap-2"><Lock size={14} className="text-muted-foreground"/> Part Test 3: Mechanics</h3>
|
||||
<p className="text-xs text-muted-foreground mt-0.5 font-medium ml-6">Oct 24, 2026</p>
|
||||
{hasAccessTo("weekly-test-series") ? (
|
||||
<div className="p-5 bg-secondary/50 flex items-center justify-between transition-colors hover:bg-secondary/70 cursor-pointer group">
|
||||
<div>
|
||||
<h3 className="font-medium text-sm text-foreground flex items-center gap-2"><Activity size={14} className="text-primary group-hover:animate-pulse"/> Part Test 3: Mechanics</h3>
|
||||
<p className="text-xs text-muted-foreground mt-0.5 font-medium ml-6">Oct 24, 2026</p>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs rounded-lg group-hover:bg-primary group-hover:text-primary-foreground group-hover:border-primary">Start <ArrowRight size={12} className="ml-1" /></Button>
|
||||
</div>
|
||||
<Badge variant="secondary" className="text-xs">Pro Only</Badge>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-5 bg-secondary/50 flex items-center justify-between transition-colors hover:bg-secondary/70 opacity-75">
|
||||
<div>
|
||||
<h3 className="font-medium text-sm text-foreground flex items-center gap-2"><Lock size={14} className="text-muted-foreground"/> Part Test 3: Mechanics</h3>
|
||||
<p className="text-xs text-muted-foreground mt-0.5 font-medium ml-6">Oct 24, 2026</p>
|
||||
</div>
|
||||
<Badge variant="secondary" className="text-xs">Pro Only</Badge>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user