Merge branch 'main' into raymond/live-badge-tweaks

src/components/admin/event/AdminPickupEvent/AdminPickupEventForm.tsx

@@ -25,6 +25,13 @@ interface IProps {
   upcomingEvents: PublicEvent[];
 }
 
+const parseProps = (isoStart: string, isoEnd: string, rawOrderLimit: string) => {
+  const start = new Date(isoStart).toISOString();
+  const end = new Date(isoEnd).toISOString();
+  const orderLimit = parseInt(`${rawOrderLimit}`, 10);
+  return { start, end, orderLimit };
+};
+
 export const completePickupEvent = async (uuid: UUID, token: string) => {
   try {
     await AdminEventManager.completePickupEvent({
@@ -89,18 +96,16 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }:
       orderLimit: rawOrderLimit,
     } = formData;
 
-    const start = new Date(isoStart).toISOString();
-    const end = new Date(isoEnd).toISOString();
-    const orderLimit = parseInt(`${rawOrderLimit}`, 10);
-
     try {
+      const { start, end, orderLimit } = parseProps(isoStart, isoEnd, `${rawOrderLimit}`);
+
       const uuid = await AdminEventManager.createPickupEvent(token, {
         title,
         start,
         end,
         description,
         orderLimit,
-        linkedEventUuid,
+        linkedEventUuid: linkedEventUuid || null,
       });
       showToast('Pickup Event created successfully!', '', [
         {
@@ -110,7 +115,11 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }:
       ]);
       router.push(`${config.admin.store.pickup}/${uuid}`);
     } catch (error) {
-      reportError('Could not create pickup event', error);
+      if (error instanceof RangeError) {
+        reportError('Invalid date, could not create pickup event', error);
+      } else {
+        reportError('Could not create pickup event', error);
+      }
     } finally {
       setLoading(false);
     }
@@ -128,13 +137,18 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }:
       orderLimit: rawOrderLimit,
     } = formData;
 
-    const start = new Date(isoStart).toISOString();
-    const end = new Date(isoEnd).toISOString();
-    const orderLimit = parseInt(`${rawOrderLimit}`, 10);
-
     try {
+      const { start, end, orderLimit } = parseProps(isoStart, isoEnd, `${rawOrderLimit}`);
+
       await AdminEventManager.editPickupEvent({
-        pickupEvent: { title, start, end, description, orderLimit, linkedEventUuid },
+        pickupEvent: {
+          title,
+          start,
+          end,
+          description,
+          orderLimit,
+          linkedEventUuid: linkedEventUuid || null,
+        },
         uuid: defaultData.uuid ?? '',
         token: token,
 
@@ -153,7 +167,11 @@ const AdminPickupEventForm = ({ mode, defaultData = {}, token, upcomingEvents }:
         },
       });
     } catch (error) {
-      reportError('Could not save changes', error);
+      if (error instanceof RangeError) {
+        reportError("Invalid date, can't save changes", error);
+      } else {
+        reportError('Could not save changes', error);
+      }
     } finally {
       setLoading(false);
     }

src/components/common/PaginationControls/index.tsx

@@ -1,5 +1,5 @@
-import LeftArrowIcon from '@/public/assets/icons/page-left-icon.svg';
-import RightArrowIcon from '@/public/assets/icons/page-right-icon.svg';
+import LeftArrowIcon from '@/public/assets/icons/arrow-left.svg';
+import RightArrowIcon from '@/public/assets/icons/arrow-right.svg';
 import { useEffect, useState } from 'react';
 import style from './style.module.scss';
 
@@ -54,7 +54,7 @@ const PaginationControls = ({ page, onPage, pages }: PaginationControlsProps) =>
             }
           }}
         />
-        <span>of</span>
+        <span>/</span>
         <span className={style.pageNumber}>{pages}</span>
       </div>
       <button

src/components/common/PaginationControls/style.module.scss

