From edcb3bc2c716a5911d7a552f8d98fb4c589c369c Mon Sep 17 00:00:00 2001
From: Nikhil Dange <nsdange@ucsd.edu>
Date: Sat, 4 May 2024 23:36:27 -0700
Subject: [PATCH] Style Admin Pickup Page Buttons (#247)

* filtered events

* styling changes

* remove code from other pr
---
 src/pages/admin/store/pickup/[uuid].tsx       | 44 ++++++++++---------
 .../StorePickupEventDetailsPage.module.scss   |  8 ++++
 ...orePickupEventDetailsPage.module.scss.d.ts |  1 +
 3 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/pages/admin/store/pickup/[uuid].tsx b/src/pages/admin/store/pickup/[uuid].tsx
index 2dcea7a8..0521f7ea 100644
--- a/src/pages/admin/store/pickup/[uuid].tsx
+++ b/src/pages/admin/store/pickup/[uuid].tsx
@@ -57,31 +57,33 @@ const PickupEventDetailsPage = ({ pickupEvent, token }: PickupEventDetailsPagePr
           <div>
             <PickupEventStatus status={status} variant="h3/bold" />
             <Typography variant="h1/bold">{title}</Typography>
-            <Button
-              className={`${styles.displayButton}`}
-              onClick={() => router.push(`${config.admin.store.pickupEdit}/${uuid}`)}
-            >
-              <Typography variant="h5/bold">Edit Pickup Event</Typography>
-            </Button>
-            {status === OrderPickupEventStatus.ACTIVE ? (
+            <div className={styles.buttonContainer}>
               <Button
                 className={`${styles.displayButton}`}
-                onClick={() => completePickupEvent(uuid, token)}
+                onClick={() => router.push(`${config.admin.store.pickupEdit}/${uuid}`)}
               >
-                <Typography variant="h5/bold">Complete Pickup Event</Typography>
+                <Typography variant="h5/bold">Edit Pickup Event</Typography>
               </Button>
-            ) : null}
-            {status === OrderPickupEventStatus.ACTIVE ? (
-              <Button
-                className={`${styles.displayButton}`}
-                onClick={() => {
-                  cancelPickupEvent(uuid, token);
-                }}
-                destructive
-              >
-                <Typography variant="h5/bold">Cancel Pickup Event</Typography>
-              </Button>
-            ) : null}
+              {status === OrderPickupEventStatus.ACTIVE ? (
+                <Button
+                  className={`${styles.displayButton}`}
+                  onClick={() => completePickupEvent(uuid, token)}
+                >
+                  <Typography variant="h5/bold">Complete Pickup Event</Typography>
+                </Button>
+              ) : null}
+              {status === OrderPickupEventStatus.ACTIVE ? (
+                <Button
+                  className={`${styles.displayButton}`}
+                  onClick={() => {
+                    cancelPickupEvent(uuid, token);
+                  }}
+                  destructive
+                >
+                  <Typography variant="h5/bold">Cancel Pickup Event</Typography>
+                </Button>
+              ) : null}
+            </div>
             <Typography variant="h4/regular" suppressHydrationWarning>
               {formatEventDate(start, end, true)}
             </Typography>
diff --git a/src/styles/pages/StorePickupEventDetailsPage.module.scss b/src/styles/pages/StorePickupEventDetailsPage.module.scss
index 4b576698..b814ccb0 100644
--- a/src/styles/pages/StorePickupEventDetailsPage.module.scss
+++ b/src/styles/pages/StorePickupEventDetailsPage.module.scss
@@ -46,6 +46,14 @@
       }
     }
 
+    .buttonContainer {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 1rem;
+      margin: 1rem 0;
+    }
+
     .orders {
       display: flex;
       flex-direction: column;
diff --git a/src/styles/pages/StorePickupEventDetailsPage.module.scss.d.ts b/src/styles/pages/StorePickupEventDetailsPage.module.scss.d.ts
index 807de6f0..7c896b54 100644
--- a/src/styles/pages/StorePickupEventDetailsPage.module.scss.d.ts
+++ b/src/styles/pages/StorePickupEventDetailsPage.module.scss.d.ts
@@ -1,6 +1,7 @@
 export type Styles = {
   active: string;
   back: string;
+  buttonContainer: string;
   container: string;
   description: string;
   displayButton: string;