Skip to content

fix : redesign upper part and make it responsive to small screens and… #1195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Muragesh-24 wants to merge 1 commit into
base: main
Choose a base branch
from
+61 −32
Open

fix : redesign upper part and make it responsive to small screens and… #1195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 33 additions & 15 deletions src/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,22 +105,40 @@ export default async function DashboardPage() {

return (
<DashboardSSEProvider>
<div className="min-h-screen bg-[var(--background)] p-4 text-[var(--foreground)] transition-colors md:p-8">
<div className="min-h-screen overflow-x-hidden bg-[var(--background)] p-4 text-[var(--foreground)] transition-colors md:p-8">
<DashboardHeader />
<div className="mb-6 flex justify-end items-center gap-2">
<Link
href="/wrapped"
className="rounded-lg border border-[var(--accent)] bg-[var(--accent-soft)] px-4 py-2 text-sm font-semibold text-[var(--accent)] hover:opacity-90 transition-opacity min-w-[140px] flex items-center justify-center"
>
Year in Code
</Link>
<Link
href="/dashboard/settings"
className="secondary-button flex min-w-[140px] items-center justify-center rounded-xl px-4 py-2 text-sm font-medium"
>
Settings
</Link>
<ExportButton />
<div className="mb-6 rounded-2xl border border-[var(--border)] bg-[var(--card)]/80 p-3 shadow-sm backdrop-blur-sm sm:p-4">
<div className="mb-3 flex items-center justify-between gap-3">
<div>
<p
className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[var(--muted-foreground)]"
style={{ fontFamily: "var(--font-jetbrains, ui-monospace, monospace)" }}
>
Quick actions
</p>
<p className="mt-1 text-sm text-[var(--muted-foreground)]">
Common dashboard tasks and exports
</p>
</div>
</div>

<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
<Link
href="/wrapped"
className="flex min-h-11 items-center justify-center rounded-xl border border-[var(--accent)] bg-[var(--accent-soft)] px-4 py-2 text-sm font-semibold text-[var(--accent)] transition-opacity hover:opacity-90"
>
Year in Code
</Link>
<Link
href="/dashboard/settings"
className="secondary-button flex min-h-11 items-center justify-center rounded-xl px-4 py-2 text-sm font-medium"
>
Settings
</Link>
<div className="col-span-2">
<ExportButton />
</div>
</div>
</div>
<StreakAtRiskBanner />

Expand Down
39 changes: 25 additions & 14 deletions src/components/DashboardHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,57 +39,68 @@ export default function DashboardHeader() {
}, [session]);

return (
<header className="mb-8 rounded-3xl border border-[var(--border)] bg-[var(--card)]/95 p-5 shadow-[var(--shadow-soft)] backdrop-blur-md transition-all duration-300 hover:shadow-[var(--shadow-medium)] md:p-6">
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-5">
<header className="relative mb-8 overflow-hidden rounded-3xl border border-[var(--border)] bg-[var(--card)]/95 p-5 shadow-[var(--shadow-soft)] backdrop-blur-md transition-all duration-300 hover:shadow-[var(--shadow-medium)] md:p-6">
<div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--accent)]/40 to-transparent" />
<div className="pointer-events-none absolute -right-10 -top-12 h-32 w-32 rounded-full bg-[var(--accent)]/10 blur-3xl" />
<div className="flex min-w-0 flex-col gap-5 md:flex-row md:items-end md:justify-between">

{/* Left Section */}
<div>
<h1 className="bg-gradient-to-r from-[var(--foreground)] via-[var(--foreground)] to-[var(--accent)] bg-clip-text text-3xl font-extrabold text-transparent md:text-4xl">
<div className="min-w-0">
<p
className="text-[11px] font-semibold uppercase tracking-[0.24em] text-[var(--muted-foreground)]"
style={{ fontFamily: "var(--font-jetbrains, ui-monospace, monospace)" }}
>
Dashboard overview
</p>
<h1 className="mt-2 bg-gradient-to-r from-[var(--foreground)] via-[var(--foreground)] to-[var(--accent)] bg-clip-text text-3xl font-extrabold text-transparent md:text-4xl">
Dashboard
</h1>
<p
className="mt-2 text-xs text-[var(--muted-foreground)]"
className="mt-2 max-w-xl text-sm leading-6 text-[var(--muted-foreground)]"
style={{ fontFamily: "var(--font-jetbrains, ui-monospace, monospace)", letterSpacing: "0.06em" }}
>
coding activity at a glance
</p>
</div>

