From e98bc3bd742acd71d5b2abe13d42c8a79634e7a3 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Sun, 18 Aug 2024 10:38:28 -0700
Subject: [PATCH] Changed session weekly to dots.

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

diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
index 6f5bf6cb..ba15dfcc 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
@@ -21,10 +21,11 @@
 
 .cell {
   display: flex;
-  background-color: var(--base100);
+  background-color: var(--base75);
   width: 20px;
   height: 20px;
   margin: auto;
+  border-radius: 100%;
   align-items: start;
 }
 
@@ -38,5 +39,5 @@
   background-color: var(--primary400);
   width: 20px;
   height: 20px;
-  border-radius: 3px;
+  border-radius: 100%;
 }
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
index f9acaefc..3e15ddfa 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
@@ -55,6 +55,7 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
                 {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
               </div>
               {day?.map((hour: number) => {
+                const pct = hour / max;
                 return (
                   <div key={hour} className={classNames(styles.cell)}>
                     {hour > 0 && (
@@ -62,7 +63,10 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
                         label={`${formatMessage(labels.visitors)}: ${hour}`}
                         position="right"
                       >
-                        <div className={styles.block} style={{ opacity: hour / max }} />
+                        <div
+                          className={styles.block}
+                          style={{ opacity: pct, transform: `scale(${pct})` }}
+                        />
                       </TooltipPopup>
                     )}
                   </div>