Merge branch 'master' into productDetailsSlider

package.json

@@ -13,6 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
+    "react-router": "^6.21.0",
     "react-router-dom": "^6.20.1",
     "react-scripts": "^5.0.1",
     "react-slick": "^0.29.0",

src/modules/CartPage/CartPage.module.scss

@@ -19,9 +19,14 @@
 }
 
 .title {
+  margin-top: 1.5rem;
   margin-bottom: 2rem;
   color: $color__primary;
   @include h1-typography;
+
+  @include onTablet {
+    margin-top: 1rem;
+  }
 }
 
 .gridContainer {

src/modules/HomePage/componets/ShopByCategory/ShopByCategory.module.scss

@@ -49,24 +49,11 @@
 
   &__imgContainer {
     position: relative;
-    width: 100%;
-    max-width: 300px;
-    margin: 0 auto;
-    height: calc(100vw * 0.5);
-    min-height: 288px;
+    height: 0;
+    padding-bottom: 100%;
     border-radius: 8px;
     margin-bottom: 1.5rem;
     overflow: hidden;
-
-    @include onTablet {
-      max-width: 400px;
-      min-height: 177px;
-      height: calc(100vw * 0.3);
-    }
-
-    @include onDesktop {
-      max-height: 368px;
-    }
   }
 
   &__imgPhones {

src/modules/NotFoundPage/NotFoundPage.module.scss

@@ -16,6 +16,7 @@ $footerAndHeaderHeightDesktop: 160px;
 
   @include onMobile {
     height: calc(100vh - #{$footerAndHeaderHeightTablet});
+    gap: 5px;
   }
 
   @include onDesktop {
@@ -26,10 +27,14 @@ $footerAndHeaderHeightDesktop: 160px;
 
 .not_found_logo {
   height: 160px;
+
+  @include onMobile {
+    height: 90px;
+  }
 }
 
 .error_message {
-  color: $color__primary;
+  color: $color__secondary;
   @include bodyText-typography;
 
   &_dark {
@@ -39,13 +44,17 @@ $footerAndHeaderHeightDesktop: 160px;
 }
 
 .subtitle {
-  color: $color__primary;
+  color: $color__secondary;
   @include bodyText-typography;
 
   &_dark {
     @include bodyText-typography;
     color: $color__dark-theme__white;
   }
+
+  @include onMobile {
+    display: none;
+  }
 }
 
 .headline {
@@ -55,6 +64,10 @@ $footerAndHeaderHeightDesktop: 160px;
     @include h2-typography;
     color: $color__dark-theme__white;
   }
+
+  @include onMobile {
+    font-size: 24px;
+  }
 }
 
 .button {
@@ -90,4 +103,10 @@ $footerAndHeaderHeightDesktop: 160px;
       scale: 1.1;
     }
   }
+
+  @include onMobile {
+    margin-top: 5px;
+    padding: 8px;
+    font-size: 12px;
+  }
 }

src/modules/shared/AddToCart/AddToCart.module.scss

@@ -0,0 +1,48 @@
+@import '../../../styles/utils/variables/colors';
+
+.addToCart {
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 0;
+
+  border-radius: 8px;
+  border: none;
+  background: $color__accent;
+
+  color: $color__white;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 21px;
+  transition: box-shadow 0.3s ease;
+
+  &:hover {
+    box-shadow: 0px 3px 13px 0px rgba(23, 32, 49, 0.4);
+  }
+
+  &__SELECTED {
+    border-radius: 8px;
+    border: 1px solid $color__elements;
+    background: $color__white;
+    color: $color__accent;
+  }
+
+  &__DARK {
+    background: #905bff;
+    border-radius: 0px;
+    color: $color__dark-theme__white;
+    border: none;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: #a378ff;
+    }
+
+    &__SELECTED {
+      background: $color__dark-theme__secondary;
+      color: $color__dark-theme__white;
+    }
+  }
+}

src/modules/shared/AddToCart/AddToCart.tsx

@@ -1,7 +1,46 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import cn from 'classnames';
+import styles from './AddToCart.module.scss';
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
+import { actions as cartActions } from '../../../store/reducers/cartSlice';
+import { Phone } from '../../../types/Phone';
 
-// import styles from './AddToCart.module.scss';
+type Props = {
+  productItem: Phone;
+};
+
+export const AddToCart: React.FC<Props> = ({ productItem }) => {
+  const { isDarkTheme } = useAppSelector((state) => state.theme);
+  const navigate = useNavigate();
+  const { cart } = useAppSelector((state) => state.cart);
+  const dispatch = useAppDispatch();
+
+  const [isSelected, setIsSelected] = useState<boolean>(
+    !!cart.find(cartItem => cartItem.id === productItem.id),
+  );
+
+  const handleAddToCart = (product: Phone) => {
+    if (!isSelected) {
+      dispatch(cartActions.add(product));
+      setIsSelected(true);
+    } else {
+      navigate('../cart');
+    }
+  };
 
-export const AddToCart: React.FC = () => {
-  return <div>Add to Cart Button</div>;
+  return (
+    <button
+      className={cn(styles.addToCart, {
+        [styles.addToCart__DARK]: isDarkTheme,
+        [styles.addToCart__SELECTED]: isSelected,
+        [styles.addToCart__DARK__SELECTED]:
+        isSelected && isDarkTheme,
+      })}
+      type="button"
+      onClick={() => handleAddToCart(productItem)}
+    >
+      {isSelected ? 'Added' : 'Add to cart'}
+    </button>
+  );
 };

src/modules/shared/AddToFavourites/AddToFavourites.module.scss

@@ -0,0 +1,48 @@
+@import '../../../styles/utils/variables/colors';
+
+.addToFavourite {
+  background-image: url('../../../static/buttons/fovourites-default_button.svg');
+
+  margin-left: 8px;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: $color__white;
+
+  border-radius: 48px;
+  border: 1px solid $color__icons;
+
+  &:hover {
+    transition: border 0.3s ease;
+    border: 1px solid $color__primary;
+  }
+
+  &__SELECTED {
+    background-image: url('../../../static/buttons/fovourites-selected_button.svg');
+
+    border: 1px solid $color__elements;
+  }
+
+  &__DARK {
+    background-image: url('../../../static/buttons/fovourites-default_button_dark.svg');
+
+    background-color: $color__dark-theme__surface-2;
+    border-radius: 0px;
+    border: none;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: $color__dark-theme__icons;
+    }
+
+    &__SELECTED {
+      background-image: url('../../../static/buttons/fovourites-selected_button_dark.svg');
+
+      border: 1px solid $color__dark-theme__elements;
+      border-radius: 0px;
+      background-color: $color__dark-theme__black;
+    }
+  }
+}

src/modules/shared/AddToFavourites/AddToFavourites.tsx

@@ -1,7 +1,45 @@
-import React from 'react';
+import React, { useState } from 'react';
+import cn from 'classnames';
+import styles from './AddToFavourites.module.scss';
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
+import { actions as favouritiesActions }
+  from '../../../store/reducers/favoritesSlice';
+import { Phone } from '../../../types/Phone';
 
-// import styles from './AddToFavourites.module.scss';
+type Props = {
+  productItem: Phone;
+};
+
+export const AddToFavourites: React.FC<Props> = ({ productItem }) => {
+  const { isDarkTheme } = useAppSelector((state) => state.theme);
+  const { favorites } = useAppSelector((state) => state.favorites);
+  const dispatch = useAppDispatch();
+
+  const [isSelected, setIsSelected] = useState<boolean>(
+    !!favorites.find(favorite => favorite.id === productItem.id),
+  );
+
+  const handleFavouritiesButton = (product: Phone) => {
+    if (isSelected) {
+      dispatch(favouritiesActions.remove(product.id));
+      setIsSelected(false);
+    } else {
+      dispatch(favouritiesActions.add(product));
+      setIsSelected(true);
+    }
+  };
 
-export const AddToFavourites: React.FC = () => {
-  return <div>Add To Favourites Button</div>;
+  return (
+    <button
+      type="button"
+      aria-label="Add to favourite"
+      className={cn(styles.addToFavourite, {
+        [styles.addToFavourite__DARK]: isDarkTheme,
+        [styles.addToFavourite__SELECTED]: isSelected,
+        [styles.addToFavourite__DARK__SELECTED]:
+        isSelected && isDarkTheme,
+      })}
+      onClick={() => handleFavouritiesButton(productItem)}
+    />
+  );
 };

src/modules/shared/BackButton/BackButton.module.scss

@@ -0,0 +1,20 @@
+@import '../../../styles/utils/mixins/mixin-typography';
+
+.backButtonContainer {
+  display: flex;
+  gap: 4px;
+  align-items: flex-end;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+}
+
+.backButtonText {
+  color: $color__secondary;
+  @include smallText-typography;
+  padding-right: 15px;
+
+  &__DARK {
+    color: $color__dark-theme__white;
+  }
+}