From 1972a89543704b0523c356c48172bfe86105d0c5 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Fri, 24 Jun 2022 17:53:11 -0500
Subject: [PATCH] Fixing visuals.

---
 src/components/calender/Day.tsx | 64 +++++++++++++++++++++------------
 1 file changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/components/calender/Day.tsx b/src/components/calender/Day.tsx
index fae73c9..54fa7d2 100644
--- a/src/components/calender/Day.tsx
+++ b/src/components/calender/Day.tsx
@@ -113,9 +113,15 @@ const Day = ({
       alignContent="center"
       justifyContent="flex-start"
     >
-      <Text w="auto" h="auto">
+      <Box
+        w="1.8rem"
+        h="1.8rem"
+        textAlign="center"
+        p={0}
+        m={0}
+      >
         {`${getDate(currDateObj)}`}
-      </Text>
+      </Box>
       {isLoading ? (
         <Skeleton key={currSticker}>
           <Box fontSize="1.5rem">
@@ -139,8 +145,8 @@ const Day = ({
             : tutorial === "edit" &&
               !isToday &&
               isBefore(currDateObj, endOfDay(currDate))
-            ? "gray.600"
-            : "transparent"
+              ? "gray.600"
+              : "transparent"
           : "transparent"
       }
       border={
@@ -150,8 +156,8 @@ const Day = ({
             : tutorial === "edit" &&
               !isToday &&
               isBefore(currDateObj, endOfDay(currDate))
-            ? "1px solid #00ff3c"
-            : "1px solid #0068ff"
+              ? "1px solid #00ff3c"
+              : "1px solid #0068ff"
           : "1px solid #0068ff"
       }
       onClick={() => {
@@ -172,27 +178,39 @@ const Day = ({
             : tutorial === "edit" &&
               !isToday &&
               isBefore(currDateObj, endOfDay(currDate))
-            ? "gray.600"
-            : "transparent"
+              ? "gray.600"
+              : "transparent"
           : "transparent",
         border: "1px solid #FFF"
       }}
     >
-      <Text
-        h="auto"
-        w="auto"
-        p={
-          isToday
-            ? getDate(currDateObj) > 10
-              ? "0px 6px 3px 6px"
-              : "0px 9px 3px 9px"
-            : "auto"
-        }
-        border={isToday ? "1px solid #0068ff" : "0px"}
-        borderRadius={isToday ? "100px" : "0px"}
-      >
-        {`${getDate(currDateObj)}`}
-      </Text>
+      {isToday ?
+        (
+          <Box
+            border="1px solid #0068ff"
+            borderRadius="50%"
+            w="1.8rem"
+            h="1.8rem"
+            textAlign="center"
+            p={0}
+            m={0}
+          >
+            {`${getDate(currDateObj)}`}
+          </Box>
+        )
+        :
+        (
+          <Box
+            w="1.8rem"
+            h="1.8rem"
+            textAlign="center"
+            p={0}
+            m={0}
+          >
+            {`${getDate(currDateObj)}`}
+          </Box>
+        )
+      }
       {isLoading ? (
         <Skeleton key={currSticker}>
           <Box fontSize="1.5rem">