Small visual ui changes to member dash

KnightHacks · Mar 1, 2025 · 97a66f5 · 97a66f5
1 parent 167f3a3
commit 97a66f5
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 29 deletions.
diff --git a/apps/blade/src/app/_components/navigation/user-qr-code.tsx b/apps/blade/src/app/_components/navigation/user-qr-code.tsx
@@ -38,7 +38,7 @@ export function QRCodePopup() {
       <DialogTrigger asChild>
         <Button size="sm" className="gap-2">
           <QrCode className="h-4 w-4" />
-          <span>Show QR Code</span>
+          <span>View QR Code</span>
         </Button>
       </DialogTrigger>
       <DialogContent className="!max-h-[96vw] !max-w-[96vw] overflow-y-auto">

diff --git a/apps/blade/src/app/admin/events/_components/event-details.tsx b/apps/blade/src/app/admin/events/_components/event-details.tsx
@@ -48,10 +48,20 @@ export function EventDetailsButton({ event }: { event: ReturnEvent }) {
         </DialogHeader>
         <div className="space-y-2">
           <div className="flex items-center gap-2">
-            <CalendarDays className="h-4 w-4 text-gray-500" />
-            <div className="flex flex-col">
-              <span>Start: {formatDateTime(event.start_datetime)}</span>
-              <span>End: {formatDateTime(event.end_datetime)}</span>
+            <div className="flex w-full max-w-md gap-x-10 gap-y-2 pl-1">
+              <div className="flex flex-col items-start">
+                <span className="text-sm font-medium text-gray-600">Start</span>
+                <span className="mt-1 font-medium">
+                  {formatDateTime(event.start_datetime)}
+                </span>
+              </div>
+
+              <div className="flex flex-col items-start">
+                <span className="text-sm font-medium text-gray-600">End</span>
+                <span className="mt-1 font-medium">
+                  {formatDateTime(event.end_datetime)}
+                </span>
+              </div>
             </div>
           </div>
           <div className="flex items-center gap-2">

diff --git a/apps/blade/src/app/dashboard/_components/member-dashboard/event/event-showcase.tsx b/apps/blade/src/app/dashboard/_components/member-dashboard/event/event-showcase.tsx
@@ -1,4 +1,4 @@
-import { CalendarDays, MapPin, Star, Users } from "lucide-react";
+import { History, MapPin, Star, Users } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 
 import type { InsertMember } from "@forge/db/schemas/knight-hacks";
@@ -42,10 +42,7 @@ export function EventShowcase({
           <CardTitle className="text-sm font-medium">
             Recent Event Attended
           </CardTitle>
-          <CalendarDays
-            color="hsl(263.4 70% 50.4%)"
-            size={DASHBOARD_ICON_SIZE}
-          />
+          <History color="hsl(263.4 70% 50.4%)" size={DASHBOARD_ICON_SIZE} />
         </CardHeader>
         <CardHeader>
           <CardTitle>No events found</CardTitle>
@@ -61,7 +58,7 @@ export function EventShowcase({
         <CardTitle className="text-sm font-medium">
           Recent Event Attended
         </CardTitle>
-        <CalendarDays color="hsl(263.4 70% 50.4%)" size={DASHBOARD_ICON_SIZE} />
+        <History color="hsl(263.4 70% 50.4%)" size={DASHBOARD_ICON_SIZE} />
       </CardHeader>
       <CardHeader>
         <div className="flex flex-col items-start justify-between sm:flex-row">
@@ -81,10 +78,20 @@ export function EventShowcase({
       <CardContent>
         <div className="space-y-4">
           <div className="flex items-center gap-2">
-            <CalendarDays className="h-5 w-5 text-gray-500" />
-            <div className="flex flex-col">
-              <span>Start: {formatDateTime(mostRecent.start_datetime)}</span>
-              <span>End: {formatDateTime(mostRecent.end_datetime)}</span>
+            <div className="flex w-full max-w-md gap-x-10 gap-y-2 pl-1">
+              <div className="flex flex-col items-start">
+                <span className="text-sm font-medium text-gray-600">Start</span>
+                <span className="mt-1 font-medium">
+                  {formatDateTime(mostRecent.start_datetime)}
+                </span>
+              </div>
+
+              <div className="flex flex-col items-start">
+                <span className="text-sm font-medium text-gray-600">End</span>
+                <span className="mt-1 font-medium">
+                  {formatDateTime(mostRecent.end_datetime)}
+                </span>
+              </div>
             </div>
           </div>
           <div className="flex items-center gap-2">
@@ -143,12 +150,24 @@ export function EventShowcase({
                   <CardContent>
                     <div className="space-y-2">
                       <div className="flex items-center gap-2">
-                        <CalendarDays className="h-4 w-4 text-gray-500" />
-                        <div className="flex flex-col">
-                          <span>
-                            Start: {formatDateTime(event.start_datetime)}
-                          </span>
-                          <span>End: {formatDateTime(event.end_datetime)}</span>
+                        <div className="flex w-full max-w-md gap-x-10 gap-y-2 pl-1">
+                          <div className="flex flex-col items-start">
+                            <span className="text-sm font-medium text-gray-600">
+                              Start
+                            </span>
+                            <span className="mt-1 font-medium">
+                              {formatDateTime(mostRecent.start_datetime)}
+                            </span>
+                          </div>
+
+                          <div className="flex flex-col items-start">
+                            <span className="text-sm font-medium text-gray-600">
+                              End
+                            </span>
+                            <span className="mt-1 font-medium">
+                              {formatDateTime(mostRecent.end_datetime)}
+                            </span>
+                          </div>
                         </div>
                       </div>
                       <div className="flex items-center gap-2">

diff --git a/apps/blade/src/app/dashboard/_components/member-dashboard/info.tsx b/apps/blade/src/app/dashboard/_components/member-dashboard/info.tsx
@@ -14,7 +14,7 @@ export function MemberInfo() {
         <Info color="hsl(263.4 70% 50.4%)" size={DASHBOARD_ICON_SIZE} />
       </CardHeader>
       <CardContent>
-        <div className="grid gap-4 md:grid-cols-1 lg:grid-cols-2">
+        <div className="grid grid-cols-1 gap-4">
           <ResumeButton />
           <QRCodePopup />
         </div>

diff --git a/apps/blade/src/app/dashboard/_components/member-dashboard/member-dashboard.tsx b/apps/blade/src/app/dashboard/_components/member-dashboard/member-dashboard.tsx
@@ -56,9 +56,7 @@ export default async function MemberDashboard({
             <EventNumber size={events.value.length} />
           </div>
           <div className="grid gap-4 md:grid-cols-2">
-            <div>
-              <MemberInfo />
-            </div>
+            <MemberInfo />
             <EventShowcase events={events.value} member={member} />
           </div>
         </div>

diff --git a/apps/blade/src/app/dashboard/_components/member-dashboard/resume-button.tsx b/apps/blade/src/app/dashboard/_components/member-dashboard/resume-button.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { Download } from "lucide-react";
 
 import { Button } from "@forge/ui/button";
 
@@ -9,16 +10,16 @@ export async function ResumeButton() {
 
   if (resume.url == null) {
     return (
-      <Button size="sm" className="w-full" disabled>
-        Resume
+      <Button size="sm" className="w-full gap-1" disabled>
+        <Download className="h-4 w-4" /> <span>Download Resume</span>
       </Button>
     );
   }
 
   return (
     <Link href={resume.url} className="w-full">
-      <Button size="sm" className="w-full">
-        Resume
+      <Button size="sm" className="w-full gap-1">
+        <Download className="h-4 w-4" /> <span>Download Resume</span>
       </Button>
     </Link>
   );