From 7add059f430895370241d6f83778be3589fc2fc1 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Sat, 17 Aug 2024 21:32:42 -0700
Subject: [PATCH] Updated weekly session labels.

---
 .../[websiteId]/sessions/SessionsWeekly.module.css         | 4 ++--
 .../websites/[websiteId]/sessions/SessionsWeekly.tsx       | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
index 4b41d87c..b795ed70 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
@@ -20,16 +20,16 @@
 .cell {
   display: flex;
   align-items: center;
-  justify-content: center;
   background-color: var(--base100);
   width: 20px;
   height: 20px;
+  margin: auto;
 }
 
 .hour {
   font-weight: 700;
   color: var(--font-color300);
-  background-color: transparent;
+  height: 20px;
 }
 
 .block {
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
index 6c0984ea..0ee4805d 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import { format, startOfDay, addHours } from 'date-fns';
 import { useLocale, useMessages, useWebsiteSessionsWeekly } from 'components/hooks';
 import { LoadingPanel } from 'components/common/LoadingPanel';
 import { getDayOfWeekAsDate } from 'lib/date';
@@ -40,9 +40,10 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
           {Array(24)
             .fill(null)
             .map((_, i) => {
+              const label = format(addHours(startOfDay(new Date()), i), 'haaa');
               return (
-                <div key={i} className={classNames(styles.cell, styles.hour)}>
-                  {i.toString().padStart(2, '0')}
+                <div key={i} className={styles.hour}>
+                  {label}
                 </div>
               );
             })}