update deps

tinkerhub · May 1, 2023 · 3d2b963 · 3d2b963
1 parent 5e2c356
commit 3d2b963
Show file tree

Hide file tree

Showing 9 changed files with 663 additions and 234 deletions.
diff --git a/apps/shn-web/api/index.ts b/apps/shn-web/api/index.ts
@@ -1,5 +1,4 @@
 import Axios from 'axios';
-import Session from 'supertokens-web-js/recipe/session';
 
 const api = Axios.create({
     baseURL: process.env.NEXT_PUBLIC_API_DOMAIN,
@@ -8,6 +7,4 @@ const api = Axios.create({
         'Content-Type': 'application/json',
     },
 });
-Session.addAxiosInterceptors(api);
-
 export default api;
diff --git a/apps/shn-web/components/modal/ProfileModal.tsx b/apps/shn-web/components/modal/ProfileModal.tsx
@@ -168,7 +168,7 @@ export const ProfileModal = ({ isOpen, onClose }: ProfileMod) => {
                     minHeight="200px"
                     borderTopRadius="10px"
                     backgroundImage={`
-                    linear-gradient(180deg, rgba(12, 15, 23, 0) 67.85%, #0C0F17 100%),
+                    linear-gradient(180deg, rgba(12, 15, 23, 100) 67.85%, #0C0F17 100%),
                     linear-gradient(180deg, #0C0F17 0%, rgba(12, 15, 23, 0.8) 100%),
                     url('images/codeBg.png') `}
                 >

diff --git a/apps/shn-web/layouts/components/MobileBar.tsx b/apps/shn-web/layouts/components/MobileBar.tsx
@@ -1,11 +1,13 @@
-import { Center, Link, Text } from '@chakra-ui/react';
+import { Center, Text } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
+import { useRouter } from 'next/router';
 
 interface Handler {
     closeModal: () => void;
 }
 
 export const MobileBar = ({ closeModal }: Handler) => {
+    const router = useRouter();
     const items = [
         {
             name: 'HOME',
@@ -75,17 +77,18 @@ export const MobileBar = ({ closeModal }: Handler) => {
                 >
                     {items.map(({ name, path }) => (
                         <motion.li style={{ listStyle: 'none' }} variants={navItem} key={name}>
-                            <Link href={path} textDecoration="none">
-                                <Text
-                                    fontSize="45px"
-                                    color="white"
-                                    _hover={{ color: '#DBF72C', cursor: 'pointer' }}
-                                    fontFamily="Clash Display"
-                                    onClick={closeModal}
-                                >
-                                    {name}
-                                </Text>
-                            </Link>
+                            <Text
+                                fontSize="45px"
+                                color={router.pathname === path ? '#DBF72C' : 'white'}
+                                _hover={{ color: '#DBF72C', cursor: 'pointer' }}
+                                fontFamily="Clash Display"
+                                onClick={() => {
+                                    closeModal();
+                                    router.push(path);
+                                }}
+                            >
+                                {name}
+                            </Text>
                         </motion.li>
                     ))}
                 </motion.ul>

diff --git a/apps/shn-web/layouts/components/Navbar.tsx b/apps/shn-web/layouts/components/Navbar.tsx
@@ -9,20 +9,21 @@ import {
     Avatar,
     Button,
     Box,
-    Link,
     useDisclosure,
 } from '@chakra-ui/react';
-
+import Link from 'next/link';
 import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons';
 import { MobileBar } from '@app/layouts/components';
 import { useAuth } from '@app/hooks';
 import { ProfileModal } from '@app/components/modal';
+import { useRouter } from 'next/router';
 
 const Navbar = () => {
     const { user, login, logout } = useAuth();
     const [showMenu, setShowMenu] = useState(false);
     const { isOpen, onOpen, onClose } = useDisclosure();
     const imageRef = React.useRef<HTMLImageElement>(null);
+    const router = useRouter();
     const handleWindowResize = useCallback(() => {
         if (window.innerWidth > 991) {
             setShowMenu(false);
@@ -151,7 +152,7 @@ const Navbar = () => {
                         <Link href="/">
                             <Text
                                 as="span"
-                                color="white"
+                                color={router.pathname === '/' ? '#DBF72C' : 'white'}
                                 fontSize="18px"
                                 transition="all 0.2s  ease-in-out"
                                 _hover={{
@@ -164,7 +165,7 @@ const Navbar = () => {
                         <Link href="/leaderboard">
                             <Text
                                 as="span"
-                                color="white"
+                                color={router.pathname === '/leaderboard' ? '#DBF72C' : 'white'}
                                 fontSize="18px"
                                 transition="all 0.2s  ease-in-out"
                                 _hover={{
@@ -177,7 +178,7 @@ const Navbar = () => {
                         <Link href="/events">
                             <Text
                                 as="span"
-                                color="white"
+                                color={router.pathname === '/events' ? '#DBF72C' : 'white'}
                                 fontSize="18px"
                                 transition="all 0.2s  ease-in-out"
                                 _hover={{

diff --git a/apps/shn-web/package.json b/apps/shn-web/package.json
@@ -12,35 +12,35 @@
         "test:ci": "jest --ci"
     },
     "dependencies": {
-        "@chakra-ui/icons": "^2.0.17",
-        "@chakra-ui/react": "^2.4.9",
-        "@emotion/react": "^11.10.5",
-        "@emotion/styled": "^11.10.5",
-        "@hookform/resolvers": "^2.9.10",
-        "axios": "^1.2.5",
-        "framer-motion": "^8.5.3",
+        "@chakra-ui/icons": "^2.0.19",
+        "@chakra-ui/react": "^2.6.0",
+        "@emotion/react": "^11.10.8",
+        "@emotion/styled": "^11.10.8",
+        "@hookform/resolvers": "^3.1.0",
+        "axios": "^1.4.0",
+        "framer-motion": "^10.12.4",
         "moment": "^2.29.4",
-        "next": "^13.1.5",
-        "next-seo": "^5.15.0",
-        "nextjs-google-analytics": "^2.3.0",
+        "next": "^13.3.3",
+        "next-seo": "^6.0.0",
+        "nextjs-google-analytics": "^2.3.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-hook-form": "^7.42.1",
-        "react-select": "^5.7.0",
-        "supertokens-web-js": "^0.4.1",
-        "yup": "^0.32.11"
+        "react-hook-form": "^7.43.9",
+        "react-select": "^5.7.2",
+        "supertokens-web-js": "^0.5.0",
+        "yup": "^1.1.1"
     },
     "devDependencies": {
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^13.4.0",
+        "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/jest": "^29.4.0",
-        "@types/react": "^18.0.27",
-        "@types/react-dom": "^18.0.10",
+        "@types/jest": "^29.5.1",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.1",
         "@types/testing-library__jest-dom": "^5.14.5",
         "css-paint-polyfill": "^3.4.0",
-        "jest": "^29.4.2",
-        "jest-environment-jsdom": "^29.4.2",
-        "next-router-mock": "^0.9.2"
+        "jest": "^29.5.0",
+        "jest-environment-jsdom": "^29.5.0",
+        "next-router-mock": "^0.9.3"
     }
 }
diff --git a/apps/shn-web/pages/_document.tsx b/apps/shn-web/pages/_document.tsx
@@ -1,11 +1,18 @@
 import React from 'react';
 import NextDocument, { Html, Head, Main, NextScript } from 'next/document';
+import Script from 'next/script';
 
 export default class Document extends NextDocument {
     render() {
         return (
             <Html lang="en">
                 <Head>
+                    <Script
+                        strategy="beforeInteractive"
+                        dangerouslySetInnerHTML={{
+                            __html: ` if ("paintWorklet" in CSS) { CSS.paintWorklet.addModule( "https://www.unpkg.com/css-houdini-squircle/squircle.min.js" ); } `,
+                        }}
+                    />
                     <style>
                         {`
                             body {

diff --git a/apps/shn-web/pages/index.tsx b/apps/shn-web/pages/index.tsx
@@ -99,6 +99,7 @@ const Home: NextPageWithLayout = () => {
                     fontSize="18px"
                     fontWeight="medium"
                     height="45px"
+                    zIndex={1}
                     transition=".5s all ease"
                     _hover={{
                         boxShadow: '0px 8px 16px rgba(255, 255, 255, 0.15)',

diff --git a/apps/shn-web/pages/leaderboard.tsx b/apps/shn-web/pages/leaderboard.tsx
@@ -14,13 +14,6 @@ import {
 } from '@chakra-ui/react';
 import { NextPageWithLayout } from './_app';
 
-(async () => {
-    if (!('paintWorklet' in CSS)) {
-        await import('css-paint-polyfill');
-    }
-    CSS.paintWorklet.addModule(`/js/squircle.js`);
-})();
-
 const Leaderboard: NextPageWithLayout = () => (
     <VStack
         marginTop="80px"