Exited Suez Canal

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);
-}

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}>
+            <div key={hour} className={styles.timeBlock}>
-              <span>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</span>
+              <div className={styles.timeLabelContainer}>
+                <p>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</p>
+              </div>
             </div>
           ))}
         </div>