diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx
index a52921b..354ece9 100644
--- a/components/calender/Day.tsx
+++ b/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 (
{isOverflow && (
- handleNav(overflowDirection)}
+ spacing="0.5rem"
+ alignContent="center"
+ justifyContent="flex-start"
+ pt={2}
>
-
+
{`${getDate(date)}`}
{sticker !== null ? (
@@ -83,18 +89,39 @@ const Day = ({
)}
-
+
)}
{!isOverflow && (
- setIsOpen(true)}
+ alignContent="center"
+ justifyContent="flex-start"
+ pt={2}
+ _hover={{
+ cursor: "pointer",
+ background: "gray.700"
+ }}
>
- {`${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)}`}
+
{sticker !== null ? (
@@ -105,7 +132,7 @@ const Day = ({
)}
-
+
)}
);
diff --git a/components/calender/index.tsx b/components/calender/index.tsx
index f633573..7b663d7 100644
--- a/components/calender/index.tsx
+++ b/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 (
-
- {weekdays.map((weekDay) => {
- return (
-
-
- {weekDay}
-
-
- );
- })}
-
-
- {Object.keys(month).map((week) => {
- const thisWeek = month[week];
-
- return thisWeek.map((day: MonthDay) => {
- const { sticker, date, isOverflow, overflowDirection } = day;
-
+
+
+ {weekdays.map((weekDay) => {
return (
-
+
+
+ {weekDay}
+
+
);
- });
- })}
-
+ })}
+
+
+ {Object.keys(month).map((week) => {
+ const thisWeek = month[week];
+
+ return thisWeek.map((day: MonthDay) => {
+ const { sticker, date, isOverflow, overflowDirection } = day;
+
+ return (
+
+ );
+ });
+ })}
+
+
);
};