project is completed

mate-academy · Oct 18, 2024 · 5caf51e · 5caf51e
1 parent 6ee010e
commit 5caf51e
Show file tree

Hide file tree

Showing 63 changed files with 552 additions and 182 deletions.
diff --git a/src/App.module.scss b/src/App.module.scss
@@ -31,11 +31,11 @@ html {
 body {
   font-family: Mont, sans-serif;
   font-size: 12px;
-  background-color: $color-page-background;
 }
 
 .app {
   min-height: 100vh;
+  background-color: var(--color-page-background);
 
   &__header {
     position: sticky;

diff --git a/src/App.tsx b/src/App.tsx
@@ -6,8 +6,47 @@ import { Menu } from './components/Menu';
 import { Header } from './components/Header';
 import { Footer } from './components/Footer';
 import { CartProvider } from './context/CartContext';
-import { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FavoritesProvider } from './context/FavoritesContext';
+import { ThemeProvider, useTheme } from './context/ThemeContext';
+type Props = {
+  isMenuOpen: boolean;
+  openMenu: () => void;
+  closeMenu: () => void;
+};
+
+const AppContent: React.FC<Props> = ({ isMenuOpen, openMenu, closeMenu }) => {
+  const { isDarkTheme } = useTheme();
+
+  useEffect(() => {
+    if (isDarkTheme) {
+      document.body.classList.add('dark-theme');
+    } else {
+      document.body.classList.remove('dark-theme');
+    }
+  }, [isDarkTheme]);
+
+  return (
+    <div className={styles.app} id="top">
+      <div className={styles.app__header}>
+        <Header onMenuClick={openMenu} closeMenu={closeMenu} />
+      </div>
+      <div
+        className={`${styles.app__menu} ${
+          isMenuOpen ? styles['app__menu--open'] : ''
+        }`}
+      >
+        <Menu closeMenu={closeMenu} />
+      </div>
+      <main className={styles.app__container}>
+        <Outlet />
+      </main>
+      <div className={styles.app__footer}>
+        <Footer />
+      </div>
+    </div>
+  );
+};
 
 export const App = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -23,27 +62,16 @@ export const App = () => {
   };
 
   return (
-    <FavoritesProvider>
-      <CartProvider>
-        <div className={styles.app} id="top">
-          <div className={styles.app__header}>
-            <Header onMenuClick={openMenu} closeMenu={closeMenu} />
-          </div>
-          <div
-            className={`${styles.app__menu} ${
-              isMenuOpen ? styles['app__menu--open'] : ''
-            }`}
-          >
-            <Menu closeMenu={closeMenu} />
-          </div>
-          <main className={styles.app__container}>
-            <Outlet />
-          </main>
-          <div className={styles.app__footer}>
-            <Footer />
-          </div>
-        </div>
-      </CartProvider>
-    </FavoritesProvider>
+    <ThemeProvider>
+      <FavoritesProvider>
+        <CartProvider>
+          <AppContent
+            isMenuOpen={isMenuOpen}
+            openMenu={openMenu}
+            closeMenu={closeMenu}
+          />
+        </CartProvider>
+      </FavoritesProvider>
+    </ThemeProvider>
   );
 };
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -13,14 +13,14 @@ export const Root = () => (
       <Route path="/" element={<App />}>
         <Route index element={<HomePage />} />
 
+        <Route path="cart" element={<CartPage />} />
+        <Route path="favourites" element={<Favorites />} />
+
         <Route path=":category">
           <Route index element={<Catalog />} />
           <Route path=":productId" element={<ProductDetailsPage />} />
         </Route>
 
-        <Route path="cart" element={<CartPage />} />
-        <Route path="favourites" element={<Favorites />} />
-
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>

diff --git a/src/components/AboutProduct/AboutProduct.module.scss b/src/components/AboutProduct/AboutProduct.module.scss
@@ -8,7 +8,7 @@
 
   &__title {
     padding-bottom: 16px;
-    border-bottom: 1px solid $color-border-grey;
+    border-bottom: 1px solid var(--color-grey-second);
   }
 
   &__description {
@@ -20,6 +20,6 @@
   &__text {
     @include body-text;
 
-    color: $color-grey;
+    color: var(--color-grey);
   }
 }
diff --git a/src/components/AddToFavourites/AddToFavourites.module.scss b/src/components/AddToFavourites/AddToFavourites.module.scss
@@ -5,16 +5,22 @@
   background-size: 16px 16px;
   background-repeat: no-repeat;
   background-position: center;
-  background-color: #fff;
-  border: 1px solid $color-border-icons;
+  background-color: var(--color-button);
+  border: 1px solid var(--color-button-border);
   border-radius: 48px;
 
+  &--dark {
+    background-image: url(../../img/icons/night_theme_heart.png);
+  }
+
   &--added {
     background-image: url(../../img/icons/heart_yellow.png);
-    border-color: $color-border-grey;
+    background-color: var(--color-button-disabled);
+    border: 1px solid var(--color-button-border-disabled);
   }
 
   &:hover {
-    border-color: $color-black;
+    background-color: var(--color-button-hover);
+    border: 1px solid var(--color-button-border-hover);
   }
 }
diff --git a/src/components/AddToFavourites/AddToFavourites.tsx b/src/components/AddToFavourites/AddToFavourites.tsx
@@ -3,12 +3,14 @@ import styles from './AddToFavourites.module.scss';
 import classNames from 'classnames';
 import { Products } from '../../utils/types';
 import { FavoritesContext } from '../../context/FavoritesContext';
+import { useTheme } from '../../context/ThemeContext';
 
 type Props = {
   size: 's' | 'm';
   product: Products;
 };
 export const AddToFavourites: React.FC<Props> = ({ size, product }) => {
+  const { isDarkTheme } = useTheme();
   const { favorites, setFavorites } = useContext(FavoritesContext);
 
   const productExistinFavorites = favorites.find(
@@ -34,6 +36,7 @@ export const AddToFavourites: React.FC<Props> = ({ size, product }) => {
     <button
       style={elementSize}
       className={classNames(styles.addToFavourites, {
+        [styles['addToFavourites--dark']]: isDarkTheme,
         [styles['addToFavourites--added']]: productExistinFavorites,
       })}
       onClick={

diff --git a/src/components/ArrowButton/ArrowButton.module.scss b/src/components/ArrowButton/ArrowButton.module.scss
@@ -6,30 +6,43 @@
   width: 32px;
   height: 32px;
 
-  border: 1px solid $color-border-icons;
+  border: 1px solid var(--color-button-border);
+  background-color: var(--color-button);
   border-radius: 48px;
-  background-color: #fff;
 
   background-size: 16px 16px;
   background-repeat: no-repeat;
   background-position: center;
 
   &:hover {
-    border: 1px solid $color-black;
+    border-color: var(--color-button-border-hover);
+    background-color: var(--color-button-hover);
   }
 
   &--right {
     background-image: url(../../img/icons/arrow_right_black.png);
   }
 
+  &--right-dark {
+    background-image: url(../../img/icons/arrow_right_white.png);
+  }
+
   &--left {
     background-image: url(../../img/icons/arrow_left_black.png);
   }
 
+  &--left-dark {
+    background-image: url(../../img/icons/arrow_left_white.png);
+  }
+
   &--up {
     background-image: url(../../img/icons/arrow_up_black.png);
   }
 
+  &--up-dark {
+    background-image: url(../../img/icons/arrow_up_white.png);
+  }
+
   &--down {
     background-image: url(../../img/icons/arrow_down_grey.png);
   }
@@ -42,23 +55,29 @@
     }
   }
 
-  &--right.arrowButton--disabled {
-    border: 1px solid $color-border-grey;
+  &--right.arrowButton--disabled,
+  &--right-dark.arrowButton--disabled {
+    background-color: var(--color-button-disabled);
+    border: 1px solid var(--color-button-border-disabled);
     background-image: url(../../img/icons/arrow_right_grey.png);
   }
 
-  &--left.arrowButton--disabled {
-    border: 1px solid $color-border-grey;
+  &--left.arrowButton--disabled,
+  &--left-dark.arrowButton--disabled {
+    background-color: var(--color-button-disabled);
+    border: 1px solid var(--color-button-border-disabled);
     background-image: url(../../img/icons/arrow_left_grey.png);
   }
 
   &--up.arrowButton--disabled {
-    border: 1px solid $color-border-grey;
+    background-color: var(--color-button-disabled);
+    border: 1px solid var(--color-button-border-disabled);
     background-image: url(../../img/icons/arrow_up_grey.png);
   }
 
   &--down.arrowButton--disabled {
-    border: 1px solid $color-border-grey;
+    background-color: var(--color-button-disabled);
+    border: 1px solid var(--color-button-border-disabled);
     background-image: url(../../img/icons/arrow_down_grey.png);
   }
 }
diff --git a/src/components/ArrowButton/ArrowButton.tsx b/src/components/ArrowButton/ArrowButton.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styles from './ArrowButton.module.scss';
 import classNames from 'classnames';
 import { ArrowType } from '../../utils/types';
+import { useTheme } from '../../context/ThemeContext';
 
 type Props = {
   type: ArrowType;
@@ -16,14 +17,14 @@ export const ArrowButton: React.FC<Props> = ({
   disabled = false,
   onClick = () => {},
 }) => {
-  const buttonClass = classNames(
-    styles.arrowButton,
-    styles[`arrowButton--${type}`],
-    {
-      [styles['arrowButton--wide']]: size === 'wide',
-      [styles['arrowButton--disabled']]: disabled,
-    },
-  );
+  const { isDarkTheme } = useTheme();
+
+  const buttonClass = classNames(styles.arrowButton, {
+    [styles[`arrowButton--${type}`]]: !isDarkTheme,
+    [styles[`arrowButton--${type}-dark`]]: isDarkTheme,
+    [styles['arrowButton--wide']]: size === 'wide',
+    [styles['arrowButton--disabled']]: disabled,
+  });
 
   return (
     <button

diff --git a/src/components/Breadcrumbs/Breadcrumbs.module.scss b/src/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -17,15 +17,15 @@
     align-items: center;
     text-decoration: none;
     font-weight: 600;
-    color: $color-black;
+    color: var(--color-black);
     line-height: 15px;
     text-transform: capitalize;
   }
 
   &__current-page {
     line-height: 15px;
     font-weight: 600;
-    color: $color-grey;
+    color: var(--color-grey);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,19 +1,23 @@
 import { NavLink, useParams } from 'react-router-dom';
 import styles from './Breadcrumbs.module.scss';
 import React from 'react';
+import { useTheme } from '../../context/ThemeContext';
+import homeIcon from '../../img/icons/home.png';
+import homeIconDark from '../../img/icons/night_theme_home.png';
 
 type Props = {
   name: string | undefined;
 };
 export const Breadcrumbs: React.FC<Props> = ({ name }) => {
   const { category } = useParams();
+  const { isDarkTheme } = useTheme();
 
   return (
     <div className={styles.breadcrumbs}>
       <NavLink to={'/'} style={{ display: 'block' }}>
         <img
           style={{ display: 'block' }}
-          src="../src/img/icons/home.png"
+          src={isDarkTheme ? homeIconDark : homeIcon}
           alt="home icon"
         />
       </NavLink>

diff --git a/src/components/CartProduct/CartProduct.module.scss b/src/components/CartProduct/CartProduct.module.scss
@@ -5,14 +5,18 @@
   width: 100%;
   height: 160px;
   padding: 16px;
-  border: 1px solid $color-border-grey;
-  background-color: #fff;
+  border: 1px solid var(--color-grey-second);
+  background-color: var(--color-card-background);
   border-radius: 16px;
 
   display: flex;
   flex-direction: column;
   gap: 16px;
 
+  &:hover {
+    box-shadow: 0 2px 16px 0 #0000001a;
+  }
+
   @include on-tablet {
     padding: 24px;
     flex-direction: row;
@@ -47,7 +51,7 @@
   }
 
   &__buttonClose {
-    background-color: #fff;
+    background-color: var(--color-card-background);
     border: none;
   }
 
@@ -58,7 +62,7 @@
   }
 
   &__name {
-    color: $color-black;
+    color: var(--color-black);
     width: 128px;
 
     @include on-tablet {
@@ -73,7 +77,7 @@
   }
 
   &__quantity {
-    color: $color-black;
+    color: var(--color-black);
 
     @include body-text;
   }