Debug: mobile dark mode debug (#373)

* feat: dark mode & new messages on welcome modal * fix: dark mode on sign in modal & user login icon
wasedatime · Apr 1, 2022 · 67b4a97 · 67b4a97
1 parent bc8ecd7
commit 67b4a97
Show file tree

Hide file tree

Showing 20 changed files with 398 additions and 331 deletions.
diff --git a/root/package.json b/root/package.json
@@ -88,7 +88,7 @@
     "@bit/wasedatime.core.ts.ui.loading-spinner": "0.1.2",
     "@bit/wasedatime.core.ts.ui.logo": "0.0.9",
     "@bit/wasedatime.core.ts.ui.modal": "0.0.8",
-    "@bit/wasedatime.core.ts.ui.sign-in-modal": "0.1.4",
+    "@bit/wasedatime.core.ts.ui.sign-in-modal": "0.1.6",
     "@bit/wasedatime.core.ts.utils.i18n": "0.0.4",
     "@bit/wasedatime.core.ts.utils.responsive-utils": "0.0.1",
     "@bit/wasedatime.core.ts.utils.user": "0.0.4",

diff --git a/root/pnpm-lock.yaml b/root/pnpm-lock.yaml
diff --git a/root/src/assets/img/home/reviews-example.png b/root/src/assets/img/home/reviews-example.png
diff --git a/root/src/assets/img/home/theme-toggle-dark.png b/root/src/assets/img/home/theme-toggle-dark.png
diff --git a/root/src/assets/img/home/theme-toggle-light.png b/root/src/assets/img/home/theme-toggle-light.png
diff --git a/root/src/assets/img/home/timetable-example-1.png b/root/src/assets/img/home/timetable-example-1.png
diff --git a/root/src/assets/img/home/timetable-example-2.png b/root/src/assets/img/home/timetable-example-2.png
diff --git a/root/src/components/Home.tsx b/root/src/components/Home.tsx
@@ -12,7 +12,7 @@ import styled from "styled-components";
 import homeBackgroundDark from "@app/assets/img/home/home_background-dark.png";
 import homeBackgroundLight from "@app/assets/img/home/home_background-light.jpg";
 import { TitleLogo } from "@app/assets/img/home/TitleLogo";
-import WelcomeModal from "@app/components/WelcomeModal";
+import HomeModal from "@app/components/home/HomeModal";
 import { gaAppendActionWithLng, gaChangeLanguage } from "@app/ga/eventActions";
 import { gaLanguage } from "@app/ga/eventCategories";
 import { ThemeContext } from "@app/utils/theme-context";
@@ -129,7 +129,7 @@ const Home = ({ isFirstAccess, t, i18n }: Props) => {
           </button>
         </Introduction>
 
-        <WelcomeModal
+        <HomeModal
           isModalOpen={modalOpen}
           closeModal={closeModal}
           isFirstAccess={isFirstAccess}

diff --git a/root/src/components/WelcomeModal.tsx b/root/src/components/WelcomeModal.tsx
diff --git a/root/src/components/frame/MobileNav.tsx b/root/src/components/frame/MobileNav.tsx
@@ -69,12 +69,12 @@ const MobileNav = ({ navItems, openSignInModal }: Props) => {
           ) : (
             <FontAwesomeIcon
               icon={faUserCircle}
-              className="text-white"
+              className="text-light-text2 dark:text-dark-text2"
               style={{ fontSize: "20px" }}
             />
           )}
           {!userAttr && (
-            <div className="text-white" 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
@@ -37,17 +37,6 @@ export interface NavItemsProps {
   iconHovered?: ReactNode;
 }
 
-const SignInModalContainer = ({ isModalOpen, closeModal }) => {
-  const { theme } = useContext(ThemeContext);
-  return (
-    <SignInModal
-      isModalOpen={isModalOpen}
-      closeModal={closeModal}
-      theme={theme}
-    />
-  )
-}
-
 const Nav = () => {
   if (
     localStorage.getItem("isFirstAccess") === null ||
@@ -120,7 +109,7 @@ const Nav = () => {
             )
           }
         </MediaQuery>
-        <SignInModalContainer
+        <SignInModal
           isModalOpen={isSignInModalOpen}
           closeModal={() => setSignInModalOpen(false)}
         />