Style Admin Pickup Page Buttons (#247)

* filtered events * styling changes * remove code from other pr
acmucsd · May 5, 2024 · edcb3bc · edcb3bc
1 parent 8219c00
commit edcb3bc
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 21 deletions.
diff --git 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
@@ -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
@@ -1,6 +1,7 @@
 export type Styles = {
   active: string;
   back: string;
+  buttonContainer: string;
   container: string;
   description: string;
   displayButton: string;