favorite badges

Sun-Mountain · Jul 17, 2023 · b2de4e3 · b2de4e3
1 parent b5b28d5
commit b2de4e3
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 20 deletions.
diff --git a/frontend/assets/styles/base/variables.scss b/frontend/assets/styles/base/variables.scss
@@ -65,4 +65,9 @@ $time-label-bg: $lightOrange-50;
 $time-label-color: $bittersweet;
 $conflict-btn-color: $raspberry;
 $fave-item-color: $outer;
-$details-color: $french;
+$details-color: $french;
+$light-color: $seasalt;
+$sold-out-badge-bg: $quinacridone;
+$diff-day-badge-bg: $raspberry;
+$materials-badge-bg: $xanthous;
+$tournament-badge-bg: $verdigris;
diff --git a/frontend/assets/styles/components/schedule.scss b/frontend/assets/styles/components/schedule.scss
@@ -20,6 +20,11 @@
     margin: 10px;
     width: 100%;
 
+    .badge-container {
+      display: flex;
+      padding: 15px 5px 0 5px;
+    }
+
     .conflicts-btn {
       border-radius: 5px 5px !important;
       color: $conflict-btn-color;
@@ -44,6 +49,10 @@
       justify-content: space-between;
     }
 
+    .fave-game-id {
+      font-size: 16px;
+    }
+
     .fave-card-title {
       font-weight: 700;
       font-size: 17px;
@@ -61,5 +70,39 @@
       color: $details-color;
       font-size: 15px;
     }
+
+    .fave-badge {
+      border-radius: 5px 5px;
+      display: flex;
+      font-size: 14px;
+      padding: 5px 10px 5px 7px;
+    }
+
+    .fave-badge+.fave-badge {
+      margin-left: 25px;
+    }
+
+    .badge-icon {
+      margin-right: 5px;
+    }
+
+    .sold-out-badge {
+      background-color: $sold-out-badge-bg;
+      color: $light-color;
+    }
+
+    .diff-day-badge {
+      background-color: $diff-day-badge-bg;
+      color: $light-color;
+    }
+
+    .materials-badge {
+      background-color: $materials-badge-bg;
+    }
+
+    .tournament-badge {
+      background-color: $tournament-badge-bg;
+      color: $light-color;
+    }
   }
 }
diff --git a/frontend/components/FaveCard.tsx b/frontend/components/FaveCard.tsx
@@ -10,6 +10,9 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ReportGmailErrorredIcon from '@mui/icons-material/ReportGmailerrorred';
 import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
+import DoNotDisturbIcon from '@mui/icons-material/DoNotDisturb';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import DesignServicesIcon from '@mui/icons-material/DesignServices';
 
 import { NewEvent } from '@/assets/interfaces';
 import findEvent from '@/helpers/findEvent';
@@ -27,20 +30,23 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
 
 export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }) {
   const [expanded, setExpanded] = useState(false);
-  const { title,
-          descriptionShort,
-          startDate,
-          startTime,
-          endDate,
-          endTime,
-          conflicts,
-          location,
-          room,
-          tableNum,
-          gameSystem,
-          gameId,
-          tournament
-        } = favoriteEvent;
+  const { 
+    conflicts,
+    descriptionShort,
+    endDate,
+    endTime,
+    gameId,
+    gameSystem,
+    location,
+    materials,
+    room,
+    startDate,
+    startTime,
+    tableNum,
+    ticketsAvailable,
+    title,
+    tournament,
+  } = favoriteEvent;
 
   const handleExpandClick = () => {
     setExpanded(!expanded);
@@ -57,7 +63,7 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }
       <CardContent>
         <Typography className='fave-header'>
           <div>
-            <div>
+            <div className='fave-game-id'>
               {gameId}
             </div>
             <div className='fave-card-title'>
@@ -113,11 +119,26 @@ export default function FaveCard ({ favoriteEvent }: { favoriteEvent: NewEvent }
         <Typography className='fave-description'>
           {descriptionShort}
         </Typography>
-        <Typography>
+        <Typography className='badge-container'>
+          {!ticketsAvailable && (
+            <div className='fave-badge sold-out-badge'>
+              <DoNotDisturbIcon className='badge-icon' fontSize='small' /> Event Sold Out
+            </div>
+          )}
+          {endDate != startDate && (
+            <div className='fave-badge diff-day-badge'>
+              <CalendarMonthIcon className='badge-icon' fontSize='small' /> Ends on a Different Day
+            </div>
+          )}
+          {materials && (
+            <div className='fave-badge materials-badge'>
+              <DesignServicesIcon className='badge-icon' fontSize='small' /> Materials Required
+            </div>
+          )}
           {tournament && (
-            <>
-              <EmojiEventsIcon /> Tournament
-            </>
+            <div className='fave-badge tournament-badge'>
+              <EmojiEventsIcon className='badge-icon' fontSize='small' /> Tournament
+            </div>
           )}
         </Typography>
       </CardContent>