Merge pull request #72 from fs-jun24-team-3/fix-add-to-cart-button

Fixed in cart text. Added selected style.

src/components/Buttons/MainButton/MainButton.module.scss

@@ -16,6 +16,12 @@
     }
   }
 
+  &--selected {
+    background-color: $white-color;
+    color: $accent-color;
+    border: $button-with-color-border;
+  }
+
   &:hover {
     cursor: pointer;
     box-shadow: $wide-button-box-shadow-on-hover;

src/components/Buttons/MainButton/MainButton.tsx

@@ -7,18 +7,21 @@ type Props = {
   onClick?: () => void;
   label: string;
   size: Exclude<ButtonSize, ButtonSize.Small>;
+  isSelected: boolean;
 };
 
 export const MainButton: React.FC<Props> = ({
   label,
   onClick = () => {},
   size,
+  isSelected,
 }) => {
   return (
     <button
       className={classNames('button', styles['main-button'], {
         [styles['main-button__size--default']]: size === ButtonSize.Default,
         [styles['main-button__size--large']]: size === ButtonSize.Large,
+        [styles['main-button--selected']]: isSelected,
       })}
       onClick={onClick}
     >

src/components/ProductActions/ProductActions.tsx

@@ -18,7 +18,7 @@ export const ProductActions: React.FC<Props> = ({
   item,
 }) => {
   const dispatch = useAppDispatch();
-  const inCart = useAppSelector(state =>
+  const isInCart = useAppSelector(state =>
     state.cart.cartItems.some(el => el.item.id === item.id),
   );
 
@@ -40,9 +40,10 @@ export const ProductActions: React.FC<Props> = ({
   return (
     <div className={styles['product-actions-block']}>
       <MainButton
-        label={inCart ? 'Remove from cart' : 'Add to cart'}
+        label={isInCart ? 'In cart' : 'Add to cart'}
         size={size}
-        onClick={inCart ? handleRemoveFromCart : handleAddToCart}
+        isSelected={isInCart}
+        onClick={isInCart ? handleRemoveFromCart : handleAddToCart}
       />
       <FavoriteButton
         size={size}