From d81ec5c2fc3d53283294d0c6e73287ebd6547d7f Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Mon, 5 Feb 2024 22:45:04 -0600
Subject: [PATCH] Exited Suez Canal

---
 .../CalendarGrid/CalendarGrid.module.scss     | 39 +++++++++++++------
 .../common/CalendarGrid/CalendarGrid.tsx      |  6 ++-
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
index 158a62e0..a2e208a4 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -62,18 +62,33 @@
     max-width: 50px;
     min-height: 40px;
     flex-direction: column;
-    justify-content: flex-end;
     align-items: flex-end;
+    
+    .timeLabelContainer {
+        display: flex;
+        max-height: 20px;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 17px;
+        flex: 1 0 0;
+        align-self: stretch;
+        border-radius: var(--border-radius-none, 0px);
+    }
+
+    p {
+        color: #1A2024;
+        text-align: left;
+        height: 6.6px;
+        align-self: stretch;
+        margin-top: 0;
+        margin-bottom: 0;
+
+        /* Type scale/small */
+        font-family: "Roboto Flex";
+        font-size: 14.22px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+    } 
 }
 
-.timeLabelContainer {
-    display: flex;
-    max-height: 20px;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    gap: 17px;
-    flex: 1 0 0;
-    align-self: stretch;
-    border-radius: var(--border-radius-none, 0px);
-}
\ No newline at end of file
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index f8ffd23f..4c2584da 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -34,8 +34,10 @@ const Calendar: React.FC = (props) => {
       <div className={styles.timeAndGrid}>
         <div className={styles.timeColumn}>
           {hoursOfDay.map((hour) => (
-            <div key={hour} className={styles.timeLabelContainer}>
-              <span>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</span>
+            <div key={hour} className={styles.timeBlock}>
+              <div className={styles.timeLabelContainer}>
+                <p>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</p>
+              </div>
             </div>
           ))}
         </div>