Merge pull request #119 from bas-kirill/feat/favorite-dark-mode

feat(favorite): dark mode

client/src/pages/favorite/ui/Favorite.page.tsx

@@ -7,16 +7,20 @@ import { InstrumentCard } from "shared/instrument-card";
 import { useJwt } from "shared/jwt/use-jwt";
 import { useLoaderData } from "react-router-dom";
 import { FavoriteLoader } from "pages/favorite";
+import { useDarkMode } from "shared/dark-mode/use-dark-mode";
 
 export const FavoritePage = () => {
   useJwt();
+  const { darkMode } = useDarkMode();
   const loader = useLoaderData() as FavoriteLoader;
 
   return (
     <>
       <HeaderWidget />
 
-      <h1 className={styles.h1}>Favorite</h1>
+      <h1 className={`${styles.h1} ${darkMode && styles.h1__dark}`}>
+        Favorite
+      </h1>
 
       {loader.instrumentDetails.length === 0 && (
         <div className={styles.favorite__empty}>Favorite List is Empty</div>

client/src/pages/favorite/ui/styles/Favorite.page.module.css

@@ -3,6 +3,10 @@
   margin: 0.5em 0;
 }
 
+.h1__dark {
+  color: #ffffff;
+}
+
 .favorite__empty {
   text-align: center;
 }

client/src/shared/instrument-card/ui/InstrumentDescription.tsx

@@ -31,35 +31,50 @@ export const InstrumentDescription = (props: Props) => {
         >
           Type
         </b>
-        : <span>{instrument_type}</span>
+        :{" "}
+        <span className={`${darkMode ? styles.primary__dark : styles.primary}`}>
+          {instrument_type}
+        </span>
         <br />
         <b
           className={`${darkMode ? styles.secondary__dark : styles.secondary}`}
         >
           Manufacturer
         </b>
-        : <span>{manufacturer_name}</span>
+        :{" "}
+        <span className={`${darkMode ? styles.primary__dark : styles.primary}`}>
+          {manufacturer_name}
+        </span>
         <br />
         <b
           className={`${darkMode ? styles.secondary__dark : styles.secondary}`}
         >
           Manufacturer date
         </b>
-        : <span>{manufacture_date}</span>
+        :{" "}
+        <span className={`${darkMode ? styles.primary__dark : styles.primary}`}>
+          {manufacture_date}
+        </span>
         <br />
         <b
           className={`${darkMode ? styles.secondary__dark : styles.secondary}`}
         >
           Release Date
         </b>
-        : <span>{release_date}</span>
+        :{" "}
+        <span className={`${darkMode ? styles.primary__dark : styles.primary}`}>
+          {release_date}
+        </span>
         <br />
         <b
           className={`${darkMode ? styles.secondary__dark : styles.secondary}`}
         >
           Country
         </b>
-        : <span>{country}</span>
+        :{" "}
+        <span className={`${darkMode ? styles.primary__dark : styles.primary}`}>
+          {country}
+        </span>
         <br />
         <b
           className={`${darkMode ? styles.secondary__dark : styles.secondary}`}
@@ -69,7 +84,9 @@ export const InstrumentDescription = (props: Props) => {
         :
         <>
           {basic_materials.map((basic_material, index) => (
-            <span>
+            <span
+              className={`${darkMode ? styles.primary__dark : styles.primary}`}
+            >
               {index > 0 ? "," : ""} {basic_material.basic_material}
             </span>
           ))}

client/src/shared/instrument-card/ui/styles/InstrumentDescription.module.css

@@ -18,6 +18,10 @@
   color: #212529;
 }
 
+.primary__dark {
+  color: #ffffff;
+}
+
 .secondary {
   color: #6c757d;
 }