Styling and formatting.

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
-        px={6}
-        spacing={2}
-        // bg="brand.main"
-        w="100%"
-        h="auto"
-        alignContent="center"
-        alignItems="center"
-      >
-        {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;
-
+      <VStack h="100%" w="100%" spacing={0}>
+        <HStack
+          px={6}
+          spacing={0}
+          w="100%"
+          h="auto"
+          alignContent="center"
+          alignItems="center"
+        >
+          {weekdays.map((weekDay) => {
             return (
-              <Day
-                isOverflow={isOverflow}
-                overflowDirection={overflowDirection}
-                sticker={sticker}
-                date={date}
-                selectedDate={selectedDate}
-                key={format(date, "P")}
-              />
+              <Box
+                d="flex"
+                alignContent="center"
+                alignItems="center"
+                bg="transparent"
+                border="1px solid #0068ff"
+                w="100%"
+                h={10}
+                key={weekDay}
+              >
+                <Text w="100%" h="auto">
+                  {weekDay}
+                </Text>
+              </Box>
             );
-          });
-        })}
-      </SimpleGrid>
+          })}
+        </HStack>
+        <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>
   );
 };