Styling and formatting.

components/calender/Day.tsx

@@ -1,5 +1,5 @@
-import { Box, Text } from "@chakra-ui/react";
+import { Box, Text, VStack } from "@chakra-ui/react";
-import { add, getYear, getMonth, sub, getDate } from "date-fns";
+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,66 +30,60 @@ 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 />
-      <HStack
+      <VStack h="100%" w="100%" spacing={0}>
-        px={6}
+        <HStack
-        spacing={2}
+          px={6}
-        // bg="brand.main"
+          spacing={0}
-        w="100%"
+          w="100%"
-        h="auto"
+          h="auto"
-        alignContent="center"
+          alignContent="center"
-        alignItems="center"
+          alignItems="center"
-      >
+        >
-        {weekdays.map((weekDay) => {
+          {weekdays.map((weekDay) => {
-          return (
-            <Box
-              d="flex"
-              alignContent="center"
-              alignItems="center"
-              bg="transparent"
-              border="2px solid #0068ff"
-              w="100%"
-              h={10}
-              key={weekDay}
-            >
-              <Text w="100%" h="auto">
-                {weekDay}
-              </Text>
-            </Box>
-          );
-        })}
-      </HStack>
-      <SimpleGrid
-        px={6}
-        spacing={2}
-        // bg="brand.main"
-        w="100%"
-        h="100%"
-        columns={7}
-        // alignContent="center"
-        alignItems="center"
-      >
-        {Object.keys(month).map((week) => {
-          const thisWeek = month[week];
-
-          return thisWeek.map((day: MonthDay) => {
-            const { sticker, date, isOverflow, overflowDirection } = day;
-
             return (
-              <Day
+              <Box
-                isOverflow={isOverflow}
+                d="flex"
-                overflowDirection={overflowDirection}
+                alignContent="center"
-                sticker={sticker}
+                alignItems="center"
-                date={date}
+                bg="transparent"
-                selectedDate={selectedDate}
+                border="1px solid #0068ff"
-                key={format(date, "P")}
+                w="100%"
-              />
+                h={10}
+                key={weekDay}
+              >
+                <Text w="100%" h="auto">
+                  {weekDay}
+                </Text>
+              </Box>
             );
-          });
+          })}
-        })}
+        </HStack>
-      </SimpleGrid>
+        <SimpleGrid px={6} w="100%" h="100%" columns={7} alignItems="center">
+          {Object.keys(month).map((week) => {
+            const thisWeek = month[week];
+
+            return thisWeek.map((day: MonthDay) => {
+              const { sticker, date, isOverflow, overflowDirection } = day;
+
+              return (
+                <Day
+                  isOverflow={isOverflow}
+                  overflowDirection={overflowDirection}
+                  sticker={sticker}
+                  date={date}
+                  selectedDate={selectedDate}
+                  key={format(date, "P")}
+                />
+              );
+            });
+          })}
+        </SimpleGrid>
+      </VStack>
     </VStack>
   );
 };