wasedatime · YHhaoareyou · Apr 13, 2022 · Apr 5, 2022 · Apr 5, 2022 · Apr 5, 2022
diff --git a/root/package.json b/root/package.json
@@ -82,8 +82,8 @@
     "@fortawesome/free-brands-svg-icons": "6.0.0",
     "@fortawesome/free-solid-svg-icons": "6.0.0",
     "@fortawesome/react-fontawesome": "0.1.17",
-    "@mui/icons-material": "^5.5.1",
-    "@mui/material": "^5.5.2",
+    "@mui/icons-material": "^5.6.1",
+    "@mui/material": "^5.6.1",
     "@types/react": "17.0.39",
     "@types/react-dom": "17.0.13",
     "@types/react-router-dom": "5.3.3",
@@ -101,7 +101,7 @@
     "react-helmet": "6.1.0",
     "react-i18next": "11.15.6",
     "react-responsive": "8.2.0",
-    "react-router-dom": "^6.2.2",
+    "react-router-dom": "^6.3.0",
     "react-vertical-timeline-component": "3.5.2",
     "single-spa": "5.9.3",
     "single-spa-layout": "1.6.0",

diff --git a/root/pnpm-lock.yaml b/root/pnpm-lock.yaml
diff --git a/root/src/App.tsx b/root/src/App.tsx
@@ -28,11 +28,13 @@ const Feeds = lazy(() => import("@app/components/Feeds"));
 
 const NotFound = () => {
   useEffect(() => navigateToUrl("/"), []);
+
   return <LoadingSpinner theme="light" message="Not found! Redirecting..." />;
 };
 
 const Redirect = ({ to }: { to: string }) => {
   useEffect(() => navigateToUrl(to), []);
+
   return null;
 };
 
@@ -65,9 +67,10 @@ const AppRoutes = () => {
           break;
       }
     });
+
     return unsubscribe;
   }, []);
