Merge pull request #28 from tnamdevnote/style/polish-my-appointments

[Style] Adjust spacing on My Appointments page
tnamdevnote · May 14, 2024 · 6b6c57c · 6b6c57c
2 parents 70fc724 + e0ff6d5
commit 6b6c57c
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 29 deletions.
diff --git a/app/(protected)/my-appointments/components/appointmentList/appointmentList.tsx b/app/(protected)/my-appointments/components/appointmentList/appointmentList.tsx
@@ -5,17 +5,41 @@ import Appointments from "./appointments";
 
 function LoadingSkeleton({ className }: { className?: string }) {
   return (
-    <Card className={className}>
-      <CardContent className="flex flex-col gap-4">
-        <Skeleton className="h-4 w-1/2" />
-        <Skeleton className="h-4 w-1/2" />
-        <Skeleton className="h-4 w-1/2" />
-      </CardContent>
-      <CardFooter className="inline-flex justify-end gap-4">
-        <Skeleton className="h-8 w-32" />
-        <Skeleton className="h-8 w-32" />
-      </CardFooter>
-    </Card>
+    <div className="flex w-full flex-col gap-8">
+      <Card className={className}>
+        <CardContent className="flex flex-col gap-4">
+          <Skeleton className="h-4 w-1/2" />
+          <Skeleton className="h-4 w-1/2" />
+          <Skeleton className="h-4 w-1/2" />
+        </CardContent>
+        <CardFooter className="inline-flex justify-end gap-4">
+          <Skeleton className="h-8 w-32" />
+          <Skeleton className="h-8 w-32" />
+        </CardFooter>
+      </Card>
+      <Card className={className}>
+        <CardContent className="flex flex-col gap-4">
+          <Skeleton className="h-4 w-1/2" />
+          <Skeleton className="h-4 w-1/2" />
+          <Skeleton className="h-4 w-1/2" />
+        </CardContent>
+        <CardFooter className="inline-flex justify-end gap-4">
+          <Skeleton className="h-8 w-32" />
+          <Skeleton className="h-8 w-32" />
+        </CardFooter>
+      </Card>
+      <Card className={className}>
+        <CardContent className="flex flex-col gap-4">
+          <Skeleton className="h-4 w-1/2" />
+          <Skeleton className="h-4 w-1/2" />
+          <Skeleton className="h-4 w-1/2" />
+        </CardContent>
+        <CardFooter className="inline-flex justify-end gap-4">
+          <Skeleton className="h-8 w-32" />
+          <Skeleton className="h-8 w-32" />
+        </CardFooter>
+      </Card>
+    </div>
   );
 }
 
@@ -25,11 +49,9 @@ export function AppointmentList() {
       className="mt-8 flex justify-center md:mt-16"
       aria-labelledby="upcoming appointments"
     >
-      <div className="max-w-screen-m flex-shrink-0">
-        <Suspense fallback={<LoadingSkeleton />}>
-          <Appointments />
-        </Suspense>
-      </div>
+      <Suspense fallback={<LoadingSkeleton />}>
+        <Appointments />
+      </Suspense>
     </section>
   );
 }
diff --git a/app/(protected)/my-appointments/components/appointmentList/appointments.tsx b/app/(protected)/my-appointments/components/appointmentList/appointments.tsx
@@ -33,7 +33,7 @@ export default async function Appointments() {
   return (
     <>
       {appointments.map((appointment) => (
-        <Card key={appointment.id}>
+        <Card key={appointment.id} className="w-full min-w-0 shadow-lg">
           <CardContent className="flex flex-col gap-4">
             <p className="inline-flex gap-2 text-base font-bold">
               <CalendarIcon />
@@ -74,7 +74,10 @@ export default async function Appointments() {
             <EditDialog
               appointment={appointment}
               trigger={
-                <Button size="sm" className="flex-1 md:w-32 md:flex-none">
+                <Button
+                  size="sm"
+                  className="flex-1 bg-primary-10 text-primary-100 hover:bg-primary-10/50 md:w-32 md:flex-none"
+                >
                   Edit
                 </Button>
               }

diff --git a/app/(protected)/my-appointments/components/newAppointmentDialog/newAppointmentDialog.tsx b/app/(protected)/my-appointments/components/newAppointmentDialog/newAppointmentDialog.tsx
@@ -33,7 +33,7 @@ export default function NewAppointmentDialog() {
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogTrigger asChild>
           <Button
-            className="hidden md:absolute md:right-16 md:top-0 md:flex"
+            className="hidden shadow-md shadow-primary-100 md:absolute md:right-16 md:top-32 md:flex"
             icon={<PlusIcon />}
           >
             New Appointment

diff --git a/app/(protected)/my-appointments/layout.tsx b/app/(protected)/my-appointments/layout.tsx
@@ -3,9 +3,5 @@ export default function Layout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return (
-    <main className="flex-grow pt-[var(--navbar-height-sm)] lg:pt-[var(--navbar-height-lg)]">
-      {children}
-    </main>
-  );
+  return <main className="min-h-dvh">{children}</main>;
 }
diff --git a/app/(protected)/my-appointments/page.tsx b/app/(protected)/my-appointments/page.tsx
@@ -14,11 +14,9 @@ export default async function MyAppointments() {
   }
 
   return (
-    <div className="relative flex flex-col items-center gap-8 py-8 md:min-h-0">
-      <Container className="relative">
-        <h1 className="text-lg font-medium text-primary-100">
-          My Appointments
-        </h1>
+    <div className="flex flex-col items-center">
+      <Container className="relative w-full max-w-screen-md pt-32">
+        <h1 className="text-lg font-bold text-primary-100">My Appointments</h1>
         <NewAppointmentDialog />
         <AppointmentList />
       </Container>