Merge pull request #118 from bas-kirill/feature/login-dark-mode

feat(login): add dark mode

client/src/app/App.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import "./App.scss";
-import styles from "./App.module.scss";
+import "./styles/App.scss";
+import styles from "./styles/App.module.scss";
 import {
   createBrowserRouter,
   createRoutesFromElements,
@@ -91,7 +91,12 @@ const App = () => {
   const { darkMode } = useDarkMode();
 
   return (
-    <div id="app" className={`${darkMode && styles.dark}`}>
+    <div
+      className={`
+      ${styles.app}
+      ${darkMode && styles.app__dark}
+    `}
+    >
       <RouterProvider router={router} />
     </div>
   );

client/src/app/styles/App.module.scss

@@ -0,0 +1,10 @@
+.app {
+  background-color: #f5f5f5;
+  max-width: 1024px;
+  margin: 0 auto;
+  border: 1px #dee2e6 solid;
+}
+
+.app__dark {
+  background-color: #212529;
+}

client/src/app/App.scss → client/src/app/styles/App.scss

@@ -29,13 +29,6 @@ body {
     sans-serif;
 }
 
-#app {
-  background-color: #f5f5f5;
-  max-width: 1024px;
-  margin: 0 auto;
-  border: 1px #dee2e6 solid;
-}
-
 h1 {
   margin: 0;
 }

client/src/pages/login/ui/Login.page.tsx

@@ -5,8 +5,10 @@ import { FooterWidget } from "widgets/footer";
 import { Form, useActionData, useNavigate } from "react-router-dom";
 import { LoginAction } from "../api/action";
 import { REGISTRATION_URL } from "shared/config/paths";
+import { useDarkMode } from "shared/dark-mode/use-dark-mode";
 
 export function LoginPage() {
+  const { darkMode } = useDarkMode();
   const actionData = useActionData() as LoginAction;
   const navigate = useNavigate();
 
@@ -18,14 +20,35 @@ export function LoginPage() {
     <>
       <HeaderWidget />
 
-      <Form method="post" className={styles.login__form}>
-        <input type="text" name="login" placeholder={"Login"} />
-        <input type="password" name="password" placeholder={"Password"} />
-        <input type="submit" value="Login" />
+      <Form
+        method="post"
+        className={`
+        ${styles.login__form}
+        ${darkMode && styles.login__form__dark}
+      `}
+      >
+        <input
+          type="text"
+          name="login"
+          placeholder={"Login..."}
+          className={styles.login__form__input__dark}
+        />
+        <input
+          type="password"
+          name="password"
+          placeholder={"Password..."}
+          className={styles.login__form__input__dark}
+        />
+        <input
+          type="submit"
+          value="Login"
+          className={styles.login__form__input__dark}
+        />
         <input
           type="button"
           value="Registration"
           onClick={handleRegisterRedirect}
+          className={styles.login__form__input__dark}
         />
         {actionData?.errors.length > 0 && (
           <div className={styles.login__error}>

client/src/pages/login/ui/styles/Login.page.module.css

@@ -9,3 +9,17 @@
     font-size: 2em;
   }
 }
+
+.login__form__dark {
+  background-color: #212529;
+}
+
+.login__form__input__dark {
+  color: #ffffff;
+  background-color: #212529;
+  border: 1px darkgray solid;
+
+  &::placeholder {
+    color: #ffffff;
+  }
+}

client/src/pages/profile/ui/Profile.page.tsx

@@ -16,7 +16,7 @@ const logout = new LogoutApi();
 
 export function ProfilePage() {
   useJwt();
-  const { toggleTheme } = useDarkMode();
+  const { darkMode, toggleTheme } = useDarkMode();
   const navigate = useNavigate();
   const profile = useLoaderData() as ProfileDetails;
 
@@ -46,18 +46,29 @@ export function ProfilePage() {
     <>
       <HeaderWidget />
 
-      <div className={styles.profile}>
+      <div
+        className={`
+        ${styles.profile}
+        ${darkMode && styles.profile__dark}
+      `}
+      >
         <h1>{profile.full_name}</h1>
         <div>
-          <b>Name</b>: <span>{profile?.full_name}</span>
+          <b>Name</b>: <span>{profile.full_name}</span>
         </div>
         <div>
-          <b>Role</b>: <span>{profile?.role}</span>
+          <b>Role</b>: <span>{profile.role}</span>
         </div>
-        <button onClick={toggleTheme} className={styles.dark_mode__button}>
+        <button
+          onClick={toggleTheme}
+          className={`${darkMode && styles.dark_mode__button}`}
+        >
           Dark Mode
         </button>
-        <button onClick={onLogoutHandler} className={styles.logout__button}>
+        <button
+          onClick={onLogoutHandler}
+          className={`${darkMode && styles.logout__button}`}
+        >
           Logout
         </button>
       </div>

client/src/pages/profile/ui/styles/Profile.page.module.css

@@ -5,10 +5,16 @@
   margin: 2em auto;
 }
 
+.profile__dark {
+  color: #ffffff;
+}
+
 .dark_mode__button {
+  color: #ffffff;
   background-color: darkgray;
 }
 
 .logout__button {
+  color: #ffffff;
   background-color: #ff0000;
 }

client/src/widgets/footer/ui/Footer.widget.tsx

@@ -1,8 +1,20 @@
 import React from "react";
-import "./styles/FooterWidget.css";
+import styles from "./styles/Footer.widget.module.css";
+import { useDarkMode } from "shared/dark-mode/use-dark-mode";
 
 export function FooterWidget() {
-  return <footer>Muse Group Frontend Academy</footer>;
+  const { darkMode } = useDarkMode();
+
+  return (
+    <footer
+      className={`
+    ${styles.footer}
+    ${darkMode && styles.footer__dark}
+  `}
+    >
+      Muse Group Frontend Academy
+    </footer>
+  );
 }
 
 export default FooterWidget;

client/src/widgets/footer/ui/styles/Footer.widget.module.css

@@ -0,0 +1,9 @@
+.footer {
+  background-color: khaki;
+  padding: 20px;
+}
+
+.footer__dark {
+  background-color: #2c2c2c;
+  color: #ffffff;
+}