Debug: dark mode on mobile (#374)

* fix(deps): update dependency @aws-amplify/auth to v4 (#352)

Co-authored-by: Renovate Bot <[email protected]>

* Feature: Added Dark theme (#365)

* Theme provider to Syllabus & context to containers

* Add context on components in Syllabus which may require fix for dark mode

* feat: replace @reach/router to react-router v6

* feat: update header for all apps

* fix: reinstall react-router-dom v6 and history after rebase

* feat: add new themes

* fix: lock files

* feat: install TailwindCSS on Campus

* feat: install TailwindCSS on Syllabus

* feat: change theme-toggle color according to current theme

* fix: change locations of tailwind import; remove unused log

* feat: dark theme on Timetable

* Feat: Added new sidebar icons from material ui icons

* Feat: Separated icons into different component

* fix: added package json and pnpm lock updates

* feat: pass isDark property to styled components

* feat: dark theme on Syllabus (CourseItem not yet)

* fix: wrap ThemeProvider on Nav; use new theme colors

* fix: use className instead of passing theme as props

* feat: dark theme on CourseInfo (not completed)

* fix: Made theme types exportable

* fix: created sidebar wrapper locally instead of bit

* fix: Fixed styling of icon group button

* feat: added user profile icon

* feat: Added dark mode styling to other links

* fix: moved browser router wrapper outside to fix navigation

* fix: used const instead of let for navigation hook

* fix: fixed import order

* feat: CourseInfo dark mode

* feat: Made title logo svg into a component

* fix: made title logo text colour change when theme toggle

* fix: fixed extra stylings when dark mode

* fix: updated package versions and pnpm lock file

* feat: update loading-spinner & solve background color flicker while loading page in dark mode

* feat: added dark mode styling to about us pages

* feat: added dark mode styling to extra pages

* feat: dark theme to mobile bottom nav

* feat: update header & loading-spinner & body tag background color

* feat: added dark mode background

* fix: fixed title logo on sidebar not changing colours when switching modes

* fix: added tab colours when dark mode

* fix: added dark mode colours to partner page text

* feat: dark mode for Labs

* fix: related courses width

* feat: update spinner in Syllabus; dark mode for Campus

* fix: timetable course item scrollable space height

* feat: make timetable course item darker in dark mode

* feat: install tailwind in feeds (not used yet)

* feat: redirecting page styling

* feat: update sign in modal

* feat: updated header component and pnpm lock file accordingly

* fix: updated colors and header dependencies

* fix: eslint fixes for campus folder

* feat: added dark mode styling to campus folder

* fix: eslint fixes in syllabus folder

* fix: updated dark mode styling

* fix: updated dark mode syllabus

* fix: updated dark mode styling root folder

* fix: syllabus border & step arrow color

* fix: fixed styling for social media icons in partners

* fix: removed unused imports

* fix: Or-button dark mode color

* fix: remove FilterWarningsPlugin

* fix: update lock files

* fix: remove -y option

* fix: update lock files

* fix: update @aws-amplify/auth in syllabus

* fix: update loading spinner in Feeds

* fix: add theme prop to LoadingSpinner in Feeds

Co-authored-by: YHhaoareyou <[email protected]>

* fix: clear search keywords when onclick related courses

* Debug: mobile dark mode debug (#373)

* feat: dark mode & new messages on welcome modal

* fix: dark mode on sign in modal & user login icon

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Renovate Bot <[email protected]>
Co-authored-by: Nicholas Narmada <[email protected]>

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",

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}

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>
           )}

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)}
         />