{/* Right Section */}
<div className="flex flex-wrap items-center gap-3 w-full md:w-auto justify-center md:justify-end">
<div className="flex min-w-0 flex-col gap-3 sm:items-end">
<div className="inline-flex items-center gap-2 self-start rounded-full border border-[var(--border)] bg-[var(--card-muted)] px-3 py-1 text-[11px] font-medium text-[var(--muted-foreground)] shadow-sm sm:self-end">
<span className="h-2 w-2 rounded-full bg-emerald-500" />
Account controls
</div>

{isPublic === true && session?.githubLogin && (
<a
href={`/u/${session.githubLogin}`}
target="_blank"
rel="noopener noreferrer"
className="primary-button rounded-xl px-4 py-2 text-sm font-semibold w-full sm:w-auto text-center"
style={{ fontFamily: "var(--font-jetbrains, ui-monospace, monospace)", fontSize: 12 }}
className="primary-button inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold"
title="View your public profile"
>
Share Profile
</a>
)}

<div className="flex flex-wrap items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--card-muted)] px-2 py-1.5 sm:px-3 sm:py-2 max-w-full justify-center sm:justify-start">
<div className="grid w-full grid-cols-2 gap-2 rounded-2xl border border-[var(--border)] bg-[var(--card-muted)] p-3 shadow-sm sm:w-auto sm:grid-cols-5 sm:gap-3">

<div>
<div className="justify-self-stretch transition-transform duration-200 hover:scale-[1.02] sm:justify-self-start">
<KeyboardShortcuts />
</div>

<div className="hover:scale-110 transition-transform duration-200">
<div className="justify-self-stretch transition-transform duration-200 hover:scale-[1.02] sm:justify-self-start">
<NotificationBell />
</div>

<div className="hover:scale-110 transition-transform duration-200">
<div className="col-span-2 justify-self-stretch transition-transform duration-200 hover:scale-[1.02] sm:col-span-1 sm:justify-self-start">
<UserAvatar />
</div>

<div className="hover:rotate-12 transition-transform duration-200">
<div className="justify-self-stretch transition-transform duration-200 hover:rotate-12 sm:justify-self-start">
<ThemeToggle />
</div>

<div className="hover:scale-110 transition-transform duration-200">
<div className="col-span-2 justify-self-stretch transition-transform duration-200 hover:scale-[1.02] sm:col-span-1 sm:justify-self-start">
<SignOutButton />
</div>

Expand Down
6 changes: 3 additions & 3 deletions src/components/ExportButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -656,12 +656,12 @@ export default function ExportButton() {
};

return (
<div className="flex gap-3">
<div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row">
<button
type="button"
onClick={exportCSV}
disabled={isExportingCSV}
className="px-4 py-2 bg-[var(--control)] border border-[var(--border)] text-[var(--card-foreground)] hover:border-[var(--accent)] rounded-lg text-sm font-medium transition-colors flex items-center gap-2 disabled:opacity-50 min-w-[140px] justify-center"
className="flex w-full items-center justify-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm font-medium text-[var(--card-foreground)] transition-colors hover:border-[var(--accent)] disabled:opacity-50 sm:w-auto sm:min-w-[140px]"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
Expand All @@ -673,7 +673,7 @@ export default function ExportButton() {
type="button"
onClick={exportPDF}
disabled={isExportingPDF}
className="px-4 py-2 bg-[var(--accent)] text-[var(--accent-foreground)] hover:opacity-90 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 disabled:opacity-50 min-w-[140px] justify-center"
className="flex w-full items-center justify-center gap-2 rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-colors hover:opacity-90 disabled:opacity-50 sm:w-auto sm:min-w-[140px]"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
Expand Down
Loading