Skip to content

[WIP] Add theming to hacker dashboard #466

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
DGoel1602 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

[WIP] Add theming to hacker dashboard #466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
18f7e36
add schema to the db for colors and image, pdate api and basic editin…
DGoel1602 Jun 11, 2026
dd28e9f
fix manager frontend bugs, apply the actual themes on the dashboard
DGoel1602 Jun 11, 2026
24c7b4a
format
DGoel1602 Jun 11, 2026
a505285
rem bad file
DGoel1602 Jun 12, 2026
008a4ec
apply background image and add background colors instead of harcoding…
DGoel1602 Jun 12, 2026
a7b499d
format
DGoel1602 Jun 12, 2026
1f95bc3
typecheck
DGoel1602 Jun 12, 2026
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
121 changes: 121 additions & 0 deletions apps/blade/src/app/_components/admin/hackathon/manage/hackathon-manager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,13 @@ const formSchema = z
theme: hackathonThemeSchema,
applicationBackgroundEnabled: z.boolean(),
applicationBackgroundKey: hackathonApplicationBackgroundKeySchema,
backgroundImageName: z.string().optional(),
backgroundColorEnabled: z.boolean(),
backgroundColor: z.string().optional(),
foregroundColorEnabled: z.boolean(),
foregroundColor: z.string().optional(),
accentColorEnabled: z.boolean(),
accentColor: z.string().optional(),
emailTemplateEnabled: z.boolean(),
emailTemplateKey: hackathonEmailTemplateKeySchema,
applicationOpen: z.string().min(1, "Application open is required."),
Expand Down Expand Up @@ -195,6 +202,13 @@ function getDefaultValues(
applicationBackgroundKey: getSafeBackgroundKey(
hackathon.applicationBackgroundKey,
),
backgroundImageName: hackathon.backgroundImageName ?? undefined,
backgroundColorEnabled: !!hackathon.backgroundColor,
backgroundColor: hackathon.backgroundColor ?? "#ffffff",
foregroundColorEnabled: !!hackathon.foregroundColor,
foregroundColor: hackathon.foregroundColor ?? "#000000",
accentColorEnabled: !!hackathon.accentColor,
accentColor: hackathon.accentColor ?? "#ff0000",
emailTemplateEnabled: hackathon.emailTemplateEnabled,
emailTemplateKey: getSafeEmailTemplateKey(hackathon.emailTemplateKey),
applicationOpen: toDateTimeLocalValue(hackathon.applicationOpen),
Expand All @@ -221,6 +235,13 @@ function getDefaultValues(
theme: "",
applicationBackgroundEnabled: false,
applicationBackgroundKey: DEFAULT_BACKGROUND_KEY,
backgroundImageName: undefined,
backgroundColorEnabled: false,
backgroundColor: "#ffffff",
foregroundColorEnabled: false,
foregroundColor: "#000000",
accentColorEnabled: false,
accentColor: "#ff0000",
emailTemplateEnabled: false,
emailTemplateKey: DEFAULT_EMAIL_TEMPLATE_KEY,
applicationOpen: toDateTimeLocalValue(applicationOpen),
Expand All @@ -246,6 +267,14 @@ function toMutationPayload(values: HackathonFormValues) {
emailTemplateKey: values.emailTemplateEnabled
? (values.emailTemplateKey as EmailTemplateKey | undefined)
: null,
backgroundImageName: values.backgroundImageName ?? null,
backgroundColor: values.backgroundColorEnabled
? values.backgroundColor
: null,
foregroundColor: values.foregroundColorEnabled
? values.foregroundColor
: null,
accentColor: values.accentColorEnabled ? values.accentColor : null,
applicationOpen: new Date(values.applicationOpen),
applicationDeadline: new Date(values.applicationDeadline),
confirmationDeadline: new Date(values.confirmationDeadline),
Expand Down Expand Up @@ -618,6 +647,98 @@ export function HackathonManager() {
/>
</div>

<div className="space-y-4 rounded-lg border p-4">
<h3 className="font-medium">Visuals</h3>
<FormField
control={form.control}
name="backgroundImageName"
render={({ field }) => (
<FormItem>
<FormLabel>Background Image Name</FormLabel>
<FormControl>
<Input
placeholder="site/name.png"
{...field}
value={field.value ?? ""}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="grid grid-cols-3 gap-4">
<FormField
control={form.control}
name="backgroundColorEnabled"
render={({ field }) => (
<FormItem className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
<FormLabel>Background</FormLabel>
</div>
<FormControl>
<Input
type="color"
disabled={!field.value}
{...form.register("backgroundColor")}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="foregroundColorEnabled"
render={({ field }) => (
<FormItem className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
<FormLabel>Foreground</FormLabel>
</div>
<FormControl>
<Input
type="color"
disabled={!field.value}
{...form.register("foregroundColor")}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="accentColorEnabled"
render={({ field }) => (
<FormItem className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
<FormLabel>Accent</FormLabel>
</div>
<FormControl>
<Input
type="color"
disabled={!field.value}
{...form.register("accentColor")}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
</div>

<div className="space-y-4 rounded-lg border p-4">
<FormField
control={form.control}
Expand Down
119 changes: 59 additions & 60 deletions apps/blade/src/app/_components/dashboard/hacker-dashboard/hacker-dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { api } from "~/trpc/server";
import { HackerData } from "./hacker-data";
import { HackerResumeButton } from "./hacker-resume-button";
import { PastHackathonButton } from "./past-hackathons";
import { HackathonThemeApplier } from "./theme-applier";

export const metadata: Metadata = {
title: "Hacker Dashboard",
Expand All @@ -24,74 +25,72 @@ export default async function HackerDashboard({

const currentHackathon = await api.hackathon.getCurrentHackathon();

if (!hacker) {
return (
<div className="flex flex-col items-center justify-center gap-y-6 text-xl font-semibold">
<p className="w-full max-w-xl text-center text-2xl">
Register for Knight Hacks today!
</p>
<div className="flex flex-wrap justify-center gap-5">
{
//if there is no current hackathon then this page is never rendered anyway
currentHackathon && (
<HackerAppCard hackathonName={currentHackathon.name} />
)
}
</div>
</div>
);
}

return (
<>
<div className="animate-fade-in mb-8">
<h2 className="text-xl font-bold tracking-tight">
Hello, {hacker.firstName}!
</h2>
<p className="text-muted-foreground">Hackathon Dashboard</p>
</div>
<div className="animate-mobile-initial-expand relative mx-auto flex h-0 bg-[#E5E7EB] dark:bg-[#0A0F1D] sm:py-0 sm:pb-0 lg:max-h-56">
{/* Main content */}
<HackerData data={hacker} />
<HackathonThemeApplier hackathon={currentHackathon} />
{!hacker ? (
<div className="flex flex-col items-center justify-center gap-y-6 text-xl font-semibold">
<p className="w-full max-w-xl text-center text-2xl">
Register for Knight Hacks today!
</p>
<div className="flex flex-wrap justify-center gap-5">
{currentHackathon && (
<HackerAppCard hackathonName={currentHackathon.name} />
)}
</div>
</div>
) : (
<>
<div className="animate-fade-in mb-8">
<h2 className="text-xl font-bold tracking-tight">
Hello, {hacker.firstName}!
</h2>
<p className="text-muted-foreground">Hackathon Dashboard</p>
</div>
<div className="animate-mobile-initial-expand relative mx-auto flex h-0 bg-background sm:py-0 sm:pb-0 lg:max-h-56">
{/* Main content */}
<HackerData data={hacker} />

{/* Transparent Triangle overlay in bottom right corner */}
<div className="border-b-solid border-l-solid absolute bottom-0 right-0 h-0 w-0 border-b-[30px] border-l-[30px] border-b-background border-l-transparent"></div>
{/* Transparent Triangle overlay in bottom right corner */}
<div className="border-b-solid border-l-solid absolute bottom-0 right-0 h-0 w-0 border-b-[30px] border-l-[30px] border-b-background border-l-transparent"></div>

{/* Triangle in bottom right corner */}
<div
className="absolute bottom-0 right-0 h-0 w-0"
style={{
borderBottom: "20px solid #6C26D9", // Change to bg color
borderLeft: "20px solid transparent",
}}
></div>
{/* Triangle in bottom right corner */}
<div
className="absolute bottom-0 right-0 h-0 w-0"
style={{
borderBottom: "20px solid var(--hackathon-bg-color, #6C26D9)", // Changed to CSS variable
borderLeft: "20px solid transparent",
}}
></div>

{/* Top rectangle */}
<div className="absolute -top-[1.4rem] right-0 h-6 w-40 bg-[#E5E7EB] dark:bg-[#0A0F1D] sm:w-96">
<div className="border-t-solid border-r-solid absolute left-0 top-0 h-0 w-0 border-r-[23px] border-t-[23px] border-r-transparent border-t-background"></div>
</div>
{/* Top rectangle */}
<div className="absolute -top-[1.4rem] right-0 h-6 w-40 bg-primary sm:w-96">
<div className="border-t-solid border-r-solid absolute left-0 top-0 h-0 w-0 border-r-[23px] border-t-[23px] border-r-transparent border-t-background"></div>
</div>

{/* Bottom rectangle */}
<div className="absolute -bottom-[1.46rem] left-0 h-6 w-40 bg-[#E5E7EB] dark:bg-[#0A0F1D] sm:w-48">
<div className="border-b-solid border-l-solid absolute bottom-0 right-0 h-0 w-0 border-b-[24px] border-l-[24px] border-b-background border-l-transparent"></div>
</div>
{/* Bottom rectangle */}
<div className="absolute -bottom-[1.46rem] left-0 h-6 w-40 bg-primary sm:w-48">
<div className="border-b-solid border-l-solid absolute bottom-0 right-0 h-0 w-0 border-b-[24px] border-l-[24px] border-b-background border-l-transparent"></div>
</div>

{/* Left side rectangle */}
<div className="absolute -left-3 top-0 h-full w-[0.4rem] bg-primary"></div>
</div>
<div className="mx-auto mb-10 mt-20 flex flex-col justify-center gap-x-2 gap-y-4 sm:flex-row">
{resume.status === "rejected" ||
pastHackathons.status === "rejected" ? (
<div className="font-bold">
Something went wrong. Please try again later.
{/* Left side rectangle */}
<div className="absolute -left-3 top-0 h-full w-[0.4rem] bg-primary"></div>
</div>
<div className="mx-auto mb-10 mt-20 flex flex-col justify-center gap-x-2 gap-y-4 sm:flex-row">
{resume.status === "rejected" ||
pastHackathons.status === "rejected" ? (
<div className="font-bold">
Something went wrong. Please try again later.
</div>
) : (
<>
<PastHackathonButton hackathons={pastHackathons.value} />
<HackerResumeButton resume={resume.value} />
</>
)}
</div>
) : (
<>
<PastHackathonButton hackathons={pastHackathons.value} />
<HackerResumeButton resume={resume.value} />
</>
)}
</div>
</>
)}
</>
);
}
4 changes: 2 additions & 2 deletions apps/blade/src/app/_components/dashboard/hacker-dashboard/hacker-resume-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export function HackerResumeButton({
if (!resume.url) {
return (
<Link className="w-full" href={"/settings/hacker-profile"}>
<div className="relative flex h-14 w-full cursor-pointer items-center justify-center gap-x-2 border border-[#1F2937] transition-all duration-200 ease-in-out hover:bg-[#E5E7EB] dark:hover:bg-[#1F2937]">
<div className="relative flex h-14 w-full cursor-pointer items-center justify-center gap-x-2 border border-[#1F2937] bg-background transition-all duration-200 ease-in-out hover:bg-[#E5E7EB] dark:hover:bg-[#1F2937]">
<Upload />
<div className="text-lg font-bold">Upload Resume</div>
</div>
Expand All @@ -21,7 +21,7 @@ export function HackerResumeButton({

return (
<Link href={resume.url} className="w-full">
<div className="relative flex h-14 w-full cursor-pointer items-center justify-center gap-x-2 border border-[#1F2937] transition-all duration-200 ease-in-out hover:bg-[#E5E7EB] dark:hover:bg-[#1F2937]">
<div className="relative flex h-14 w-full cursor-pointer items-center justify-center gap-x-2 border border-[#1F2937] bg-background transition-all duration-200 ease-in-out hover:bg-[#E5E7EB] dark:hover:bg-[#1F2937]">
<Download />
<div className="text-lg font-bold">Download Resume</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/blade/src/app/_components/dashboard/hacker-dashboard/past-hackathons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { time } from "@forge/utils";
import type { api } from "~/trpc/server";

const triggerClassName =
"relative flex h-14 w-full cursor-pointer items-center justify-center gap-x-2 border border-[#1F2937] bg-transparent transition-all duration-200 ease-in-out hover:bg-[#E5E7EB] dark:hover:bg-[#1F2937]";
"relative flex h-14 w-full cursor-pointer items-center justify-center gap-x-2 border border-[#1F2937] bg-background transition-all duration-200 ease-in-out hover:bg-[#E5E7EB] dark:hover:bg-[#1F2937]";

export function PastHackathonButton({
hackathons,
Expand Down
Loading
Loading