diff --git a/.eslintrc.json b/.eslintrc.json index aa20bf6..fd37a39 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,4 +1,16 @@ { + "rules": { + "comma-dangle": [ + "error", + { + "arrays": "never", + "objects": "never", + "imports": "never", + "exports": "never", + "functions": "never" + } + ] + }, "extends": [ "next", "next/core-web-vitals", diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..d0ec4af --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "trailingComma": "none", + "tabWidth": 2, + "bracketSameLine": false +} diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index a01e89d..1cc36c6 100644 --- a/components/calender/CalenderNav.tsx +++ b/components/calender/CalenderNav.tsx @@ -3,8 +3,8 @@ import { useRouter } from "next/router"; import { HStack, IconButton } from "@chakra-ui/react"; import { Icon } from "@iconify/react"; import { sub, add, format } from "date-fns"; -import { CalenderContext } from "../../contexts/CalenderContext"; import DatePicker from "./DatePicker"; +import { CalenderContext } from "../../contexts/CalenderContext"; const CalenderNav = (): JSX.Element => { const { selectedDate } = useContext(CalenderContext); @@ -14,7 +14,7 @@ const CalenderNav = (): JSX.Element => { const handleNavButtons = (direction: "next" | "prev") => { if (direction === "next") { const newMonth = add(selectedDate, { - months: 1, + months: 1 }); const year = format(newMonth, "y"); @@ -23,7 +23,7 @@ const CalenderNav = (): JSX.Element => { router.push(`/calendar/${year}/${month}`); } else if (direction === "prev") { const newMonth = sub(selectedDate, { - months: 1, + months: 1 }); const year = format(newMonth, "y"); diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx index 1130b08..dfd62a6 100644 --- a/components/calender/DatePicker.tsx +++ b/components/calender/DatePicker.tsx @@ -14,7 +14,7 @@ import { PopoverContent, PopoverHeader, PopoverTrigger, - VStack, + VStack } from "@chakra-ui/react"; import { Formik, @@ -22,11 +22,10 @@ import { FormikProps, Form, Field, - FieldProps, + FieldProps } from "formik"; -import { format } from "date-fns"; -import { CalenderContext } from "../../contexts/CalenderContext"; import FormValidateEmoji from "./FormValidateEmoji"; +import { CalenderContext } from "../../contexts/CalenderContext"; interface UpdateCalendarProps { year: number; @@ -35,9 +34,7 @@ interface UpdateCalendarProps { } const DatePicker = (): JSX.Element => { - const { selectedDate } = useContext(CalenderContext); - - const currentMonth = format(selectedDate, "LLLL uuuu"); + const { title } = useContext(CalenderContext); const router = useRouter(); @@ -57,7 +54,7 @@ const DatePicker = (): JSX.Element => { const date: UpdateCalendarProps = { year: parseInt(dateArr[0]), month: parseInt(dateArr[1]), - day: parseInt(dateArr[2]), + day: parseInt(dateArr[2]) }; if (!/^(19|20)\d{2}$/.test(`${date.year}`)) { @@ -97,7 +94,7 @@ const DatePicker = (): JSX.Element => { const date: UpdateCalendarProps = { year: parseInt(dateArr[0]), month: parseInt(dateArr[1]), - day: parseInt(dateArr[2]), + day: parseInt(dateArr[2]) }; return resolve(router.push(`/calendar/${date.year}/${date.month}`)); @@ -116,15 +113,15 @@ const DatePicker = (): JSX.Element => { bg: "gray.900", borderColor: "white", _placeholder: { - color: "white", + color: "white" }, _focus: { bg: "#000", color: "#FFF", borderColor: "#63b3ed", boxShadow: "0 0 0 1px #63b3ed", - zIndex: "1", - }, + zIndex: "1" + } }; const initRef = useRef(); @@ -134,7 +131,7 @@ const DatePicker = (): JSX.Element => { @@ -148,7 +145,7 @@ const DatePicker = (): JSX.Element => { { handleSubmit(data) @@ -156,8 +153,8 @@ const DatePicker = (): JSX.Element => { actions.setSubmitting(false); actions.resetForm({ values: { - date: "", - }, + date: "" + } }); }) .catch(() => { @@ -165,11 +162,15 @@ const DatePicker = (): JSX.Element => { }); }} > - {(formProps: FormikProps<{ date: string }>) => ( + {( + formProps: FormikProps<{ + date: string; + }> + ) => (
{ boxShadow: "0 0 0 1px #00c17c", _hover: { borderColor: "brand.valid", - boxShadow: "0 0 0 1px #00c17c", - }, + boxShadow: "0 0 0 1px #00c17c" + } } : "")} /> diff --git a/components/calender/FormValidateEmoji.tsx b/components/calender/FormValidateEmoji.tsx index 2edbd19..a231114 100644 --- a/components/calender/FormValidateEmoji.tsx +++ b/components/calender/FormValidateEmoji.tsx @@ -5,7 +5,7 @@ interface FormValidateEmojiProps { } const FormValidateEmoji: FC = ({ - type, + type }: FormValidateEmojiProps) => { interface Validations { [key: string]: JSX.Element; @@ -26,7 +26,7 @@ const FormValidateEmoji: FC = ({ ✔ - ), + ) }; return validations[`${type}`]; diff --git a/components/calender/index.tsx b/components/calender/index.tsx index 63e77b9..3ce2184 100644 --- a/components/calender/index.tsx +++ b/components/calender/index.tsx @@ -2,6 +2,9 @@ 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 { getDate, sub, add, getYear, getMonth } from "date-fns"; +import { useRouter } from "next/router"; +// TODO: import types interface UpdateCalendarProps { year: number; @@ -10,28 +13,32 @@ interface UpdateCalendarProps { } const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { - const { daysOfMonth, daysOfWeek, setDate } = useContext(CalenderContext); + const { selectedDate, layout, updateDate } = useContext(CalenderContext); + const router = useRouter(); useEffect(() => { if (newDate) { const { year, month, day } = newDate; if (year > 0 && month > 0 && day > 0) { - setDate(newDate); + updateDate(newDate); } else { console.warn("Invalid date format: ", newDate); } } - }, [daysOfMonth, daysOfWeek, newDate, setDate]); + }, [newDate, updateDate]); // Simulated user settings context const userSettings = { theme: "default", - startOfWeek: "Sunday", + startOfWeek: "Sunday" }; + const currMonth = layout[`${userSettings.startOfWeek.toLowerCase()}`]; + const { month, weekdays } = currMonth; + return ( - + { alignContent="center" alignItems="center" > - {daysOfWeek.startOfWeek[userSettings.startOfWeek].map((weekDay) => { + {weekdays.map((weekDay) => { return ( { // alignContent="center" alignItems="center" > - {daysOfMonth.map((monthDay) => { - return ( - - - {`Day ${monthDay}`} - - - ); + {Object.keys(month).map((week) => { + const thisWeek = month[week]; + + return thisWeek.map((day) => { + const { date, isOverflow, overflowDirection } = day; + + return ( + { + if (overflowDirection === "next") { + console.log(overflowDirection); + const newMonth = add(selectedDate, { months: 1 }); + + const year = getYear(newMonth); + const month = getMonth(newMonth) + 1; + + router.push(`/calendar/${year}/${month}`); + } else if (overflowDirection === "prev") { + const newMonth = sub(selectedDate, { months: 1 }); + + const year = getYear(newMonth); + const month = getMonth(newMonth) + 1; + + router.push(`/calendar/${year}/${month}`); + } + } + })} + > + + {`Day ${getDate(date)}`} + + + ); + }); })} diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index c16b2a3..89b32ae 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -1,8 +1,19 @@ -import React, { createContext, useState, ReactNode, useEffect } from "react"; -import { endOfMonth, getDate, sub, compareAsc } from "date-fns"; +import React, { createContext, useState, ReactNode } from "react"; +import { + format, + startOfMonth, + endOfMonth, + getDate, + add, + sub, + set, + isAfter, + isBefore, + compareAsc +} from "date-fns"; // TODO: import types -type days = +type Days = | "Sunday" | "Monday" | "Tuesday" @@ -10,11 +21,47 @@ type days = | "Thursday" | "Friday" | "Saturday"; -interface DaysOfWeek { - startOfWeek: { - Sunday: days[]; - Monday: days[]; + +type DaysOfWeek = Days[]; + +interface WeekDays { + sunday: DaysOfWeek; + monday: DaysOfWeek; +} + +interface MonthDay { + isOverflow: boolean; + overflowDirection: "prev" | "next" | null; + date: Date; +} + +interface Month { + week1: MonthDay[]; + week2: MonthDay[]; + week3: MonthDay[]; + week4: MonthDay[]; + week5: MonthDay[]; + week6: MonthDay[]; +} + +interface MonthInfo { + date: Date; + title: string; +} + +interface MonthLayout { + sunday: { + weekdays: DaysOfWeek; + month: Month; }; + monday: { + weekdays: DaysOfWeek; + month: Month; + }; +} + +interface MonthContext extends MonthInfo { + layout: MonthLayout; } interface UpdateCalendarProps { @@ -23,158 +70,217 @@ interface UpdateCalendarProps { day: number; } -interface Month { - week1: Date[]; - week2: Date[]; - week3: Date[]; - week4: Date[]; - week5: Date[]; - week6: Date[]; -} - -interface Calendar { - startOfWeek: { - Sunday: Month; - Monday: Month; - }; -} - -// Will replace all states and be used in redis as a form of memoization. -interface MonthInfo { - date: Date; - layout: Calendar; - startWeekday: string; - endWeekday: string; - days: number; -} - -interface CurrentMonth { - prev: MonthInfo; - curr: MonthInfo; - next: MonthInfo; -} - -interface CalenderMemoize { - String: CurrentMonth; -} - interface CalenderContextState { selectedDate: Date; - daysOfMonth: [number]; - daysOfWeek: DaysOfWeek; - setDate: (date: UpdateCalendarProps) => boolean; + title: string; + layout: MonthLayout; + updateDate: (input: UpdateCalendarProps) => void; } const CalenderContext = createContext({} as CalenderContextState); const CalenderContextProvider = ({ - children, + children }: { children: ReactNode; }): JSX.Element => { - const indexToDay = { - startOfWeek: { - Sunday: { - 0: "Sunday", - 1: "Monday", - 2: "Tuesday", - 3: "Wednesday", - 4: "Thursday", - 5: "Friday", - 6: "Saturday", - }, - Monday: { - 0: "Monday", - 1: "Tuesday", - 2: "Wednesday", - 3: "Thursday", - 4: "Friday", - 5: "Saturday", - 6: "Sunday", - }, - }, + const weekDays: WeekDays = { + sunday: [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday" + ], + monday: [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday" + ] }; - // Selected month & year - const [selectedDate, setSelectedDate] = useState(new Date()); - // Update this to have the day of week and the last numerical day. - const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState( - getDate(endOfMonth(selectedDate)) - ); - // Update this to have the day of week and the last numerical day. - const [endOfPrevMonth, setEndOfPrevMonth] = useState( - getDate(endOfMonth(sub(selectedDate, { months: 1 }))) - ); - // Add start of selected month and start of next month, including day of week and numerical day. + //TODO Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference. - // TODO: Remove this state and all referenced to it once the date alignment algorithm is complete. - const [daysOfMonth, setDaysOfMonth] = useState<[number]>([1]); + /** + * Using date-fns, this function checks if currDate is within the month of selectedDate or not. + * @param {Date} selectedDate The current month. + * @param {Date} currDate The date to be compared to the selected month. + * @returns True if currDate is outside of the month of selectedDate, false if otherwise. + */ + const isOverflow = ( + selectedDate: Date, + currDate: Date + ): { + isOverflow: boolean; + overflowDirection: "prev" | "next" | null; + } => { + let flag = false; + let direction: "next" | "prev" | null = null; - // TODO: Repalce this with the new date alignment algorithm. - // Update or populate the days of the month. - const populateDays = (): void => { - let newDaysOfMonth: [number] = [...daysOfMonth]; + const start = startOfMonth(selectedDate); + const end = endOfMonth(selectedDate); - if (newDaysOfMonth.length > 1) { - newDaysOfMonth = [1]; + if (isBefore(currDate, start)) { + flag = true; + direction = "prev"; } - for (let i = 1; i < endOfSelectedMonth; i++) { - newDaysOfMonth.push(i + 1); + if (isAfter(currDate, end)) { + flag = true; + direction = "next"; } - setDaysOfMonth(newDaysOfMonth); + return { isOverflow: flag, overflowDirection: direction }; }; - // TODO: Update new referenced once they are added. - // Update selected month sates when the selected month is updated. + /** + * A function that will return a month layout when given a date. It produces + * an object with 6 weeks that include overflow from the previous and next month + * with all dates aligned with the day of the week. + * @param selectedDate The date of the month to generate a month layout for. + */ + const populateMonth = (selectedDate: Date): MonthLayout => { + const endLastMonth = getDate(endOfMonth(sub(selectedDate, { months: 1 }))); + const startOfSelectedMonth = format(startOfMonth(selectedDate), "iii"); - // Update days of month. - useEffect(() => { - if (daysOfMonth === null) { - populateDays(); - } else { - if (daysOfMonth[daysOfMonth.length - 1] !== endOfSelectedMonth) { - populateDays(); + const ISOToIndex = { + sunday: { + Sun: 0, + Mon: 1, + Tue: 2, + Wed: 3, + Thu: 4, + Fri: 5, + Sat: 6 + }, + monday: { + Mon: -1, + Tue: 0, + Wed: 1, + Thu: 2, + Fri: 3, + Sat: 4, + Sun: 5 } - } - }, [selectedDate, endOfSelectedMonth]); + }; - // Update end of month. - useEffect(() => { - if (endOfSelectedMonth !== getDate(endOfMonth(selectedDate))) { - SetEndOfSelectedDMonth(getDate(endOfMonth(selectedDate))); - } - }, [selectedDate]); + const sundays = { + week1: new Array(7).fill(null), + week2: new Array(7).fill(null), + week3: new Array(7).fill(null), + week4: new Array(7).fill(null), + week5: new Array(7).fill(null), + week6: new Array(7).fill(null) + }; - // Calender Layout - const daysOfWeek: DaysOfWeek = { - startOfWeek: { - Sunday: [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - ], - Monday: [ - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - "Sunday", - ], - }, + const sunStartDay = + endLastMonth - (ISOToIndex.sunday[startOfSelectedMonth] - 1); + + let sunCurrDate = set(sub(selectedDate, { months: 1 }), { + date: sunStartDay + }); + + for (const week in sundays) { + const thisWeek = sundays[week]; + + thisWeek.forEach((e, i) => { + const overflowInfo = isOverflow(selectedDate, sunCurrDate); + + const day: MonthDay = { + ...overflowInfo, + date: sunCurrDate + }; + sunCurrDate = add(sunCurrDate, { + days: 1 + }); + + sundays[week][i] = day; + }); + } + + const mondays = { + week1: new Array(7).fill(null), + week2: new Array(7).fill(null), + week3: new Array(7).fill(null), + week4: new Array(7).fill(null), + week5: new Array(7).fill(null), + week6: new Array(7).fill(null) + }; + + const monStartDay = endLastMonth - ISOToIndex.monday[startOfSelectedMonth]; + + let monCurrDate = set(sub(selectedDate, { months: 1 }), { + date: monStartDay + }); + + for (const week in mondays) { + const thisWeek = mondays[week]; + + thisWeek.forEach((e, i) => { + const overflowInfo = isOverflow(selectedDate, sunCurrDate); + + const day: MonthDay = { + ...overflowInfo, + date: monCurrDate + }; + monCurrDate = add(monCurrDate, { + days: 1 + }); + + mondays[week][i] = day; + }); + } + + const output = { + sunday: { + weekdays: weekDays.sunday, + month: sundays + }, + monday: { + weekdays: weekDays.monday, + month: mondays + } + }; + + return output; }; - //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. + const [selectedDate, setSelectedDate] = useState(new Date()); + const [selectedDateInfo, setSelectedMonthInfo] = useState({ + date: selectedDate, + title: format(selectedDate, "LLLL uuuu"), + layout: populateMonth(selectedDate) + }); - // Navigation - const setDate = (input: UpdateCalendarProps): boolean => { + //TODO Update the MonthInfo to use the new month population function on first render. + + //TODO Add a function that will update the MonthInfo state when the selected month changes. This should use the populate month function that will be made above. + /** + * Updates the selectedDateInfo state when given a date. + * @param {Date} newDate The date to set the selectedDateInfo state to. + */ + const updateDateInfo = (newDate: Date) => { + const output = { ...selectedDateInfo }; + output.date = newDate; + output.title = format(newDate, "LLLL uuuu"); + output.layout = populateMonth(newDate); + + setSelectedMonthInfo(output); + }; + + //TODO: Add a new navigation function that will take in either a direction (next, prev) or a date to go directly to. That will update the selected month and trigger the use effects below. + /** + * Updated the selectedDate state when given the appropriate object. + * @param {UpdateCalendarProps} input An object with year, month, + * and day keys that the selectedDate state will be updated to. + */ + const updateDate = (input: UpdateCalendarProps) => { const { year, month: inputMonth, day } = input; if (!year || !inputMonth || day < 0 || day > 31) { @@ -185,15 +291,16 @@ const CalenderContextProvider = ({ if (compareAsc(customDate, selectedDate) !== 0) { setSelectedDate(customDate); + updateDateInfo(customDate); } } }; const calenderContextValues = { selectedDate, - daysOfMonth, - daysOfWeek, - setDate, + title: selectedDateInfo.title, + layout: selectedDateInfo.layout, + updateDate }; return ( diff --git a/package.json b/package.json index a80e1dc..c385c4c 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "private": true, "name": "lucid-creations-media-potty-chart", "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/", - "version": "v0.0.5.2-pre-alpha", + "version": "v0.0.6.0-pre-alpha", "author": { "name": "Lucid Creations Media", "url": "https://lucidcreations.media", diff --git a/pages/_document.tsx b/pages/_document.tsx index db979dd..01b31db 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -13,8 +13,8 @@ class Document extends NextDocument { - - + + diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index aaa6945..83f8d88 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -22,14 +22,14 @@ const DateRoute: React.FC = () => { return { year: 0, month: 0, - day: 0, + day: 0 }; } const date = { year: 0, month: 0, - day: 0, + day: 0 }; if (/^(19|20)\d{2}$/.test(`${dateArr[0]}`)) { @@ -58,7 +58,9 @@ const DateRoute: React.FC = () => { const parsedSlug = slug.map((e) => { return parseInt(e); }); - setDate({ ...validateDateInput(parsedSlug) }); + setDate({ + ...validateDateInput(parsedSlug) + }); } }, [slug]); diff --git a/pages/index.tsx b/pages/index.tsx index 5f76f49..7a59429 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -14,8 +14,9 @@ const IndexPage = (): JSX.Element => { const date = useRef({ year: parseInt(format(new Date(), "y")), month: parseInt(format(new Date(), "M")), - day: parseInt(format(new Date(), "d")), + day: parseInt(format(new Date(), "d")) }); + return ( diff --git a/public/images/logo.svg b/public/images/logo.svg new file mode 100644 index 0000000..295413e --- /dev/null +++ b/public/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/theme/AppTheme.ts b/theme/AppTheme.ts index 794cd3b..6df0795 100644 --- a/theme/AppTheme.ts +++ b/theme/AppTheme.ts @@ -1,10 +1,10 @@ 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 = { initialColorMode: "dark", - useSystemColorMode: false, + useSystemColorMode: false }; // const breakpoints = createBreakpoints({ @@ -29,19 +29,19 @@ const AppTheme = extendTheme({ footer: "#0097a7", footerText: "black", content: "#2d3748", - patreon: "#FF424D", - }, + patreon: "#FF424D" + } }, styles: { global: { body: { - bg: "gray.900", - }, - }, + bg: "gray.900" + } + } }, components: { - Button: buttons, - }, + Button: buttons + } // breakpoints, }); diff --git a/theme/components/buttonStyles.ts b/theme/components/buttonStyles.ts index ca5c83a..1234830 100644 --- a/theme/components/buttonStyles.ts +++ b/theme/components/buttonStyles.ts @@ -3,7 +3,7 @@ import { darken, mode, StyleFunctionProps, - whiten, + whiten } from "@chakra-ui/theme-tools"; import { Dict } from "@chakra-ui/utils"; @@ -22,8 +22,8 @@ const buttonStyles = { bg: mode( whiten("brand.primary", 20), darken("brand.primary", 20) - )(props), - }, + )(props) + } }), contactSecondary: (props: Dict | StyleFunctionProps) => ({ bg: "brand.primary", @@ -33,8 +33,8 @@ const buttonStyles = { bg: mode( whiten("brand.primary", 20), darken("brand.primary", 20) - )(props), - }, + )(props) + } }), project: (props: Dict | StyleFunctionProps) => ({ bg: "transparent", @@ -50,8 +50,8 @@ const buttonStyles = { darken("brand.secondary", 20) )(props), boxShadow: - "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px", - }, + "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px" + } }), nav: (props: Dict | StyleFunctionProps) => ({ bg: "transparent", @@ -61,16 +61,16 @@ const buttonStyles = { bg: mode( whiten("brand.secondary", 20), darken("brand.secondary", 20) - )(props), - }, + )(props) + } }), stickyNav: (/* props: Dict | StyleFunctionProps */) => ({ bg: "transparent", fontSize: "md", px: "2", _hover: { - textDecoration: "underline", - }, + textDecoration: "underline" + } }), credits: (props: Dict | StyleFunctionProps) => ({ bg: "brand.main", @@ -78,8 +78,8 @@ const buttonStyles = { p: 3, color: "whiteAlpha", _hover: { - bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props), - }, + bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props) + } }), backToTop: (props: Dict | StyleFunctionProps) => ({ bg: "rgba(23, 25, 35, 0.5)", @@ -98,8 +98,8 @@ const buttonStyles = { boxShadow: "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px", color: "whiteAlpha.900", - border: "1px solid rgba(0, 134, 255, 1)", - }, + border: "1px solid rgba(0, 134, 255, 1)" + } }), collapse: (props: Dict | StyleFunctionProps) => ({ bg: "transparent", @@ -114,8 +114,8 @@ const buttonStyles = { darken("brand.secondary", 20) )(props), color: "whiteAlpha.900", - textDecoration: "none", - }, + textDecoration: "none" + } }), submit: (props: Dict | StyleFunctionProps) => ({ fontSize: "lg", @@ -132,9 +132,9 @@ const buttonStyles = { )(props), boxShadow: "rgba(252, 129, 129, .95) 0px 0px 15px, rgba(252, 129, 129, 0.75) 0px 0px 3px 1px", - border: "1px solid #FC8181", - }, - }, + border: "1px solid #FC8181" + } + } }), mobileNav: (props: Dict | StyleFunctionProps) => ({ // bg: "transparent", @@ -148,14 +148,14 @@ const buttonStyles = { darken("brand.secondary", 20) )(props), boxShadow: - "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px", + "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px" }, _expanded: { bg: "brand.primary", boxShadow: "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px", - border: "1px solid #0068ff", - }, + border: "1px solid #0068ff" + } }), patreon: (props: Dict | StyleFunctionProps) => ({ bg: "brand.patreon", @@ -166,12 +166,12 @@ const buttonStyles = { bg: mode( whiten("brand.patreon", 20), darken("brand.patreon", 20) - )(props), - }, - }), + )(props) + } + }) }, // default values for `size` and `variant` - defaultProps: {}, + defaultProps: {} }; export default buttonStyles; diff --git a/theme/layout/BackToTopButton.tsx b/theme/layout/BackToTopButton.tsx index 930b203..ea0f080 100644 --- a/theme/layout/BackToTopButton.tsx +++ b/theme/layout/BackToTopButton.tsx @@ -7,14 +7,18 @@ interface BackToTopButtonProps { } const BackToTopButton: FC = ({ - show, + show }: BackToTopButtonProps) => { return (