diff --git a/src/components/calender/DatePicker.tsx b/src/components/calender/DatePicker.tsx index 0caa452..e0efde5 100644 --- a/src/components/calender/DatePicker.tsx +++ b/src/components/calender/DatePicker.tsx @@ -189,7 +189,7 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => { > { const selectedDateObj = new Date(selectedDate); const currDateObj = new Date(date); + const isToday = isTodayFun(currDateObj); const handleNav = (direction: "next" | "prev") => { if (direction === "next") { @@ -87,95 +88,137 @@ const Day = ({ // TODO: When the valid date range is created, disallow pointer cursor outside of the date range. - return ( - - {isOverflow && ( - handleNav(overflowDirection)} - spacing="0.5rem" - alignContent="center" - justifyContent="flex-start" - pt={2} - > - - {`${getDate(currDateObj)}`} - - {isLoading ? ( - - - - - - ) : ( - - - - )} - + return isOverflow ? ( + handleNav(overflowDirection)} + spacing="0.5rem" + alignContent="center" + justifyContent="flex-start" + pt={2} + > + + {`${getDate(currDateObj)}`} + + {isLoading ? ( + + + + + + ) : ( + + + )} - {!isOverflow && ( - { - setStep(0); - setSelectedSticker(null); - setIsOpen(true); - }} - alignContent="center" - justifyContent="flex-start" - pt={2} - _hover={{ - cursor: isBefore(currDateObj, endOfDay(currDate)) - ? "pointer" - : "default", - background: "gray.700", - border: "1px solid #FFF" - }} - > - 10 - ? "0px 6px 3px 6px" - : "0px 9px 3px 9px" - : "auto" - } - h="auto" - w="auto" - border={isToday ? "1px solid #0068ff" : "0px"} - borderRadius={isToday ? "100px" : "0px"} - > - {`${getDate(currDateObj)}`} - - {isLoading ? ( - - - - - - ) : ( - - - + + ) : ( + { + setStep(0); + setSelectedSticker(null); + setIsOpen(true); + }} + alignContent="center" + justifyContent="flex-start" + pt={2} + _hover={{ + cursor: isBefore(currDateObj, endOfDay(currDate)) + ? "pointer" + : "default", + bg: tutorial + ? tutorial === "add" && isToday + ? "gray.600" + : tutorial === "edit" && + !isToday && + isBefore(currDateObj, endOfDay(currDate)) + ? "gray.600" + : "transparent" + : "transparent", + border: "1px solid #FFF" + }} + > + 10 + ? "0px 6px 3px 6px" + : "0px 9px 3px 9px" + : "auto" + } + h="auto" + w="auto" + border={isToday ? "1px solid #0068ff" : "0px"} + borderRadius={isToday ? "100px" : "0px"} + > + {`${getDate(currDateObj)}`} + + {isLoading ? ( + + + + + + ) : ( + + + + )} + {tutorial ? ( + + {tutorial.toLowerCase() === "add" && isToday && !isLoading && ( + )} - - {isBefore(currDateObj, endOfDay(currDate)) && !isLoading && ( + {tutorial.toLowerCase() === "edit" && + !isToday && + isBefore(currDateObj, endOfDay(currDate)) && + !isLoading && ( )} - - + + ) : ( + + {isBefore(currDateObj, endOfDay(currDate)) && !isLoading && ( + + )} + )} - + ); }; diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index 242c573..dc0d660 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -10,7 +10,6 @@ const Calender = ({ date: newDate, isLoading }: UpdateCalendarProps): JSX.Element => { - const dispatch = useAppDispatch(); // * Month * // @@ -67,7 +66,7 @@ const Calender = ({ // TODO: Move the weekdays into it's own component for responsiveness. return ( - + ); diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index a6b0578..00f005f 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -6,12 +6,10 @@ import { updateMonth } from "../../features/calender"; import Day from "../calender/Day"; interface CalenderExampleProps { - type: "add" | "edit" + type: "add" | "edit"; } -const CalenderExample = ({ - type -}: CalenderExampleProps): JSX.Element => { +const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { // TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example. // TODO: Add highlight to the current date for the add example and highlight other dates when the edit example is used. @@ -27,7 +25,7 @@ const CalenderExample = ({ const selectedDate: SelectedDateInfo = useAppSelector( (state) => state.calender.selectedDateInfo ); - const { layout } = selectedDate + const { layout } = selectedDate; // * Stickers * // @@ -66,15 +64,15 @@ const CalenderExample = ({ }); } - return foundWeek || [] as MonthDay[]; - } + return foundWeek || ([] as MonthDay[]); + }; - const [currWeek, setCurrWeek] = useState(getCurrentWeek()); + const [currWeek /*, setCurrWeek*/] = useState(getCurrentWeek()); console.info(currWeek); return ( - + ); - }) - } + })} ); diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index a3344b3..2c38b9c 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -1,5 +1,14 @@ -import { Box, Button, Divider, Heading, HStack, Text, VStack } from "@chakra-ui/react"; -import React from "react"; +import { + Box, + Button, + Checkbox, + Divider, + Heading, + HStack, + Text, + VStack +} from "@chakra-ui/react"; +import React, { useState } from "react"; import CalenderExample from "./CalenderExample"; interface TutorialProps { @@ -11,6 +20,26 @@ const Tutorial = ({ setTutorialComplete, setTempTutorialComplete }: TutorialProps): JSX.Element => { + const [rememberComplete, setRememberComplete] = useState(false); + + const handleComplete = (): void => { + if (rememberComplete) { + setTutorialComplete(); + } + + if (!rememberComplete) { + setTempTutorialComplete(); + } + }; + + const handleSkip = (): void => { + setTempTutorialComplete(); + }; + + const handleUpdateCheck = (): void => { + setRememberComplete(!rememberComplete); + }; + return ( {"A Lucid Creations Media Project"} - + {/* About the app container */} - {"An app that mimics a potty/star chart for a potty training toddler or child."} - {"It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way."} - {"The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship."} - {"This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely."} - + + { + "An app that mimics a potty/star chart for a potty training toddler or child." + } + + + { + "It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way." + } + + + { + "The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship." + } + + + { + "This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely." + } + - + {/* Functionality of the app */} - + {"Current Functionality"} - {"The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use."} + + { + "The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use." + } + {"Ability to add a sticker to the current date."} - {"Ability to add edit a sticker from a previous date with a confirmation prompt."} + + { + "Ability to add edit a sticker from a previous date with a confirmation prompt." + } + - + - {/* Calender Examples Here */} - {"Calender examples here"} - - - {/* Complete Tutorial buttons */} + {/* Calender Demos */} + + + {"How to Use The Calender"} + + + + {"Add a Sticker to Today's Date"} + + + {"Select the date with a"} + {" green "} + {"border."} + + + + + + {"Add a Sticker to Previous Dates"} + + + {"Select a date with a"} + {" green "} + {"border."} + + + + + + {/* Complete tutorial */} - - + + handleUpdateCheck()} + > + {"Remember completed?"} + + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 54e8310..b8d1951 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -52,14 +52,7 @@ const IndexPage = (): JSX.Element => { }, [completedTutorial, dispatch, tutorialCompletionInfo]); return ( - + {isLoading === true ? ( diff --git a/src/theme/components/buttonStyles.ts b/src/theme/components/buttonStyles.ts index 73d5244..98c49be 100644 --- a/src/theme/components/buttonStyles.ts +++ b/src/theme/components/buttonStyles.ts @@ -36,6 +36,14 @@ const buttonStyles = { )(props) } }), + skip: (props: Dict | StyleFunctionProps) => ({ + bg: "transparent", + fontSize: "xl", + p: "2", + _hover: { + bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props) + } + }), stickerButton: (props: Dict | StyleFunctionProps) => ({ bg: "transparent", fontSize: "4rem",