Merge branch 'dev' into PROD-2332_incorrect-web-price

Author: Maria Mattlin

src/ScrollToTop.jsx

@@ -1,6 +1,10 @@
+import { useLocation } from "react-router-dom";
 import React from "react";
 
-export const ScrollToTop = ({ children, location }) => {
-  React.useEffect(() => window.scrollTo(0, 0), [location?.pathname]);
+export const ScrollToTop = ({ children }) => {
+  const location = useLocation();
+  React.useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location?.pathname]);
   return children;
 };

src/components/FormElements/FormInputCheckbox/index.jsx

@@ -20,27 +20,27 @@ const FormInputCheckbox = ({
   ...props
 }) => {
   return inline ? (
-    <div className={cn(styles["styles.inline"])}>
-      <label className={cn(styles["styles.form-input-checkbox"], !!styleName ? styles[styleName] : undefined)}>
+    <div className={cn(styles["inline"])}>
+      <label className={cn(styles["form-input-checkbox"], !!styleName ? styles[styleName] : undefined)}>
         <Checkbox
           className={"form-input-rc-checkbox"}
           onChange={onChange}
           {...props}
         />
-        <span className={styles["styles.label"]}>
+        <span className={styles["label"]}>
           {label} {additionalContent}
         </span>
       </label>
     </div>
   ) : (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    <label className={cn(styles["styles.form-input-checkbox"], !!styleName ? styles[styleName] : undefined)}>
+    <label className={cn(styles["form-input-checkbox"], !!styleName ? styles[styleName] : undefined)}>
       <Checkbox
         className={"form-input-rc-checkbox"}
         onChange={onChange}
         {...props}
       />
-      <span className={styles["styles.label"]}>
+      <span className={styles["label"]}>
         {label} {additionalContent}
       </span>
     </label>

src/routes/Products/components/StyleOptions/styles.module.scss

@@ -23,24 +23,39 @@
       .box {
         border: 1px solid $black-20;
         border-radius: 4px;
-      }
-
-      .preview {
-        width: 240px;
-        height: 200px;
-        cursor: pointer;
-      }
-
-      .actions {
-        display: flex;
-        justify-content: center;
-        padding: 20px;
-
-        svg {
-          width: 25px;
-          height: 25px;
-          margin-left: 10px;
-          margin-right: 10px;
+        .preview {
+          width: 240px;
+          height: 200px;
+          cursor: pointer;
+        }
+  
+        .actions {
+          display: flex;
+          justify-content: center;
+          padding: 20px;
+  
+          svg {
+            width: 25px;
+            height: 25px;
+            margin-left: 10px;
+            margin-right: 10px;
+          }
+
+          .liked {
+            fill: $green1;
+      
+            * {
+              fill: $green1;
+            }
+          }
+      
+          .disliked {
+            fill: $green1;
+      
+            * {
+              fill: $green1;
+            }
+          }
         }
       }
 
@@ -101,22 +116,6 @@
       }
     }
 
-    .liked {
-      fill: $green1;
-
-      * {
-        fill: $green1;
-      }
-    }
-
-    .disliked {
-      fill: $green1;
-
-      * {
-        fill: $green1;
-      }
-    }
-
     .name {
       @include font-roboto;
       display: flex;

src/routes/Products/components/StyleOptionsModal/index.jsx

@@ -26,7 +26,7 @@ const StylesOptionsModal = ({
   const modalWidth = isMobile ? { fullWidth: true } : { halfWidth: true };
   return (
     <Modal show={true} {...modalWidth} handleClose={onDismiss}>
-      <div className={styles["styleOptions"]}>
+      <div className={styles["styleWrapper"]}>
         <div className={classNames(styles["style"], styles[style.className])}>
           <div className={styles["name"]}>
             <span>{style.name}</span> &nbsp;

src/routes/Products/components/StyleOptionsModal/styles.module.scss

@@ -20,28 +20,42 @@
     .box {
       border: 1px solid $black-20;
       border-radius: 4px;
-    }
-
-    .preview {
-      width: 100%;
-      height: 450px;
-      max-height: calc(100vh - 450px);
-
-      @include ltemd {
-        max-height: calc(100vh - 550px);
+      .preview {
+        width: 100%;
+        height: 450px;
+        max-height: calc(100vh - 450px);
+  
+        @include ltemd {
+          max-height: calc(100vh - 550px);
+        }
       }
-    }
-
-    .actions {
-      display: flex;
-      justify-content: center;
-      padding: 20px;
 
-      svg {
-        width: 25px;
-        height: 25px;
-        margin-left: 10px;
-        margin-right: 10px;
+      .actions {
+        display: flex;
+        justify-content: center;
+        padding: 20px;
+  
+        .liked {
+          fill: $green1;
+      
+          * {
+            fill: $green1;
+          }
+        }
+      
+        .disliked {
+          fill: $green1;
+      
+          * {
+            fill: $green1;
+          }
+        }
+        svg {
+          width: 25px;
+          height: 25px;
+          margin-left: 10px;
+          margin-right: 10px;
+        }
       }
     }