-  
+
   return (
     <Routes>
       <Route element={<TermsOfService />} path="/terms-of-service" />
@@ -92,7 +95,7 @@ const LoadingSpinnerContainer = () => {
       <LoadingSpinner theme={theme} message="Loading..." />
     </div>
   );
-}
+};
 
 const App = () => {
   const { i18n } = useTranslation();

diff --git a/root/src/components/Feeds.tsx b/root/src/components/Feeds.tsx
@@ -29,8 +29,8 @@ const Feeds = () => {
     process.env.NODE_ENV === "development"
       ? "http://localhost:8083"
       : process.env.NODE_ENV === "staging"
-        ? `https://${process.env.PREFIX}.${process.env.MF_FEEDS_DOMAIN}`
-        : "/feeds";
+      ? `https://${process.env.PREFIX}.${process.env.MF_FEEDS_DOMAIN}`
+      : "/feeds";
 
   return (
     <FeedsWrapper style={{ overflow: "hidden" }}>

diff --git a/root/src/components/TermsOfService.tsx b/root/src/components/TermsOfService.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import {
   StyledHeader,
   StyledParagraph,

diff --git a/root/src/components/aboutUs/MeetOurTeam/memberList.ts b/root/src/components/aboutUs/MeetOurTeam/memberList.ts
@@ -1,26 +1,26 @@
+import akylai from "@app/assets/img/contributors/akylai.jpg";
 import alina from "@app/assets/img/contributors/alina.jpg";
 import austin from "@app/assets/img/contributors/austin.jpg";
 import george from "@app/assets/img/contributors/george.jpg";
 import gu from "@app/assets/img/contributors/gu.jpg";
 import hao from "@app/assets/img/contributors/hao.jpg";
 import hatori from "@app/assets/img/contributors/hatori.jpg";
 import isabella from "@app/assets/img/contributors/isabella.jpg";
+import jason from "@app/assets/img/contributors/jason.jpg";
 import kaede from "@app/assets/img/contributors/kaede.jpg";
 import kaiqing from "@app/assets/img/contributors/kaiqing.jpg";
 import kong from "@app/assets/img/contributors/kong.jpg";
 import mei from "@app/assets/img/contributors/mei.jpg";
 import naomi from "@app/assets/img/contributors/naomi.jpg";
+import nicholas from "@app/assets/img/contributors/nicholas.jpg";
 import oscar from "@app/assets/img/contributors/oscar.jpg";
+import takumi from "@app/assets/img/contributors/takumi.jpg";
 import tang from "@app/assets/img/contributors/tang.jpg";
+import xinmei from "@app/assets/img/contributors/xinmei.jpg";
+import xinyue from "@app/assets/img/contributors/xinyue.jpg";
 import yaoyuan from "@app/assets/img/contributors/yaoyuan.jpg";
 import zenda from "@app/assets/img/contributors/zenda.jpg";
 import zhaohuaibo from "@app/assets/img/contributors/zhaohuaibo.jpg";
-import jason from "@app/assets/img/contributors/jason.jpg";
-import nicholas from "@app/assets/img/contributors/nicholas.jpg";
-import takumi from "@app/assets/img/contributors/takumi.jpg";
-import xinmei from "@app/assets/img/contributors/xinmei.jpg";
-import xinyue from "@app/assets/img/contributors/xinyue.jpg";
-import akylai from "@app/assets/img/contributors/akylai.jpg";
 import email from "@app/assets/img/socialmediaicon/email.png";
 import facebook from "@app/assets/img/socialmediaicon/facebook.png";
 import github from "@app/assets/img/socialmediaicon/github.png";
@@ -75,7 +75,10 @@ export const CurrentList: Array<Members> = [
     name: "Jason Park",
     position: "Backend Engineer & Marketing",
     socials: [
-      { platform: linkedin, link: "https://www.linkedin.com/in/%E6%B5%9A%E5%BD%AC-%E6%9C%B4-a9a503200" },
+      {
+        platform: linkedin,
+        link: "https://www.linkedin.com/in/%E6%B5%9A%E5%BD%AC-%E6%9C%B4-a9a503200",
+      },
     ],
     profileText: "Imagine Sisyphus happy.",
   },
@@ -89,7 +92,8 @@ export const CurrentList: Array<Members> = [
       { platform: github, link: "https://github.com/nichnarmada" },
       { platform: linkedin, link: "https://www.linkedin.com/in/nichnarmada/" },
     ],
-    profileText: "People call me the Pro Pro, aka the Professional Procrastinator 🙂",
+    profileText:
+      "People call me the Pro Pro, aka the Professional Procrastinator 🙂",
   },
   // takumi
   {
@@ -106,7 +110,10 @@ export const CurrentList: Array<Members> = [
     name: "Xinmei(Evelyn) Liu",
     position: "Marketing",
     socials: [
-      { platform: instagram, link: "https://www.instagram.com/evelyn_liuxinm/" },
+      {
+        platform: instagram,
+        link: "https://www.instagram.com/evelyn_liuxinm/",
+      },
     ],
     profileText: "I’m so happy to work with you guys together 🥰",
   },
@@ -126,11 +133,13 @@ export const CurrentList: Array<Members> = [
     name: "Akylai",
     position: "Frontend Apprentice",
     socials: [
-      {platform: instagram, link:"https://www.instagram.com/akylaimanalieva/"},
+      {
+        platform: instagram,
+        link: "https://www.instagram.com/akylaimanalieva/",
+      },
     ],
   },
-
-]
+];
 
 export const AlumniList: Array<Members> = [
   {

diff --git a/root/src/components/frame/MobileNav.tsx b/root/src/components/frame/MobileNav.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 
 import { getUserAttr, signOut } from "@bit/wasedatime.core.ts.utils.user";
-import { faUserCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useTranslation } from "react-i18next";
-import LinkOutsideRouter from "@app/utils/link-outside-router";
+
 import { NavItemsProps } from "@app/components/frame/Nav";
+import { ProfileIconHovered } from "@app/components/icons/ProfileIcon";
+import LinkOutsideRouter from "@app/utils/link-outside-router";
 
 type Props = {
   navItems: NavItemsProps[];
@@ -38,13 +38,13 @@ const MobileNav = ({ navItems, openSignInModal }: Props) => {
 
   return (
     <nav
-      className="fixed bottom-0 flex flex-row bg-black w-full bg-light-bgSide dark:bg-dark-bgSide"
+      className="fixed bottom-0 flex flex-row w-full bg-light-bgSide dark:bg-dark-bgSide"
       style={{
         height: "60px",
         zIndex: 1000,
         padding: "8px",
         width: "100vw",
-        boxShadow: "rgba(0, 0, 0, 0.3) 0px -4px 12px"
+        boxShadow: "rgba(0, 0, 0, 0.3) 0px -4px 12px",
       }}
     >
       {styledLinks}
@@ -67,14 +67,15 @@ const MobileNav = ({ navItems, openSignInModal }: Props) => {
               style={{ margin: "0px auto" }}
             />
           ) : (
-            <FontAwesomeIcon
-              icon={faUserCircle}
-              className="text-light-text2 dark:text-dark-text2"
-              style={{ fontSize: "20px" }}
-            />
+            <div className="text-light-text2 dark:text-dark-text2 group-hover:text-light-main dark:group-hover:text-dark-text1">
+              <ProfileIconHovered />
+            </div>
           )}
           {!userAttr && (
-            <div className="text-light-text2 dark:text-dark-text2" style={{ fontSize: "12px" }}>
+            <div
+              className="text-light-text2 dark:text-dark-text2"
+              style={{ fontSize: "12px" }}
+            >
               {t("user.Sign in")}
             </div>
           )}

diff --git a/root/src/components/frame/Nav.tsx b/root/src/components/frame/Nav.tsx
@@ -1,4 +1,11 @@
-import React, { useState, useEffect, lazy, Suspense, ReactNode, useContext } from "react";
+import React, {
+  useState,
+  useEffect,
+  lazy,
+  Suspense,
+  ReactNode,
+  useContext,
+} from "react";
 
 import { sizes } from "@bit/wasedatime.core.ts.utils.responsive-utils";
 import { createBrowserHistory } from "history";

diff --git a/root/src/components/home/HomeModal.tsx b/root/src/components/home/HomeModal.tsx
@@ -1,14 +1,15 @@
 import React, { useState } from "react";
+
 import Modal from "@bit/wasedatime.core.ts.ui.modal";
 import { sizes } from "@bit/wasedatime.core.ts.utils.responsive-utils";
 import ReactGA from "react-ga";
 import { WithTranslation, withTranslation } from "react-i18next";
 import MediaQuery from "react-responsive";
-import { gaSetLanguage } from "@app/ga/eventActions";
-import { gaLanguage } from "@app/ga/eventCategories";
 
-import Welcome from "@app/components/home/Welcome";
 import NewFeatures from "@app/components/home/NewFeatures";
+import Welcome from "@app/components/home/Welcome";
+import { gaSetLanguage } from "@app/ga/eventActions";
+import { gaLanguage } from "@app/ga/eventCategories";
 
 const modalStyle = {
   overlay: {
@@ -35,7 +36,7 @@ const modalStyle = {
     border: "none",
     borderRadius: "20px",
     backgroundColor: "transparent",
-    padding: 0
+    padding: 0,
   },
 };
 
@@ -76,7 +77,11 @@ const HomeModal = ({
 
   const pages = [
     <Welcome goToNextPage={() => setPageIndex(pageIndex + 1)} />,
-    <NewFeatures goToPrevPage={() => setPageIndex(pageIndex - 1)} closeModal={closeModal} isFirstAccess={isFirstAccess} />
+    <NewFeatures
+      goToPrevPage={() => setPageIndex(pageIndex - 1)}
+      closeModal={closeModal}
+      isFirstAccess={isFirstAccess}
+    />,
   ];
 
   return (

diff --git a/root/src/components/home/NewFeatures.tsx b/root/src/components/home/NewFeatures.tsx
@@ -1,16 +1,16 @@
 import React from "react";
+
 import { useTranslation } from "react-i18next";
 import { navigateToUrl } from "single-spa";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faExchangeAlt } from "@fortawesome/free-solid-svg-icons";
-import themeToggleLightImg from "@app/assets/img/home/theme-toggle-light.png";
+
 import themeToggleDarkImg from "@app/assets/img/home/theme-toggle-dark.png";
+import themeToggleLightImg from "@app/assets/img/home/theme-toggle-light.png";
 
 type Props = {
   isFirstAccess: boolean;
   goToPrevPage: () => void;
   closeModal: () => void;
-}
+};
 
 const NewFeatures = ({ isFirstAccess, goToPrevPage, closeModal }: Props) => {
   const { t } = useTranslation();
@@ -36,22 +36,15 @@ const NewFeatures = ({ isFirstAccess, goToPrevPage, closeModal }: Props) => {
         {t("welcome.themeToggle.themeToggleExplain2")}
         <br />
         {t("welcome.themeToggle.themeToggleExplain3")}
-        <br /><br />
+        <br />
+        <br />
         <div className="flex flex-row gap-8">
           <div className="text-center">
-            <img
-              src={themeToggleLightImg}
-              alt="reviews example"
-              width="100%"
-            />
+            <img src={themeToggleLightImg} alt="reviews example" width="100%" />
             <p>{t("welcome.themeToggle.lightMode")}</p>
           </div>
           <div className="text-center">
-            <img
-              src={themeToggleDarkImg}
-              alt="reviews example"
-              width="100%"
-            />
+            <img src={themeToggleDarkImg} alt="reviews example" width="100%" />
             <p>{t("welcome.themeToggle.darkMode")}</p>
           </div>
         </div>
@@ -81,7 +74,7 @@ const NewFeatures = ({ isFirstAccess, goToPrevPage, closeModal }: Props) => {
         </button>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default NewFeatures;
+export default NewFeatures;
diff --git a/root/src/components/home/Welcome.tsx b/root/src/components/home/Welcome.tsx
@@ -1,14 +1,16 @@
 import React, { useContext } from "react";
-import styled from "styled-components";
-import { useTranslation } from "react-i18next";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+
 import { Logo } from "@bit/wasedatime.core.ts.ui.logo";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+
 import { ThemeContext } from "@app/utils/theme-context";
 
 type Props = {
   goToNextPage: () => void;
-}
+};
 
 const LogoWrapper = styled("div")`
   transform: translate(0, 5vh);
@@ -52,7 +54,10 @@ const Welcome = ({ goToNextPage }: Props) => {
           className="ml-4 text-icon-sun dark:text-icon-moon"
           onClick={() => setTheme(theme === "light" ? "dark" : "light")}
         >
-          <FontAwesomeIcon icon={theme === "light" ? faSun : faMoon} size="lg" />
+          <FontAwesomeIcon
+            icon={theme === "light" ? faSun : faMoon}
+            size="lg"
+          />
         </button>
       </div>
 
@@ -67,7 +72,7 @@ const Welcome = ({ goToNextPage }: Props) => {
         </button>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Welcome;
+export default Welcome;
diff --git a/root/src/components/user/RedirectPage.tsx b/root/src/components/user/RedirectPage.tsx
@@ -1,10 +1,11 @@
-import { ThemeContext } from "@app/utils/theme-context";
-import LoadingSpinner from "@bit/wasedatime.core.ts.ui.loading-spinner";
 import React, { useContext, useEffect } from "react";
 
+import LoadingSpinner from "@bit/wasedatime.core.ts.ui.loading-spinner";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
+import { ThemeContext } from "@app/utils/theme-context";
+
 const RedirectPage = () => {
   const { theme } = useContext(ThemeContext);
   const { t } = useTranslation();
@@ -35,7 +36,11 @@ const RedirectPage = () => {
   ) : (
     <div className="mt-20 text-center">
       <LoadingSpinner theme={theme} message={t("verify.success.title")} />
-      <a href="/" className="mb-8 block"><span className="text-3xl p-4 border-2 border-light-main rounded text-light-main dark:text-dark-main dark:border-dark-main">{t("verify.success.navigateHint")}</span></a>
+      <a href="/" className="mb-8 block">
+        <span className="text-3xl p-4 border-2 border-light-main rounded text-light-main dark:text-dark-main dark:border-dark-main">
+          {t("verify.success.navigateHint")}
+        </span>
+      </a>
       <p className="dark:text-dark-text2">{t("verify.success.message1")}</p>
       <p className="dark:text-dark-text2">{t("verify.success.message2")}</p>
     </div>