Styling and formatting.

components/calender/Day.tsx

@@ -1,5 +1,5 @@
-import { Box, Text } from "@chakra-ui/react";
-import { add, getYear, getMonth, sub, getDate } from "date-fns";
+import { Box, Text, VStack } from "@chakra-ui/react";
+import { add, getYear, getMonth, sub, getDate, isSameDay } from "date-fns";
 import router from "next/router";
 import React, { Fragment, useState } from "react";
 import AddSticker from "./modals/AddSticker";
@@ -60,18 +60,24 @@ const Day = ({
   return (
     <Fragment>
       {isOverflow && (
-        <Box
+        <VStack
           bg="transparent"
           color="gray.600"
-          border="2px solid #181d8f"
+          border="1px solid #181d8f"
           w="100%"
           h="100%"
           _hover={{
-            cursor: "pointer"
+            cursor: "pointer",
+            background: "gray.700",
+            color: "gray.200"
           }}
           onClick={() => handleNav(overflowDirection)}
+          spacing="0.5rem"
+          alignContent="center"
+          justifyContent="flex-start"
+          pt={2}
         >
-          <Text w="100%" h="100%">
+          <Text w="auto" h="auto">
             {`${getDate(date)}`}
           </Text>
           {sticker !== null ? (
@@ -83,18 +89,39 @@ const Day = ({
               <span aria-label="spacer">&nbsp;</span>
             </Box>
           )}
-        </Box>
+        </VStack>
       )}
       {!isOverflow && (
-        <Box
+        <VStack
           bg="transparent"
           color="whiteAlpha"
-          border="2px solid #0068ff"
+          border="1px solid #0068ff"
           w="100%"
           h="100%"
           onClick={() => setIsOpen(true)}
+          alignContent="center"
+          justifyContent="flex-start"
+          pt={2}
+          _hover={{
+            cursor: "pointer",
+            background: "gray.700"
+          }}
         >
-          <Text>{`${getDate(date)}`}</Text>
+          <Text
+            p={
+              isSameDay(new Date(), date)
+                ? getDate(date) > 10
+                  ? "4px 8px"
+                  : "2px 10px"
+                : "auto"
+            }
+            h="auto"
+            w="auto"
+            border={isSameDay(new Date(), date) ? "1px solid #0068ff" : "0px"}
+            borderRadius={isSameDay(new Date(), date) ? "100px" : "0px"}
+          >
+            {`${getDate(date)}`}
+          </Text>
           {sticker !== null ? (
             <Box fontSize="1.5rem">
               <DemoStickers stickerVal={sticker} />
@@ -105,7 +132,7 @@ const Day = ({
             </Box>
           )}
           <AddSticker date={date} isOpen={isOpen} updateIsOpen={setIsOpen} />
-        </Box>
+        </VStack>
       )}
     </Fragment>
   );

components/calender/index.tsx

@@ -30,13 +30,15 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
   const currMonth = layout[`${userSettings.startOfWeek.toLowerCase()}`];
   const { month, weekdays } = currMonth;
 
+  // TODO: Move the weekdays into it's own component for responsiveness.
+
   return (
     <VStack h="91vh" w="100%">
       <CalenderNav />
+      <VStack h="100%" w="100%" spacing={0}>
         <HStack
           px={6}
-        spacing={2}
-        // bg="brand.main"
+          spacing={0}
           w="100%"
           h="auto"
           alignContent="center"
@@ -49,7 +51,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
                 alignContent="center"
                 alignItems="center"
                 bg="transparent"
-              border="2px solid #0068ff"
+                border="1px solid #0068ff"
                 w="100%"
                 h={10}
                 key={weekDay}
@@ -61,16 +63,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
             );
           })}
         </HStack>
-      <SimpleGrid
-        px={6}
-        spacing={2}
-        // bg="brand.main"
-        w="100%"
-        h="100%"
-        columns={7}
-        // alignContent="center"
-        alignItems="center"
-      >
+        <SimpleGrid px={6} w="100%" h="100%" columns={7} alignItems="center">
           {Object.keys(month).map((week) => {
             const thisWeek = month[week];
 
@@ -91,6 +84,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
           })}
         </SimpleGrid>
       </VStack>
+    </VStack>
   );
 };