From 5db9a4e26ea9383f1764a1bebcceb18ac2bd4873 Mon Sep 17 00:00:00 2001
From: skywalker <baskirill.an@gmail.com>
Date: Mon, 26 Aug 2024 00:17:34 +0300
Subject: [PATCH 1/2] feat(favorite): dark mode

---
 client/src/pages/favorite/ui/Favorite.page.tsx     |  4 +++-
 .../favorite/ui/styles/Favorite.page.module.css    |  4 ++++
 .../instrument-card/ui/InstrumentDescription.tsx   | 14 +++++++-------
 .../ui/styles/InstrumentDescription.module.css     |  4 ++++
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/favorite/ui/Favorite.page.tsx b/client/src/pages/favorite/ui/Favorite.page.tsx
index c57f65f2..65f72cc5 100644
--- a/client/src/pages/favorite/ui/Favorite.page.tsx
+++ b/client/src/pages/favorite/ui/Favorite.page.tsx
@@ -7,16 +7,18 @@ 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>
diff --git a/client/src/pages/favorite/ui/styles/Favorite.page.module.css b/client/src/pages/favorite/ui/styles/Favorite.page.module.css
index 10342f0c..57a438c7 100644
--- a/client/src/pages/favorite/ui/styles/Favorite.page.module.css
+++ b/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;
 }
diff --git a/client/src/shared/instrument-card/ui/InstrumentDescription.tsx b/client/src/shared/instrument-card/ui/InstrumentDescription.tsx
index d5a71335..9f90f541 100644
--- a/client/src/shared/instrument-card/ui/InstrumentDescription.tsx
+++ b/client/src/shared/instrument-card/ui/InstrumentDescription.tsx
@@ -17,7 +17,7 @@ export const InstrumentDescription = (props: Props) => {
     manufacturer_date: { manufacture_date },
     release_date: { release_date },
     country: { country },
-    basic_materials,
+    basic_materials
   } = props.instrument;
 
   return (
@@ -31,35 +31,35 @@ 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 +69,7 @@ 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>
           ))}
diff --git a/client/src/shared/instrument-card/ui/styles/InstrumentDescription.module.css b/client/src/shared/instrument-card/ui/styles/InstrumentDescription.module.css
index 0ed3dfab..9296d9d3 100644
--- a/client/src/shared/instrument-card/ui/styles/InstrumentDescription.module.css
+++ b/client/src/shared/instrument-card/ui/styles/InstrumentDescription.module.css
@@ -18,6 +18,10 @@
   color: #212529;
 }
 
+.primary__dark {
+  color: #ffffff;
+}
+
 .secondary {
   color: #6c757d;
 }

From 640e811612e8e98a8a3a1183dddb9ce0a46e2b11 Mon Sep 17 00:00:00 2001
From: skywalker <baskirill.an@gmail.com>
Date: Mon, 26 Aug 2024 00:18:36 +0300
Subject: [PATCH 2/2] fix(ci): run locally

---
 .../src/pages/favorite/ui/Favorite.page.tsx   |  6 ++--
 .../ui/InstrumentDescription.tsx              | 31 ++++++++++++++-----
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/favorite/ui/Favorite.page.tsx b/client/src/pages/favorite/ui/Favorite.page.tsx
index 65f72cc5..738fbb5d 100644
--- a/client/src/pages/favorite/ui/Favorite.page.tsx
+++ b/client/src/pages/favorite/ui/Favorite.page.tsx
@@ -11,14 +11,16 @@ import { useDarkMode } from "shared/dark-mode/use-dark-mode";
 
 export const FavoritePage = () => {
   useJwt();
-  const {darkMode} = useDarkMode();
+  const { darkMode } = useDarkMode();
   const loader = useLoaderData() as FavoriteLoader;
 
   return (
     <>
       <HeaderWidget />
 
-      <h1 className={`${styles.h1} ${darkMode && styles.h1__dark}`}>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>
diff --git a/client/src/shared/instrument-card/ui/InstrumentDescription.tsx b/client/src/shared/instrument-card/ui/InstrumentDescription.tsx
index 9f90f541..b92a90d1 100644
--- a/client/src/shared/instrument-card/ui/InstrumentDescription.tsx
+++ b/client/src/shared/instrument-card/ui/InstrumentDescription.tsx
@@ -17,7 +17,7 @@ export const InstrumentDescription = (props: Props) => {
     manufacturer_date: { manufacture_date },
     release_date: { release_date },
     country: { country },
-    basic_materials
+    basic_materials,
   } = props.instrument;
 
   return (
@@ -31,35 +31,50 @@ export const InstrumentDescription = (props: Props) => {
         >
           Type
         </b>
-        : <span className={`${darkMode ? styles.primary__dark : styles.primary}`}>{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 className={`${darkMode ? styles.primary__dark : styles.primary}`}>{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 className={`${darkMode ? styles.primary__dark : styles.primary}`}>{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 className={`${darkMode ? styles.primary__dark : styles.primary}`}>{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 className={`${darkMode ? styles.primary__dark : styles.primary}`}>{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  className={`${darkMode ? styles.primary__dark : styles.primary}`}>
+            <span
+              className={`${darkMode ? styles.primary__dark : styles.primary}`}
+            >
               {index > 0 ? "," : ""} {basic_material.basic_material}
             </span>
           ))}