@@ -5,31 +5,40 @@
   justify-content: center;
 
   .paginationBtn {
-    background: none;
+    background: var(--theme-elevated-background);
+    border: 1px solid var(--theme-elevated-stroke);
+    border-radius: 50%;
+    color: var(--theme-primary-2);
     font-size: 0;
     padding: 0;
 
     &:disabled {
+      color: var(--theme-elevated-stroke);
       cursor: auto;
       opacity: 0.5;
     }
   }
 
   .paginationText {
     align-items: center;
+    background-color: var(--theme-elevated-background);
+    border: 1px solid var(--theme-elevated-stroke);
+    border-radius: 1rem;
     display: flex;
     font-weight: bold;
-    gap: 1em;
+    gap: 0.5rem;
+    padding: 0.375rem 1rem;
 
     .pageNumber {
+      text-align: center;
       width: 24px;
 
       &:is(input) {
-        border: 1px solid var(--theme-text-on-background-1);
-        border-radius: 2px;
-        color: inherit;
+        background-color: inherit;
+        border-bottom: 1.5px solid var(--theme-text-on-background-1);
+        color: var(--theme-text-on-background-1);
         font: inherit;
-        height: 24px;
+        margin-bottom: -1.5px;
         text-align: center;
       }
     }

src/components/leaderboard/LeaderboardRow/style.module.scss

@@ -23,18 +23,8 @@
   }
 
   &.flash {
-    animation: flash 2s;
-    @keyframes flash {
-      0%,
-      20%,
-      40%,
-      60% {
-        background-color: var(--theme-background);
-        color: var(--theme-text-on-background-1);
-      }
-
-      10%,
-      30%,
+    animation: blinker 2s;
+    @keyframes blinker {
       50% {
         background-color: var(--theme-primary-2);
         color: var(--theme-background);
@@ -78,7 +68,6 @@
     }
 
     .rank {
-      color: var(--theme-text-on-surface-1);
       opacity: 0.5;
       text-align: center;
 

src/components/leaderboard/LeaderboardRow/style.module.scss.d.ts

@@ -1,4 +1,5 @@
 export type Styles = {
+  blinker: string;
   flash: string;
   match: string;
   name: string;

src/pages/admin/store/pickup/index.tsx

@@ -52,9 +52,13 @@ const AdminPickupPage = ({ futurePickupEvents, pastPickupEvents }: AdminPickupPa
         </div>
       </div>
       <div className={styles.cardContainer}>
-        {displayPickupEvents.map(pickupEvent => (
-          <PickupEventCard pickupEvent={pickupEvent} key={pickupEvent.uuid} />
-        ))}
+        {displayPickupEvents
+          .sort((x, y) => {
+            return Date.parse(x.start) - Date.parse(y.start);
+          })
+          .map(pickupEvent => (
+            <PickupEventCard pickupEvent={pickupEvent} key={pickupEvent.uuid} />
+          ))}
       </div>
     </div>
   );

src/styles/pages/leaderboard.module.scss

@@ -8,9 +8,8 @@
   max-width: 60rem;
 
   .header {
-    align-items: center;
     display: flex;
-    gap: 0 2rem;
+    gap: 1rem 2rem;
 
     @media (max-width: vars.$breakpoint-lg) {
       display: grid;
@@ -22,6 +21,7 @@
     }
 
     .heading {
+      align-self: center;
       font-size: 1.5rem;
       justify-self: start;
       letter-spacing: 1%;
@@ -32,13 +32,13 @@
     .myPosition {
       align-items: center;
       background-color: var(--theme-primary-2);
-      border-radius: 1rem;
+      border: 1px solid var(--theme-elevated-stroke);
+      border-radius: 2rem;
       color: var(--theme-background);
       display: flex;
       font-size: 1rem;
       font-weight: bold;
       gap: 0.5rem;
-      height: 2rem;
       justify-self: start;
       padding: 0 1rem;
 
@@ -52,22 +52,31 @@
       background: none;
       background-color: var(--theme-elevated-background);
       border: 1px solid var(--theme-elevated-stroke);
-      border-radius: 1rem;
+      border-radius: 2rem;
       color: inherit;
-      font-size: 14px;
-      height: 2rem;
+      font-size: 1rem;
       max-width: 18rem;
-      padding-left: 1.5rem;
+      padding-left: 1rem;
       padding-right: 0.5rem;
+
       width: 100%;
 
       &::placeholder {
         color: var(--theme-text-on-background-3);
       }
     }
 
-    .timeDropdown select {
-      text-align: right;
+    .timeDropdown {
+      background-color: var(--theme-elevated-background);
+      border: 1px solid var(--theme-elevated-stroke);
+      border-radius: 2rem;
+      padding: 0.5rem 1rem;
+
+      > select {
+        font-size: 1rem;
+        font-weight: normal;
+        line-height: 1.25rem;
+      }
     }
   }