diff --git a/data/stickerSeeder.ts b/data/stickerSeeder.ts index 8e514b7..908b2b0 100644 --- a/data/stickerSeeder.ts +++ b/data/stickerSeeder.ts @@ -24,6 +24,7 @@ const generateSticker = (): -2 | -1 | 0 | 1 | 2 => { } }; +// TODO: Update so seeder takes in a month or date to then generate the stickers for it. /** * This seeder is to simulate the date and sticker info from the database. * Filling up an array for the current month with sticker from ths first to diff --git a/src/components/calender/Day.tsx b/src/components/calender/Day.tsx index 4c9d624..9667dea 100644 --- a/src/components/calender/Day.tsx +++ b/src/components/calender/Day.tsx @@ -90,11 +90,12 @@ const Day = ({ return isOverflow ? ( {`${getDate(currDateObj)}`} @@ -126,6 +126,8 @@ const Day = ({ ) : ( { setStep(0); setSelectedSticker(null); @@ -168,13 +168,15 @@ const Day = ({ : tutorial === "edit" && !isToday && isBefore(currDateObj, endOfDay(currDate)) - ? "gray.600" - : "transparent" + ? "gray.600" + : "transparent" : "transparent", border: "1px solid #FFF" }} > 10 @@ -182,8 +184,6 @@ const Day = ({ : "0px 9px 3px 9px" : "auto" } - h="auto" - w="auto" border={isToday ? "1px solid #0068ff" : "0px"} borderRadius={isToday ? "100px" : "0px"} > diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index 44a059d..4f4ea0e 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -73,24 +73,24 @@ const Calender = ({ {weekdays.map((weekDay) => { return ( {weekDay} @@ -110,9 +110,9 @@ const Calender = ({ })} @@ -151,7 +151,7 @@ const Calender = ({ id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index abd21fc..8c07174 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -60,7 +60,8 @@ const CalenderExample = ({ useEffect(() => { const getCurrentWeek = (): MonthDay[] => { - let foundWeek: MonthDay[] | null; + let foundWeek: MonthDay[]; + for (const week in month) { const currWeek = month[week]; @@ -82,91 +83,121 @@ const CalenderExample = ({ }, [currWeek, dispatch, month]); return ( - - + - {weekdays.map((weekDay) => { - return ( - - - {weekDay} - - - {weekDay.substring(0, 3)} - - - {weekDay.substring(0, 2)} - - - ); - })} - - - {currWeek && - currWeek.map((day: MonthDay) => { - const { date, isOverflow, overflowDirection } = day; - - const toDateObj: Date = new Date(date); - - let sticker = null; - - let id = ""; - - stickersMonth.map((stickerDay) => { - const { date: stickerDate } = stickerDay; - - if (isSameDay(new Date(stickerDate), toDateObj)) { - sticker = stickerDay.sticker; - - id = stickerDay.id; - } - }); - + + {weekdays.map((weekDay) => { return ( - + + + {weekDay} + + + {weekDay.substring(0, 3)} + + + {weekDay.substring(0, 2)} + + ); })} - + + + {currWeek && + currWeek.map((day: MonthDay) => { + const { date, isOverflow, overflowDirection } = day; + + const toDateObj: Date = new Date(date); + + let sticker = null; + + let id = ""; + + stickersMonth.map((stickerDay) => { + const { date: stickerDate } = stickerDay; + + if (isSameDay(new Date(stickerDate), toDateObj)) { + sticker = stickerDay.sticker; + + id = stickerDay.id; + } + }); + + return ( + + ); + })} + + + {type === "edit" && ( + + + { + "Not being able to edit within this tutorial when the current date is the start of the month is a known bug." + } + + {"This bug will be fixed in beta v2."} + + )} ); }; diff --git a/src/components/tutorial/sections/TutorialLinks.tsx b/src/components/tutorial/sections/TutorialLinks.tsx index 8c1c34c..4595ae4 100644 --- a/src/components/tutorial/sections/TutorialLinks.tsx +++ b/src/components/tutorial/sections/TutorialLinks.tsx @@ -18,9 +18,9 @@ const TutorialLinks = (): JSX.Element => { {"More Info"} { })} { 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" @@ -99,18 +99,18 @@ const Header = (): JSX.Element => { > {/* Logo | Site Name */} { setOpen(!open)} - onMouseEnter={() => setHover(true)} - onMouseLeave={() => setHover(false)} display={{ base: "inline-flex", lg: "none" }} - variant="mobileNav" bg={transparentNavbar ? "transparent" : "rgba(255, 255, 255, .15)"} - type="button" border={transparentNavbar ? "1px solid #0068ff" : "none"} - id="mobile-menu-button" + variant="mobileNav" + type="button" + onClick={() => setOpen(!open)} + onMouseEnter={() => setHover(true)} + onMouseLeave={() => setHover(false)} /> diff --git a/src/theme/layout/MobileNav.tsx b/src/theme/layout/MobileNav.tsx index 5af35f6..e0a604f 100644 --- a/src/theme/layout/MobileNav.tsx +++ b/src/theme/layout/MobileNav.tsx @@ -17,12 +17,12 @@ const MobileNav: FC = ({ updateOpen }: MobileNavProps) => { {navItems.map((navItem: NavItem, index: number) => { return (