package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "lucid-creations-media-potty-chart",
   "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": {
     "name": "Lucid Creations Media",
     "url": "https://lucidcreations.media",

src/components/calender/Day.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Provider } from "react-redux";
 import { store } from "../../app/store";
-import { Box, Skeleton, Text, VStack } from "@chakra-ui/react";
+import { Box, Skeleton, VStack } from "@chakra-ui/react";
 import {
   add,
   getYear,
@@ -113,9 +113,9 @@ 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">
@@ -178,21 +178,23 @@ const Day = ({
         border: "1px solid #FFF"
       }}
     >
-      <Text
+      {isToday ? (
-        h="auto"
+        <Box
-        w="auto"
+          border="1px solid #0068ff"
-        p={
+          borderRadius="50%"
-          isToday
+          w="1.8rem"
-            ? getDate(currDateObj) > 10
+          h="1.8rem"
-              ? "0px 6px 3px 6px"
+          textAlign="center"
-              : "0px 9px 3px 9px"
+          p={0}
-            : "auto"
+          m={0}
-        }
+        >
-        border={isToday ? "1px solid #0068ff" : "0px"}
+          {`${getDate(currDateObj)}`}
-        borderRadius={isToday ? "100px" : "0px"}
+        </Box>
-      >
+      ) : (
-        {`${getDate(currDateObj)}`}
+        <Box w="1.8rem" h="1.8rem" textAlign="center" p={0} m={0}>
-      </Text>
+          {`${getDate(currDateObj)}`}
+        </Box>
+      )}
       {isLoading ? (
         <Skeleton key={currSticker}>
           <Box fontSize="1.5rem">