From 565f582b88f7e5831ce1cd056722e49ae1a1542b Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Mon, 15 Nov 2021 10:59:54 -0600 Subject: [PATCH 1/5] Upgrading packages --- package.json | 6 +-- yarn.lock | 125 ++++++++++++++++++++++++--------------------------- 2 files changed, 61 insertions(+), 70 deletions(-) diff --git a/package.json b/package.json index ea8cbc4..8f606fd 100644 --- a/package.json +++ b/package.json @@ -17,15 +17,15 @@ }, "dependencies": { "@chakra-ui/react": "^1.7.1", - "@emotion/react": "^11.5.0", - "@emotion/styled": "^11.3.0", + "@emotion/react": "^11.6.0", + "@emotion/styled": "^11.6.0", "@iconify/react": "^3.1.0", "@types/react": "^17.0.34", "framer-motion": "^5.3.0", "next": "12.0.3", "react": "17.0.2", "react-dom": "17.0.2", - "sharp": "^0.29.2" + "sharp": "^0.29.3" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.3.1", diff --git a/yarn.lock b/yarn.lock index 54d4f66..3dc6a17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -979,16 +979,16 @@ __metadata: languageName: node linkType: hard -"@emotion/cache@npm:^11.5.0": - version: 11.5.0 - resolution: "@emotion/cache@npm:11.5.0" +"@emotion/cache@npm:^11.6.0": + version: 11.6.0 + resolution: "@emotion/cache@npm:11.6.0" dependencies: "@emotion/memoize": ^0.7.4 - "@emotion/sheet": ^1.0.3 + "@emotion/sheet": ^1.1.0 "@emotion/utils": ^1.0.0 "@emotion/weak-memoize": ^0.2.5 stylis: ^4.0.10 - checksum: 8b3fac281ea201d617b594d79e4b38903ee538e9aa2117f3f99a4f952b3f93d92659a569b3b934efa31ae450b2ddd9ae435b6c77db70aa99ac8cae4cbd71450b + checksum: 3c72c50bfe06fd7ec2728988181173664183d2320305a01bb757caa6a9d485de25fccde1b173d810423d2ff88a178d5a72cc21db76b9e458311a8ce3044dd2a1 languageName: node linkType: hard @@ -1008,12 +1008,12 @@ __metadata: languageName: node linkType: hard -"@emotion/is-prop-valid@npm:^1.1.0": - version: 1.1.0 - resolution: "@emotion/is-prop-valid@npm:1.1.0" +"@emotion/is-prop-valid@npm:^1.1.1": + version: 1.1.1 + resolution: "@emotion/is-prop-valid@npm:1.1.1" dependencies: "@emotion/memoize": ^0.7.4 - checksum: 87351133ad80612138d9e34e79198635d36b238c7a5fddb4593798ecf8a2db6ac1d84e1e5e282a7fec04fb589e0cd4b1214ad080a9181671dcab2ce24ef22c1b + checksum: 5816696dae6ac79537a31fe95256e0c1f55651507204676dd9903542b102f727c16a68924e6634a89b0972f0d15b0803bb9d4e14bd0fb8a49da8a2e3956e6639 languageName: node linkType: hard @@ -1031,14 +1031,14 @@ __metadata: languageName: node linkType: hard -"@emotion/react@npm:^11.5.0": - version: 11.5.0 - resolution: "@emotion/react@npm:11.5.0" +"@emotion/react@npm:^11.6.0": + version: 11.6.0 + resolution: "@emotion/react@npm:11.6.0" dependencies: "@babel/runtime": ^7.13.10 - "@emotion/cache": ^11.5.0 + "@emotion/cache": ^11.6.0 "@emotion/serialize": ^1.0.2 - "@emotion/sheet": ^1.0.3 + "@emotion/sheet": ^1.1.0 "@emotion/utils": ^1.0.0 "@emotion/weak-memoize": ^0.2.5 hoist-non-react-statics: ^3.3.1 @@ -1050,7 +1050,7 @@ __metadata: optional: true "@types/react": optional: true - checksum: 4188b664cc5b7142cf58323d78911cfdeef106d7b26987f8e4aceb51074e99a48a16cf6c3d1aa124462d2135a7b0d2b5d1bc2bbb6ac6167010f69607d822d51a + checksum: 4fb2d108dc32716d1f162026ac5fdbd0662e3b435a34fb324629d72bb6bff61b18ac8975b51457c16ffa41543bade5d07558566ab76420b3926fbb9159441232 languageName: node linkType: hard @@ -1067,20 +1067,20 @@ __metadata: languageName: node linkType: hard -"@emotion/sheet@npm:^1.0.3": - version: 1.0.3 - resolution: "@emotion/sheet@npm:1.0.3" - checksum: 43a9b9a0e4261d40c02907bbea4d19e7c75d102fbd04e55a94e025b26b7a78bb499c2f76c9a0bd94f36bee0b0219006ab26a1ebb9eb4cbb30f2925313de30b61 +"@emotion/sheet@npm:^1.1.0": + version: 1.1.0 + resolution: "@emotion/sheet@npm:1.1.0" + checksum: a4b74e16a8fea1157413efe4904f5f679d724323cb605d66d20a0b98744422f5d411fca927ceb52e4de454a0a819c5273ca9496db9f011b4ecd17b9f1b212007 languageName: node linkType: hard -"@emotion/styled@npm:^11.3.0": - version: 11.3.0 - resolution: "@emotion/styled@npm:11.3.0" +"@emotion/styled@npm:^11.6.0": + version: 11.6.0 + resolution: "@emotion/styled@npm:11.6.0" dependencies: "@babel/runtime": ^7.13.10 "@emotion/babel-plugin": ^11.3.0 - "@emotion/is-prop-valid": ^1.1.0 + "@emotion/is-prop-valid": ^1.1.1 "@emotion/serialize": ^1.0.2 "@emotion/utils": ^1.0.0 peerDependencies: @@ -1092,7 +1092,7 @@ __metadata: optional: true "@types/react": optional: true - checksum: 5e5c1e89d2022696e44d2a44e352aba56ab0961d9c4a78eff5d1bfa3deae08487fb17641610446595471d74e956b791e619d3a9006c18e145ed849ef7062e1b5 + checksum: 612bbf114a4ca49e5b3ec4554bea1cd5aad9eeb2371babc3e6b79eab5020bd0300b9904108b621837fe715e221ba09dd131dc29918c1fd966e082d8e74fca833 languageName: node linkType: hard @@ -2641,12 +2641,12 @@ __metadata: languageName: node linkType: hard -"decompress-response@npm:^4.2.0": - version: 4.2.1 - resolution: "decompress-response@npm:4.2.1" +"decompress-response@npm:^6.0.0": + version: 6.0.0 + resolution: "decompress-response@npm:6.0.0" dependencies: - mimic-response: ^2.0.0 - checksum: 4e783ca4dfe9417354d61349750fe05236f565a4415a6ca20983a311be2371debaedd9104c0b0e7b36e5f167aeaae04f84f1a0b3f8be4162f1d7d15598b8fdba + mimic-response: ^3.1.0 + checksum: d377cf47e02d805e283866c3f50d3d21578b779731e8c5072d6ce8c13cc31493db1c2f6784da9d1d5250822120cefa44f1deab112d5981015f2e17444b763812 languageName: node linkType: hard @@ -4343,8 +4343,8 @@ __metadata: resolution: "lucid-creations-media-potty-chart@workspace:." dependencies: "@chakra-ui/react": ^1.7.1 - "@emotion/react": ^11.5.0 - "@emotion/styled": ^11.3.0 + "@emotion/react": ^11.6.0 + "@emotion/styled": ^11.6.0 "@iconify/react": ^3.1.0 "@types/react": ^17.0.34 "@typescript-eslint/eslint-plugin": ^5.3.1 @@ -4359,7 +4359,7 @@ __metadata: prettier: ^2.4.1 react: 17.0.2 react-dom: 17.0.2 - sharp: ^0.29.2 + sharp: ^0.29.3 typescript: 4.4.4 languageName: unknown linkType: soft @@ -4444,10 +4444,10 @@ __metadata: languageName: node linkType: hard -"mimic-response@npm:^2.0.0": - version: 2.1.0 - resolution: "mimic-response@npm:2.1.0" - checksum: 014fad6ab936657e5f2f48bd87af62a8e928ebe84472aaf9e14fec4fcb31257a5edff77324d8ac13ddc6685ba5135cf16e381efac324e5f174fb4ddbf902bf07 +"mimic-response@npm:^3.1.0": + version: 3.1.0 + resolution: "mimic-response@npm:3.1.0" + checksum: 25739fee32c17f433626bf19f016df9036b75b3d84a3046c7d156e72ec963dd29d7fc8a302f55a3d6c5a4ff24259676b15d915aad6480815a969ff2ec0836867 languageName: node linkType: hard @@ -4724,12 +4724,12 @@ __metadata: languageName: node linkType: hard -"node-abi@npm:^2.21.0": - version: 2.30.1 - resolution: "node-abi@npm:2.30.1" +"node-abi@npm:^3.3.0": + version: 3.3.0 + resolution: "node-abi@npm:3.3.0" dependencies: - semver: ^5.4.1 - checksum: 3f4b0c912ce4befcd7ceab4493ba90b51d60dfcc90f567c93f731d897ef8691add601cb64c181683b800f21d479d68f9a6e15d8ab8acd16a5706333b9e30a881 + semver: ^7.3.5 + checksum: 77052d97799a4fa9324e745e7aff75d87cb5e94deee6f447f91382ec099587487d243f3bb5a454e4650e5d16c30733c06e6cbfdaaa2e8b92e4493fe0b5bc2155 languageName: node linkType: hard @@ -5164,9 +5164,9 @@ __metadata: languageName: node linkType: hard -"prebuild-install@npm:^6.1.4": - version: 6.1.4 - resolution: "prebuild-install@npm:6.1.4" +"prebuild-install@npm:^7.0.0": + version: 7.0.0 + resolution: "prebuild-install@npm:7.0.0" dependencies: detect-libc: ^1.0.3 expand-template: ^2.0.3 @@ -5174,16 +5174,16 @@ __metadata: minimist: ^1.2.3 mkdirp-classic: ^0.5.3 napi-build-utils: ^1.0.1 - node-abi: ^2.21.0 + node-abi: ^3.3.0 npmlog: ^4.0.1 pump: ^3.0.0 rc: ^1.2.7 - simple-get: ^3.0.3 + simple-get: ^4.0.0 tar-fs: ^2.0.0 tunnel-agent: ^0.6.0 bin: prebuild-install: bin.js - checksum: de4313eda821305912af922700a2db04bb8e77fe8aa9c2788550f1000c026cbefc82da468ec0c0a37764c5417bd8169dbd540928535fb38d00bb9bbd673dd217 + checksum: 413783f74677a9691c286f3302ef37a9d4d6121b85bb38064d286931dfc57961da6066bfe02e7c411ee828c2ee40b0ba467575e7197178582db8385dd8402d5f languageName: node linkType: hard @@ -5676,15 +5676,6 @@ __metadata: languageName: node linkType: hard -"semver@npm:^5.4.1": - version: 5.7.1 - resolution: "semver@npm:5.7.1" - bin: - semver: ./bin/semver - checksum: 57fd0acfd0bac382ee87cd52cd0aaa5af086a7dc8d60379dfe65fea491fb2489b6016400813930ecd61fd0952dae75c115287a1b16c234b1550887117744dfaf - languageName: node - linkType: hard - "semver@npm:^6.0.0, semver@npm:^6.3.0": version: 6.3.0 resolution: "semver@npm:6.3.0" @@ -5738,20 +5729,20 @@ __metadata: languageName: node linkType: hard -"sharp@npm:^0.29.2": - version: 0.29.2 - resolution: "sharp@npm:0.29.2" +"sharp@npm:^0.29.3": + version: 0.29.3 + resolution: "sharp@npm:0.29.3" dependencies: color: ^4.0.1 detect-libc: ^1.0.3 node-addon-api: ^4.2.0 node-gyp: latest - prebuild-install: ^6.1.4 + prebuild-install: ^7.0.0 semver: ^7.3.5 - simple-get: ^3.1.0 + simple-get: ^4.0.0 tar-fs: ^2.1.1 tunnel-agent: ^0.6.0 - checksum: 08d241c63bcf2f9eaf6130bf4c264ddf112ab66d02685879cb8d9df1fff571c8fd50fe4e6c046ce82dadb7e5edfd0eaaa3a21e35e84785b8bd9a20e2b1b7ff8c + checksum: d496cdd546c9abe743aebcee013731295f735687819a18c2bdcbba6f31a6b259f3da95af5c11260a8fedc9d4ab95697f5f8c4f3cd65232792b5cfb876bea7c9a languageName: node linkType: hard @@ -5803,14 +5794,14 @@ __metadata: languageName: node linkType: hard -"simple-get@npm:^3.0.3, simple-get@npm:^3.1.0": - version: 3.1.0 - resolution: "simple-get@npm:3.1.0" +"simple-get@npm:^4.0.0": + version: 4.0.0 + resolution: "simple-get@npm:4.0.0" dependencies: - decompress-response: ^4.2.0 + decompress-response: ^6.0.0 once: ^1.3.1 simple-concat: ^1.0.0 - checksum: cca91a9ab2b532fa8d367757c196b54e2dfe3325aab0298d66a3e2a45a29a9d335d1a3fb41f036dad14000f78baddd4170fbf9621d72869791d2912baf9469aa + checksum: 8af4fb788be27af3586395857a1617be133391a7356b007a76379f5eb2ad1c19ea6a13ba9467b0fe790b9e468f9fb124639779b62eb21e6d3ab2cb9b2850cb8d languageName: node linkType: hard From ff53c7b9c1fdec5e084f558f4b303b8eac7d1511 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 16 Nov 2021 01:57:09 -0600 Subject: [PATCH 2/5] Styling. Dynalically genrated the days of the month using date fns. --- component/calender/index.tsx | 19 +++-- package.json | 3 +- yarn.lock | 146 ++++++++++++++++++----------------- 3 files changed, 93 insertions(+), 75 deletions(-) diff --git a/component/calender/index.tsx b/component/calender/index.tsx index a1d8126..5ac1c0c 100644 --- a/component/calender/index.tsx +++ b/component/calender/index.tsx @@ -1,16 +1,24 @@ import React from "react"; import { Box, SimpleGrid } from "@chakra-ui/react"; +import { endOfMonth, getDate } from 'date-fns'; const Calender = (): JSX.Element => { + const today = new Date; + + const endOfCurrMonth = endOfMonth(today); + const lastDay = getDate(endOfCurrMonth); + + console.info(`This month has ${lastDay} days.`); + const daysArr = []; - for (let i = daysArr.length; i < 31; i++) { + for (let i = daysArr.length; i < lastDay; i++) { daysArr.push(daysArr.length + 1); } return ( { {daysArr.map((day) => { return ( Date: Tue, 16 Nov 2021 02:27:07 -0600 Subject: [PATCH 3/5] Refactored navbar for use with this app. --- component/calender/index.tsx | 6 ++--- theme/layout/DesktopNav.tsx | 8 ++---- theme/layout/Header.tsx | 50 ++++++++++++------------------------ 3 files changed, 22 insertions(+), 42 deletions(-) diff --git a/component/calender/index.tsx b/component/calender/index.tsx index 5ac1c0c..bb84b43 100644 --- a/component/calender/index.tsx +++ b/component/calender/index.tsx @@ -1,14 +1,14 @@ import React from "react"; import { Box, SimpleGrid } from "@chakra-ui/react"; -import { endOfMonth, getDate } from 'date-fns'; +import { endOfMonth, getDate } from "date-fns"; const Calender = (): JSX.Element => { - const today = new Date; + const today = new Date(); const endOfCurrMonth = endOfMonth(today); const lastDay = getDate(endOfCurrMonth); - console.info(`This month has ${lastDay} days.`); + // console.info(`This month has ${lastDay} days.`); const daysArr = []; for (let i = daysArr.length; i < lastDay; i++) { diff --git a/theme/layout/DesktopNav.tsx b/theme/layout/DesktopNav.tsx index faee3ee..1c926f8 100644 --- a/theme/layout/DesktopNav.tsx +++ b/theme/layout/DesktopNav.tsx @@ -2,11 +2,7 @@ import React, { FC } from "react"; import { Button, HStack, Link } from "@chakra-ui/react"; import navItems, { NavItem } from "./navItems"; -interface DesktopNavProps { - sticky?: boolean; -} - -const DesktopNav: FC = ({ sticky }: DesktopNavProps) => { +const DesktopNav: FC = () => { return ( = ({ sticky }: DesktopNavProps) => { {navItems.map((navItem: NavItem) => { return ( - + ); })} diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx index 17bc9ab..0bd15da 100644 --- a/theme/layout/Header.tsx +++ b/theme/layout/Header.tsx @@ -13,34 +13,23 @@ import DesktopNav from "./DesktopNav"; import MobileNav from "./MobileNav"; const Header = (): JSX.Element => { - // Sticky Navbar, Scroll Direction, and Back to Top Button Visibility - const [stickyNavbar, setStickyNavbar] = useState(false); + // Add transparency while not at the top of the page. + const [transparentNavbar, setTransparentNavbar] = useState(false); const lastScroll = useRef(0); - const [scrollDirection, setScrollDirection] = useState<"up" | "down" | "top">( - "top" - ); - // const [scroll, setScroll] = useState(0); const handleScroll = (): void => { // Sticky Nav if (window.scrollY >= 20) { - setStickyNavbar(true); + setTransparentNavbar(true); } else { - setStickyNavbar(false); + setTransparentNavbar(false); } - // Scroll Direction + // Scroll Position. const currentScroll = window.scrollY || window.pageYOffset || document.body.scrollTop; - if (currentScroll > lastScroll.current) { - setScrollDirection("down"); - } else if (currentScroll <= 20) { - setScrollDirection("top"); - } else { - setScrollDirection("up"); - } - + // Update Scroll Position Reference lastScroll.current = currentScroll <= 0 ? 0 : currentScroll; // setScroll(lastScroll.current = currentScroll <= 0 ? 0 : currentScroll) }; @@ -85,29 +74,22 @@ const Header = (): JSX.Element => { boxShadow={ open ? "none" - : stickyNavbar - ? "rgba(0, 134, 255, 0.75) 0px 0px 15px, rgba(0, 134, 255, 0.5) 0px 0px 3px 1px" - : "none" + : "rgba(0, 134, 255, 0.75) 0px 0px 15px, rgba(0, 134, 255, 0.5) 0px 0px 3px 1px" } bg={ open ? "brand.main" - : stickyNavbar - ? "rgba(49, 56, 220, 0.9)" - : "transparent" - } - d={ - scrollDirection === "up" || scrollDirection === "top" ? "block" : "none" + : transparentNavbar + ? "rgba(49, 56, 220, 0.9)" + : "brand.main" } transition=".5s ease" borderRadius="0px 0px 10px 10px" _hover={{ - bg: open ? "brand.main" : stickyNavbar ? "brand.main" : "transparent", + bg: "brand.main", boxShadow: open ? "none" - : stickyNavbar - ? "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px" - : "none", + : "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px", }} h={open ? "125px" : "auto"} > @@ -142,7 +124,7 @@ const Header = (): JSX.Element => { LCM Potty Chart - + { onMouseLeave={() => setHover(false)} d={{ base: "inline-flex", lg: "none" }} variant="mobileNav" - bg={stickyNavbar ? "transparent" : "rgba(255, 255, 255, .15)"} + bg={ + transparentNavbar ? "transparent" : "rgba(255, 255, 255, .15)" + } type="button" - border={stickyNavbar ? "1px solid #0068ff" : "none"} + border={transparentNavbar ? "1px solid #0068ff" : "none"} id="mobile-menu-button" /> From 5d55060d04900388e47dbf67cc2cd74e9510c749 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 16 Nov 2021 02:32:29 -0600 Subject: [PATCH 4/5] Removed focus background on mobile menu --- theme/layout/MobileNav.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/theme/layout/MobileNav.tsx b/theme/layout/MobileNav.tsx index 5e3ee38..f38365c 100644 --- a/theme/layout/MobileNav.tsx +++ b/theme/layout/MobileNav.tsx @@ -35,6 +35,9 @@ const MobileNav: FC = ({ updateOpen }: MobileNavProps) => { _hover={{ backgroundColor: "none", }} + _focus={{ + backgroundColor: "none" + }} > updateOpen(false)} href={navItem[1]}> {index === 0 ? : } From 498bf5455c5efc5d2c7a5e1119f3f6fa02951939 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 16 Nov 2021 02:43:21 -0600 Subject: [PATCH 5/5] Fixed typing error. --- theme/layout/DesktopNav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/layout/DesktopNav.tsx b/theme/layout/DesktopNav.tsx index 1c926f8..f2d49cf 100644 --- a/theme/layout/DesktopNav.tsx +++ b/theme/layout/DesktopNav.tsx @@ -2,7 +2,7 @@ import React, { FC } from "react"; import { Button, HStack, Link } from "@chakra-ui/react"; import navItems, { NavItem } from "./navItems"; -const DesktopNav: FC = () => { +const DesktopNav = (): JSX.Element => { return (