Imported the new context to calendar componenet.

components/calender/NewContext.tsx

@@ -3,12 +3,11 @@ import { Box, Text } from "@chakra-ui/react";
 import { NewCalenderContext } from "../../contexts/NewCalenderContext";
 
 const NewContext = (): JSX.Element => {
-  const { selectedMonthInfo } = useContext(NewCalenderContext);
-  const { date } = selectedMonthInfo;
+  const { selectedDate } = useContext(NewCalenderContext);
 
   return (
     <Box>
-      <Text>{`New Context Was Provided. Selected date is ${date}`}</Text>
+      <Text>{`New Context Was Provided. Selected date is ${selectedDate}`}</Text>
     </Box>
   );
 };

components/calender/index.tsx

@@ -2,7 +2,8 @@ import React, { useContext, useEffect } from "react";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import CalenderNav from "./CalenderNav";
 import { CalenderContext } from "../../contexts/CalenderContext";
-import NewContext from "./NewContext";
+import { NewCalenderContext } from "../../contexts/NewCalenderContext";
+import { getDate } from "date-fns";
 
 interface UpdateCalendarProps {
   year: number;
@@ -12,6 +13,7 @@ interface UpdateCalendarProps {
 
 const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
   const { daysOfMonth, daysOfWeek, setDate } = useContext(CalenderContext);
+  const { layout } = useContext(NewCalenderContext);
 
   useEffect(() => {
     if (newDate) {
@@ -31,9 +33,12 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
     startOfWeek: "Sunday"
   };
 
+  const currMonth = layout[`${userSettings.startOfWeek.toLowerCase()}`];
+  const { month, weekdays } = currMonth;
+
   return (
     <VStack h="100vh" w="100%">
-      <NewContext />
+      {/* <NewContext /> */}
       <CalenderNav />
       <HStack
         px={6}
@@ -44,7 +49,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
         alignContent="center"
         alignItems="center"
       >
-        {daysOfWeek.startOfWeek[userSettings.startOfWeek].map((weekDay) => {
+        {weekdays.map((weekDay) => {
           return (
             <Box
               d="flex"
@@ -73,20 +78,27 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
         // alignContent="center"
         alignItems="center"
       >
-        {daysOfMonth.map((monthDay) => {
-          return (
-            <Box
-              bg="transparent"
-              border="2px solid #0068ff"
-              w="100%"
-              h="100%"
-              key={monthDay}
-            >
-              <Text w="100%" h="100%">
-                {`Day ${monthDay}`}
-              </Text>
-            </Box>
-          );
+        {Object.keys(month).map((week) => {
+          const thisWeek = month[week];
+
+          return thisWeek.map((day) => {
+            const { date, isOverflow } = day;
+
+            return (
+              <Box
+                bg="transparent"
+                color={isOverflow ? "gray.600" : "whiteAlpha"}
+                border={isOverflow ? "2px solid #181d8f" : "2px solid #0068ff"}
+                w="100%"
+                h="100%"
+                key={date}
+              >
+                <Text w="100%" h="100%">
+                  {`Day ${getDate(date)}`}
+                </Text>
+              </Box>
+            );
+          });
         })}
       </SimpleGrid>
     </VStack>

contexts/NewCalenderContext.tsx

@@ -49,11 +49,11 @@ interface MonthInfo {
 
 interface MonthLayout {
   sunday: {
-    layout: DaysOfWeek;
+    weekdays: DaysOfWeek;
     month: Month;
   };
   monday: {
-    layout: DaysOfWeek;
+    weekdays: DaysOfWeek;
     month: Month;
   };
 }
@@ -63,7 +63,9 @@ interface MonthContext extends MonthInfo {
 }
 
 interface CalenderContextState {
-  selectedMonth: MonthContext;
+  selectedDate: Date;
+  title: string;
+  layout: MonthLayout;
 }
 
 const NewCalenderContext = createContext({} as CalenderContextState);
@@ -210,11 +212,11 @@ const NewCalenderContextProvider = ({
 
     const output = {
       sunday: {
-        layout: weekDays.sunday,
+        weekdays: weekDays.sunday,
         month: sundays
       },
       monday: {
-        layout: weekDays.monday,
+        weekdays: weekDays.monday,
         month: mondays
       }
     };
@@ -231,10 +233,7 @@ const NewCalenderContextProvider = ({
   // );
 
   const [selectedDate, setSelectedMonth] = useState<Date>(new Date());
-  const [prevMonth, setPrevMonth] = useState<Date>(
-    sub(selectedDate, { months: 1 })
-  );
-  const [selectedMonthInfo, setSelectedMonthInfo] = useState<MonthContext>({
+  const [selectedDateInfo, setSelectedMonthInfo] = useState<MonthContext>({
     date: selectedDate,
     title: format(selectedDate, "LLLL uuuu"),
     layout: populateMonth(selectedDate)
@@ -249,7 +248,9 @@ const NewCalenderContextProvider = ({
   //TODO: Add a useEffect that will trigger the update function(s) to run when the selected date is updated.
 
   const calenderContextValues = {
-    selectedMonthInfo
+    selectedDate: selectedDate,
+    title: selectedDateInfo.title,
+    layout: selectedDateInfo.layout
   };
 
   return (

theme/AppTheme.ts

@@ -1,5 +1,5 @@
 import { extendTheme, ThemeConfig } from "@chakra-ui/react";
-import { createBreakpoints } from "@chakra-ui/theme-tools";
+// import { createBreakpoints } from "@chakra-ui/theme-tools";
 import buttons from "./components/buttonStyles";
 
 const config: ThemeConfig = {
@@ -20,6 +20,7 @@ const AppTheme = extendTheme({
   colors: {
     brand: {
       main: "#3138dc",
+      mainInactive: "#181d8f",
       primary: "#0068ff",
       secondary: "#0086ff",
       hover: "#00aec1",