From 79eb46ef3afbacb31d2a3ca30dd5389501933bd3 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 30 Nov 2021 20:03:18 -0600 Subject: [PATCH 01/15] Formatting. Updating version in header. --- theme/layout/Footer.tsx | 10 +++------- theme/layout/Header.tsx | 21 ++++++++++++--------- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/theme/layout/Footer.tsx b/theme/layout/Footer.tsx index ec7c348..7aac0c1 100644 --- a/theme/layout/Footer.tsx +++ b/theme/layout/Footer.tsx @@ -1,4 +1,4 @@ -import React/*, { useEffect, useRef, useState }*/ from "react"; +import React /*, { useEffect, useRef, useState }*/ from "react"; import { Box, Text, @@ -74,10 +74,7 @@ const Footer = (): JSX.Element => { target="_blank" rel="noopener" > - @@ -101,8 +98,7 @@ const Footer = (): JSX.Element => { © {" 2021 - "} - {new Date().getFullYear()} - {" "} + {new Date().getFullYear()}{" "} { - const appName = "LCM Potty Chart" - const appVersion = "v0.0.2.5-pre-alpha" - + const appName = "LCM Potty Chart"; + const appVersion = "v0.0.2.6-pre-alpha"; // Add transparency while not at the top of the page. const [transparentNavbar, setTransparentNavbar] = useState(false); @@ -85,8 +84,8 @@ const Header = (): JSX.Element => { open ? "brand.main" : transparentNavbar - ? "rgba(49, 56, 220, 0.9)" - : "brand.main" + ? "rgba(49, 56, 220, 0.9)" + : "brand.main" } transition=".5s ease" borderRadius="0px 0px 10px 10px" @@ -119,7 +118,13 @@ const Header = (): JSX.Element => { {/* Desktop Nav Items and Mobile Menu Button */} - + { onMouseLeave={() => setHover(false)} d={{ base: "inline-flex", lg: "none" }} variant="mobileNav" - bg={ - transparentNavbar ? "transparent" : "rgba(255, 255, 255, .15)" - } + bg={transparentNavbar ? "transparent" : "rgba(255, 255, 255, .15)"} type="button" border={transparentNavbar ? "1px solid #0068ff" : "none"} id="mobile-menu-button" From a42c25dd6474bcf71e98318af49c7a0260631ca7 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 30 Nov 2021 20:03:26 -0600 Subject: [PATCH 02/15] Creating date context. --- contexts/dateContect.tsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 contexts/dateContect.tsx diff --git a/contexts/dateContect.tsx b/contexts/dateContect.tsx new file mode 100644 index 0000000..83d51e1 --- /dev/null +++ b/contexts/dateContect.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; +import { useState } from "react"; +// TODO: import types + +const DateContext = React.createContext(null); + +function DateContextProvider({ + children, +}: { + children: React.ReactNode; +}): React.ReactElement | null { + const [currentDate] = useState(new Date()); + + const dateProviderValues = { + currentDate, + }; + + return ( + + {children} + + ); +} + +export { DateContextProvider, DateContext }; From ff9399b85eee84b0c6a45b7fd12fea3021e66b74 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 30 Nov 2021 20:12:01 -0600 Subject: [PATCH 03/15] Fix typos and spelling --- contexts/dateContect.tsx | 25 ------------------------- contexts/dateContext.tsx | 25 +++++++++++++++++++++++++ 2 files changed, 25 insertions(+), 25 deletions(-) delete mode 100644 contexts/dateContect.tsx create mode 100644 contexts/dateContext.tsx diff --git a/contexts/dateContect.tsx b/contexts/dateContect.tsx deleted file mode 100644 index 83d51e1..0000000 --- a/contexts/dateContect.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from "react"; -import { useState } from "react"; -// TODO: import types - -const DateContext = React.createContext(null); - -function DateContextProvider({ - children, -}: { - children: React.ReactNode; -}): React.ReactElement | null { - const [currentDate] = useState(new Date()); - - const dateProviderValues = { - currentDate, - }; - - return ( - - {children} - - ); -} - -export { DateContextProvider, DateContext }; diff --git a/contexts/dateContext.tsx b/contexts/dateContext.tsx new file mode 100644 index 0000000..e3060b2 --- /dev/null +++ b/contexts/dateContext.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; +import { useState } from "react"; +// TODO: import types + +const CalenderContext = React.createContext(null); + +function CalenderContextProvider({ + children, +}: { + children: React.ReactNode; +}): React.ReactElement | null { + const [today] = useState(new Date()); + + const dateProviderValues = { + today, + }; + + return ( + + {children} + + ); +} + +export { CalenderContextProvider, CalenderContext }; From cb213556ffc9ba44601e1d4c8e986b3d11c698b0 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 30 Nov 2021 21:26:27 -0600 Subject: [PATCH 04/15] Update file name to match main function name. --- contexts/CalenderContext.tsx | 109 +++++++++++++++++++++++++++++++++++ contexts/dateContext.tsx | 25 -------- 2 files changed, 109 insertions(+), 25 deletions(-) create mode 100644 contexts/CalenderContext.tsx delete mode 100644 contexts/dateContext.tsx diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx new file mode 100644 index 0000000..f58716b --- /dev/null +++ b/contexts/CalenderContext.tsx @@ -0,0 +1,109 @@ +import React, { createContext, useState, ReactNode, useEffect } from "react"; +import { endOfMonth, getDate } from "date-fns"; +// TODO: import types + +type days = + | "Sunday" + | "Monday" + | "Tuesday" + | "Wednesday" + | "Thursday" + | "Friday" + | "Saturday"; + +interface CalenderContextState { + today: Date; + selectedMonth: Date; + endOfCurrMonth: Date; + lastDay: number; + daysOfMonth: [number] | [null]; + daysOfWeek: { + startOfWeek: { + Sunday: [days]; + Monday: [days]; + }; + }; +} + +const CalenderContext = createContext({} as CalenderContextState); + +const CalenderContextProvider = ({ + children, +}: { + children: ReactNode; +}): JSX.Element => { + // Today's date + const [today] = useState(new Date()); + + // Selected month & year + const [selectedMonth, setSelectedMonth] = useState(today); + const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState(endOfMonth(selectedMonth)); + const [lastDayOfSelectedMonth, setLastDayOfSelectedMonth] = useState(getDate(endOfSelectedMonth)); + + const [daysOfMonth, setDaysOfMonth] = useState<[number] | [null]>([null]); + + useEffect(() => { + if ( + lastDayOfSelectedMonth !== daysOfMonth[daysOfMonth.length - 1] || + daysOfMonth === null + ) { + const newDaysOfMonth: [number] = [0]; + for (let i = daysOfMonth.length; i < lastDayOfSelectedMonth; i++) { + if (newDaysOfMonth.length === 1) { + newDaysOfMonth[0] = 1; + } + + newDaysOfMonth.push(newDaysOfMonth.length + 1); + } + + setDaysOfMonth(newDaysOfMonth); + } + }, [selectedMonth, lastDayOfCurrMonth]); + + // Calender Layout + const daysOfWeek = { + startOfWeek: { + Sunday: [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + ], + Monday: [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday", + ], + }, + }; + + //TODO: Create an object of arrays that will align with the days on the week. Make two sets for each start of the week setting. + + // Navigation + const prevMonth = (): void => { + + } + + const calenderContextValues = { + today, + selectedMonth, + daysOfMonth, + daysOfWeek, + prevMonth + }; + + return ( + + {children} + + ); +}; + +export { CalenderContextProvider, CalenderContext }; diff --git a/contexts/dateContext.tsx b/contexts/dateContext.tsx deleted file mode 100644 index e3060b2..0000000 --- a/contexts/dateContext.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from "react"; -import { useState } from "react"; -// TODO: import types - -const CalenderContext = React.createContext(null); - -function CalenderContextProvider({ - children, -}: { - children: React.ReactNode; -}): React.ReactElement | null { - const [today] = useState(new Date()); - - const dateProviderValues = { - today, - }; - - return ( - - {children} - - ); -} - -export { CalenderContextProvider, CalenderContext }; From 10c474c50dd390fd7df5cb41af261c3fde71beb4 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 30 Nov 2021 21:26:51 -0600 Subject: [PATCH 05/15] Updated to use context. --- components/calender/Calender.tsx | 40 ++++------------------------- components/calender/CalenderNav.tsx | 5 ++-- pages/index.tsx | 5 +++- 3 files changed, 12 insertions(+), 38 deletions(-) diff --git a/components/calender/Calender.tsx b/components/calender/Calender.tsx index f6f6a76..98a81c4 100644 --- a/components/calender/Calender.tsx +++ b/components/calender/Calender.tsx @@ -1,42 +1,12 @@ -import React from "react"; +import React, { useContext } from "react"; import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; -import { endOfMonth, getDate } from "date-fns"; import CalenderNav from "./CalenderNav"; +import { CalenderContext } from "../../contexts/CalenderContext"; const Calender = (): JSX.Element => { - const today = new Date(); - - const endOfCurrMonth = endOfMonth(today); - const lastDay = getDate(endOfCurrMonth); - - // console.info(`This month has ${lastDay} days.`); - - const daysOfMonth = []; - for (let i = daysOfMonth.length; i < lastDay; i++) { - daysOfMonth.push(daysOfMonth.length + 1); - } - - const daysOfWeek = { - Sunday: [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - ], - Monday: [ - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - "Sunday", - ], - }; + const { daysOfMonth, daysOfWeek } = useContext(CalenderContext); + // Simulated user settings context const userSettings = { theme: "default", startOfWeek: "Sunday", @@ -54,7 +24,7 @@ const Calender = (): JSX.Element => { alignContent="center" alignItems="center" > - {daysOfWeek[userSettings.startOfWeek].map((weekDay) => { + {daysOfWeek.startOfWeek[userSettings.startOfWeek].map((weekDay) => { return ( { - const today = new Date(); + const { today } = useContext(CalenderContext); const currentMonth = format(today, "LLLL uuuu"); diff --git a/pages/index.tsx b/pages/index.tsx index 8a1bedd..0505f2c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,11 +1,14 @@ import React from "react"; import { Box } from "@chakra-ui/react"; import Calender from "../components/calender/Calender"; +import { CalenderContextProvider } from "../contexts/CalenderContext"; const IndexPage = (): JSX.Element => { return ( - + + + ); }; From 68949175e76ac7880b67c61fa948379dd6445002 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 30 Nov 2021 21:27:20 -0600 Subject: [PATCH 06/15] Formatting --- contexts/CalenderContext.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index f58716b..db5add3 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -37,8 +37,12 @@ const CalenderContextProvider = ({ // Selected month & year const [selectedMonth, setSelectedMonth] = useState(today); - const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState(endOfMonth(selectedMonth)); - const [lastDayOfSelectedMonth, setLastDayOfSelectedMonth] = useState(getDate(endOfSelectedMonth)); + const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState( + endOfMonth(selectedMonth) + ); + const [lastDayOfSelectedMonth, setLastDayOfSelectedMonth] = useState( + getDate(endOfSelectedMonth) + ); const [daysOfMonth, setDaysOfMonth] = useState<[number] | [null]>([null]); @@ -87,16 +91,14 @@ const CalenderContextProvider = ({ //TODO: Create an object of arrays that will align with the days on the week. Make two sets for each start of the week setting. // Navigation - const prevMonth = (): void => { - - } + const prevMonth = (): void => {}; const calenderContextValues = { today, selectedMonth, daysOfMonth, daysOfWeek, - prevMonth + prevMonth, }; return ( From e82d9df088ec0d8c09d3a0d5a99c8fc66e6102cd Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 30 Nov 2021 21:34:27 -0600 Subject: [PATCH 07/15] Added navigation functions. --- contexts/CalenderContext.tsx | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index db5add3..dd1ba50 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -1,5 +1,5 @@ import React, { createContext, useState, ReactNode, useEffect } from "react"; -import { endOfMonth, getDate } from "date-fns"; +import { endOfMonth, getDate, sub, add } from "date-fns"; // TODO: import types type days = @@ -46,6 +46,7 @@ const CalenderContextProvider = ({ const [daysOfMonth, setDaysOfMonth] = useState<[number] | [null]>([null]); + // Populate days of the month and update them when the month changes. useEffect(() => { if ( lastDayOfSelectedMonth !== daysOfMonth[daysOfMonth.length - 1] || @@ -64,6 +65,17 @@ const CalenderContextProvider = ({ } }, [selectedMonth, lastDayOfCurrMonth]); + // Update selected month sates when the selected month is updated. + useEffect(() => { + if (endOfSelectedMonth !== endOfMonth(selectedMonth)) { + SetEndOfSelectedDMonth(endOfMonth(selectedMonth)); + } + + if (lastDayOfSelectedMonth !== getDate(endOfSelectedMonth)) { + setLastDayOfSelectedMonth(getDate(endOfSelectedMonth)); + } + }, [selectedMonth]); + // Calender Layout const daysOfWeek = { startOfWeek: { @@ -91,7 +103,21 @@ const CalenderContextProvider = ({ //TODO: Create an object of arrays that will align with the days on the week. Make two sets for each start of the week setting. // Navigation - const prevMonth = (): void => {}; + const prevMonth = (): void => { + const newMonth = sub(today, { + years: 1, + }); + + setSelectedMonth(newMonth); + }; + + const nextMonth = (): void => { + const newMonth = add(today, { + years: 1, + }); + + setSelectedMonth(newMonth); + }; const calenderContextValues = { today, From 73aca95f9cc4a9f52a6d84f3b25a9cefaedaa91b Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 30 Nov 2021 21:38:12 -0600 Subject: [PATCH 08/15] Updated types and interfaces. --- contexts/CalenderContext.tsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index dd1ba50..11e42d6 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -11,18 +11,20 @@ type days = | "Friday" | "Saturday"; + interface DaysOfWeek { + startOfWeek: { + Sunday: days[]; + Monday: days[]; + }; + } + interface CalenderContextState { today: Date; selectedMonth: Date; - endOfCurrMonth: Date; - lastDay: number; daysOfMonth: [number] | [null]; - daysOfWeek: { - startOfWeek: { - Sunday: [days]; - Monday: [days]; - }; - }; + daysOfWeek: DaysOfWeek; + prevMonth: () => void; + nextMonth: () => void; } const CalenderContext = createContext({} as CalenderContextState); @@ -77,7 +79,7 @@ const CalenderContextProvider = ({ }, [selectedMonth]); // Calender Layout - const daysOfWeek = { + const daysOfWeek: DaysOfWeek = { startOfWeek: { Sunday: [ "Sunday", @@ -125,6 +127,7 @@ const CalenderContextProvider = ({ daysOfMonth, daysOfWeek, prevMonth, + nextMonth, }; return ( From f7a35bc3f570231ecc6de351e639694f0e62e45a Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 30 Nov 2021 21:49:37 -0600 Subject: [PATCH 09/15] Linked navigation functions to navigation buttons. Calender layout props are not updating properly. --- components/calender/CalenderNav.tsx | 6 ++++-- contexts/CalenderContext.tsx | 24 +++++++++++------------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index ef02500..01832d1 100644 --- a/components/calender/CalenderNav.tsx +++ b/components/calender/CalenderNav.tsx @@ -5,15 +5,16 @@ import { format } from "date-fns"; import { CalenderContext } from "../../contexts/CalenderContext"; const CalenderNav = (): JSX.Element => { - const { today } = useContext(CalenderContext); + const { selectedMonth, prevMonth, nextMonth } = useContext(CalenderContext); - const currentMonth = format(today, "LLLL uuuu"); + const currentMonth = format(selectedMonth, "LLLL uuuu"); return ( } + onClick={() => prevMonth()} /> {currentMonth} @@ -21,6 +22,7 @@ const CalenderNav = (): JSX.Element => { } + onClick={() => nextMonth()} /> ); diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index 11e42d6..36f8e1d 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -11,15 +11,14 @@ type days = | "Friday" | "Saturday"; - interface DaysOfWeek { - startOfWeek: { - Sunday: days[]; - Monday: days[]; - }; - } +interface DaysOfWeek { + startOfWeek: { + Sunday: days[]; + Monday: days[]; + }; +} interface CalenderContextState { - today: Date; selectedMonth: Date; daysOfMonth: [number] | [null]; daysOfWeek: DaysOfWeek; @@ -65,7 +64,7 @@ const CalenderContextProvider = ({ setDaysOfMonth(newDaysOfMonth); } - }, [selectedMonth, lastDayOfCurrMonth]); + }, [selectedMonth, lastDayOfSelectedMonth]); // Update selected month sates when the selected month is updated. useEffect(() => { @@ -106,23 +105,22 @@ const CalenderContextProvider = ({ // Navigation const prevMonth = (): void => { - const newMonth = sub(today, { - years: 1, + const newMonth = sub(selectedMonth, { + months: 1, }); setSelectedMonth(newMonth); }; const nextMonth = (): void => { - const newMonth = add(today, { - years: 1, + const newMonth = add(selectedMonth, { + months: 1, }); setSelectedMonth(newMonth); }; const calenderContextValues = { - today, selectedMonth, daysOfMonth, daysOfWeek, From 127a918934a8fec99707522566b9252a0caab58f Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 1 Dec 2021 13:05:59 -0600 Subject: [PATCH 10/15] Fixing grammar and spelling. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f4f1154..ef49844 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ I cannot guarantee functionality or stability if used on other OSs Ubuntu versio After cloning the app you will need to install the dependencies and packages. The app uses Yarn v2. Run this command to install using Yarn v2: ``` -Yarn install +yarn install ``` ### Upgrading Packages From 77a6bf777aaad759bc8c21c6a496e01c5f1df8a6 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 1 Dec 2021 13:57:08 -0600 Subject: [PATCH 11/15] Updated days of month population loop. --- contexts/CalenderContext.tsx | 61 ++++++++++++++++++++---------------- 1 file changed, 34 insertions(+), 27 deletions(-) diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index 36f8e1d..5ca2529 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -20,7 +20,7 @@ interface DaysOfWeek { interface CalenderContextState { selectedMonth: Date; - daysOfMonth: [number] | [null]; + daysOfMonth: [number]; daysOfWeek: DaysOfWeek; prevMonth: () => void; nextMonth: () => void; @@ -38,42 +38,49 @@ const CalenderContextProvider = ({ // Selected month & year const [selectedMonth, setSelectedMonth] = useState(today); - const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState( - endOfMonth(selectedMonth) - ); - const [lastDayOfSelectedMonth, setLastDayOfSelectedMonth] = useState( - getDate(endOfSelectedMonth) + const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState( + getDate(endOfMonth(selectedMonth)) ); - const [daysOfMonth, setDaysOfMonth] = useState<[number] | [null]>([null]); + const [daysOfMonth, setDaysOfMonth] = useState<[number]>([0]); - // Populate days of the month and update them when the month changes. - useEffect(() => { - if ( - lastDayOfSelectedMonth !== daysOfMonth[daysOfMonth.length - 1] || - daysOfMonth === null - ) { - const newDaysOfMonth: [number] = [0]; - for (let i = daysOfMonth.length; i < lastDayOfSelectedMonth; i++) { - if (newDaysOfMonth.length === 1) { - newDaysOfMonth[0] = 1; - } + // Update or populate the days of the month. + const populateDays = (): void => { + let newDaysOfMonth: [number] = [...daysOfMonth]; - newDaysOfMonth.push(newDaysOfMonth.length + 1); - } - - setDaysOfMonth(newDaysOfMonth); + if (newDaysOfMonth.length > 1) { + newDaysOfMonth = [0]; } - }, [selectedMonth, lastDayOfSelectedMonth]); + + for (let i = 1; i < endOfSelectedMonth; i++) { + if (newDaysOfMonth[i - 1] === 0) { + newDaysOfMonth[i - 1] = i; + } else { + newDaysOfMonth.push(i + 1); + } + } + + setDaysOfMonth(newDaysOfMonth); + }; // Update selected month sates when the selected month is updated. + + // Update days of month. useEffect(() => { - if (endOfSelectedMonth !== endOfMonth(selectedMonth)) { - SetEndOfSelectedDMonth(endOfMonth(selectedMonth)); + if (daysOfMonth === null) { + populateDays(); + } else { + if (daysOfMonth[daysOfMonth.length - 1] !== endOfSelectedMonth) { + populateDays(); + } } - if (lastDayOfSelectedMonth !== getDate(endOfSelectedMonth)) { - setLastDayOfSelectedMonth(getDate(endOfSelectedMonth)); + }, [selectedMonth, endOfSelectedMonth]); + + // Update end of month. + useEffect(() => { + if (endOfSelectedMonth !== getDate(endOfMonth(selectedMonth))) { + SetEndOfSelectedDMonth(getDate(endOfMonth(selectedMonth))); } }, [selectedMonth]); From 50f7788a372367aa307a78bb27cf22559499f79c Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 1 Dec 2021 14:16:11 -0600 Subject: [PATCH 12/15] Update version and hover cursor. --- theme/layout/Header.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx index c46f3c7..2fdda23 100644 --- a/theme/layout/Header.tsx +++ b/theme/layout/Header.tsx @@ -4,10 +4,8 @@ import { HStack, Box, IconButton, - Flex, Menu, MenuButton, - VStack, } from "@chakra-ui/react"; import { Icon } from "@iconify/react"; import DesktopNav from "./DesktopNav"; @@ -15,7 +13,7 @@ import MobileNav from "./MobileNav"; const Header = (): JSX.Element => { const appName = "LCM Potty Chart"; - const appVersion = "v0.0.2.6-pre-alpha"; + const appVersion = "v0.0.3.0-pre-alpha"; // Add transparency while not at the top of the page. const [transparentNavbar, setTransparentNavbar] = useState(false); @@ -108,6 +106,9 @@ const Header = (): JSX.Element => { ml={4} d={{ base: "flex", lg: "none" }} spacing="5px" + _hover={{ + cursor: "default", + }} > {appName} @@ -138,6 +139,9 @@ const Header = (): JSX.Element => { alignItems="center" height="auto" spacing="5px" + _hover={{ + cursor: "default", + }} > {appName} From 5a582c902f4538ab1784d6705754d94b132ab2bc Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 1 Dec 2021 14:16:21 -0600 Subject: [PATCH 13/15] Update hover cursor. --- components/calender/CalenderNav.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index 01832d1..9fbd69f 100644 --- a/components/calender/CalenderNav.tsx +++ b/components/calender/CalenderNav.tsx @@ -16,7 +16,13 @@ const CalenderNav = (): JSX.Element => { icon={} onClick={() => prevMonth()} /> - + {currentMonth} Date: Wed, 1 Dec 2021 14:16:32 -0600 Subject: [PATCH 14/15] Formatting --- contexts/CalenderContext.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index 5ca2529..f8eb3e6 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -74,7 +74,6 @@ const CalenderContextProvider = ({ populateDays(); } } - }, [selectedMonth, endOfSelectedMonth]); // Update end of month. From 994718b71378db72fed3927ed109323a8aed5398 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 1 Dec 2021 14:25:27 -0600 Subject: [PATCH 15/15] Upgrading packages --- package.json | 4 ++-- yarn.lock | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 6ae99b8..957725d 100644 --- a/package.json +++ b/package.json @@ -17,10 +17,10 @@ }, "dependencies": { "@chakra-ui/react": "^1.7.2", - "@emotion/react": "^11.6.0", + "@emotion/react": "^11.7.0", "@emotion/styled": "^11.6.0", "@types/react": "^17.0.37", - "date-fns": "^2.26.0", + "date-fns": "^2.27.0", "framer-motion": "^5.3.3", "next": "12.0.4", "react": "17.0.2", diff --git a/yarn.lock b/yarn.lock index 1276e92..61ba93e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1031,9 +1031,9 @@ __metadata: languageName: node linkType: hard -"@emotion/react@npm:^11.6.0": - version: 11.6.0 - resolution: "@emotion/react@npm:11.6.0" +"@emotion/react@npm:^11.7.0": + version: 11.7.0 + resolution: "@emotion/react@npm:11.7.0" dependencies: "@babel/runtime": ^7.13.10 "@emotion/cache": ^11.6.0 @@ -1050,7 +1050,7 @@ __metadata: optional: true "@types/react": optional: true - checksum: 4fb2d108dc32716d1f162026ac5fdbd0662e3b435a34fb324629d72bb6bff61b18ac8975b51457c16ffa41543bade5d07558566ab76420b3926fbb9159441232 + checksum: 8b50d61caabe04ae413ae23b98c170da643754ec89f25eb001464095685686585d0f88988bc36432f231e6de6abdbee73308c42ba427de9eaaf5a54d7f2f6ae5 languageName: node linkType: hard @@ -2637,10 +2637,10 @@ __metadata: languageName: node linkType: hard -"date-fns@npm:^2.26.0": - version: 2.26.0 - resolution: "date-fns@npm:2.26.0" - checksum: 49ad59bc788134a6552ef4e4af0d18792001c1ca0070d543de4f36aba5761058b6e6a57b8ca51dd3b0f07f3bd55376b8bc69602bd7940648ba3869c5253c6ae8 +"date-fns@npm:^2.27.0": + version: 2.27.0 + resolution: "date-fns@npm:2.27.0" + checksum: db62036b3816eb0322c9532b353beac7f660a91e1a55dbd21c14893c621ebb8509f21c66ba287844dabd34dee0207edd54a9537bce6bb7cab9383dedc6b8bc90 languageName: node linkType: hard @@ -4402,12 +4402,12 @@ __metadata: resolution: "lucid-creations-media-potty-chart@workspace:." dependencies: "@chakra-ui/react": ^1.7.2 - "@emotion/react": ^11.6.0 + "@emotion/react": ^11.7.0 "@emotion/styled": ^11.6.0 "@iconify/react": ^3.1.0 "@types/react": ^17.0.37 "@typescript-eslint/eslint-plugin": ^5.4.0 - date-fns: ^2.26.0 + date-fns: ^2.27.0 eslint: <8.0.0 eslint-config-next: 12.0.3 eslint-config-prettier: ^8.3.0