change css to scss, make cart page adaptive

package.json

@@ -7,6 +7,7 @@
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
         "formik": "^2.2.9",
+        "node-sass": "^6.0.1",
         "react": "^17.0.2",
         "react-content-loader": "^6.0.3",
         "react-dom": "^17.0.2",
@@ -16,6 +17,7 @@
         "react-scripts": "4.0.3",
         "redux": "^4.1.1",
         "redux-thunk": "^2.3.0",
+        "sass": "^1.43.4",
         "web-vitals": "^1.0.1",
         "yup": "^0.32.11"
     },

src/components/Button/Button.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import styles from './Button.module.css';
+import styles from './Button.module.scss';
 import PropTypes from 'prop-types';
 
-const Button = ({ text, onClickHandler}) => {
+const Button = ({ text, onClickHandler }) => {
     return (
         <button className={styles.btn}
             onClick={() => onClickHandler()}>

src/components/Card/Card.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './Card.module.css';
+import styles from './Card.module.scss';
 import FavouriteIcon from './FavouriteIcon';
 import Button from '../Button/Button';
 const NOIMGSRC = 'img/notfound.png';

src/components/CardInCart/CardInCart.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './CardInCart.module.css';
+import styles from './CardInCart.module.scss';
 import TrashIcon from './TrashIcon';
 import { useDispatch, useSelector } from 'react-redux';
 import { increaseProductQuantity, decreaseProductQuantity } from '../../store/cart/actions';
-import CheckoutList from '../CheckoutList/CheckoutList.module.css';
+import CheckoutList from '../CheckoutList/CheckoutList.module.scss';
 
 const NOIMGSRC = 'img/notfound.png';
 const CardInCart = ({ articul, imgSrc, title, color, price, isPriceShow, onClickHandler, hasQuantityBtns, hasTrashIcon, orderModalStyles }) => {

src/components/CardInCart/CardInCart.module.scss

@@ -0,0 +1,132 @@
+.item {
+    display: grid;
+    grid-template-columns: 120px 1.5fr repeat(3, 1fr) 50px;
+    column-gap: 2%;
+    border-radius: 15px;
+    box-shadow: 0px 0px 10px 1px hsl(0deg, 0%, 82%, 49%);
+    min-height: 80px;
+    padding: 15px;
+    align-items: center;
+    text-align: center;
+
+    @media (max-width: 725px) {
+        grid-template-columns: 120px 2fr 50px;
+        grid-template-areas: "img info deleteBtn" "count totalPrice totalPrice";
+    }
+    @media (max-width: 450px) {
+        grid-template-columns: 80px 1fr 1fr 0.1fr;
+        column-gap: 3%;
+        grid-template-areas: "img info info deleteBtn" "count count totalPrice totalPrice";
+    }
+}
+
+.img {
+    width: 110px;
+    max-width: 100%;
+    height: 110px;
+    object-fit: cover;
+    align-self: center;
+    justify-self: center;
+    border-radius: 15px;
+    display: block;
+    @media (max-width: 725px) {
+        grid-area: img;
+        margin-bottom: 20px;
+    }
+    @media (max-width: 450px) {
+        width: 80px;
+        height: 80px;
+    }
+}
+
+.itemTitle {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-weight: 500;
+    @media (max-width: 450px) {
+        font-size: 14px;
+    }
+}
+
+.color,
+.articul,
+.priceOne {
+    color: #686868;
+}
+
+.color {
+    margin-bottom: 10px;
+}
+
+.price {
+    font-weight: 500;
+    @media (max-width: 725px) {
+        margin-top: 0;
+        display: none;
+    }
+}
+
+.total {
+    @media (max-width: 725px) {
+        grid-area: totalPrice;
+        justify-self: right;
+    }
+}
+.deleteItemBtn {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    justify-self: center;
+    @media (max-width: 725px) {
+        grid-area: deleteBtn;
+    }
+
+    &:hover path {
+        transition: 0.5s;
+        stroke: rgb(245, 66, 66);
+    }
+}
+
+.trashIcon {
+    width: 25px;
+    height: 25px;
+    object-fit: contain;
+    transition: 0.5s;
+}
+
+.quantity {
+    @media (max-width: 725px) {
+        grid-area: count;
+    }
+    @media (max-width: 450px) {
+        justify-self: start;
+    }
+}
+.quantityBtn {
+    width: 30px;
+    height: 30px;
+    background-color: rgb(190, 200, 244);
+    border-radius: 50%;
+    &:hover {
+        background-color: rgb(88, 110, 205);
+        color: #fff;
+    }
+}
+
+.decrement {
+    margin-right: 10px;
+}
+
+.increment {
+    margin-left: 10px;
+}
+
+.itemInfo {
+    text-align: left;
+    @media (max-width: 725px) {
+        grid-area: info;
+    }
+    @media (max-width: 450px) {
+        font-size: 14px;
+    }
+}

src/components/CardInCart/TrashIcon.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './CardInCart.module.css';
+import styles from './CardInCart.module.scss';
 
 const TrashIcon = () => {
     return (

src/components/CardsList/CardsList.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Card from '../Card/Card';
 import PropTypes from 'prop-types';
-import styles from './CardsList.module.css';
+import styles from './CardsList.module.scss';
 
 
 const CardsList = ({ cards, onClickHandler, changeFavouriteHandler, favouritesCardsArr }) => {

src/components/CardsList/CardsList.module.css → src/components/CardsList/CardsList.module.scss

@@ -7,11 +7,9 @@
     padding-left: 0;
     margin: 40px 0 40px;
     list-style: none;
-    justify-content: space-between;
-}
+    justify-content: center;
 
-@media (max-width:550px) {
-    .list {
+    @media (max-width: 550px) {
         justify-content: center;
     }
-}
+}

src/components/CartForm/CartForm.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Formik, Form, FieldArray } from 'formik';
-import styles from './CartForm.module.css';
-import btnStyles from '../Button/Button.module.css';
+import styles from './CartForm.module.scss';
+import btnStyles from '../Button/Button.module.scss';
 import { BasicFormSchema } from './BasicFormSchema';
 import { formDataFields } from './formDataFields';
 import { FormikInputBlock } from './formFields/FormikInputBlock';

src/components/CartForm/CartForm.module.css → src/components/CartForm/CartForm.module.scss

@@ -8,12 +8,20 @@
     color: #667ad1;
     font-weight: 700;
     font-size: 20px;
+    @media (max-width: 725px) {
+        text-align: center;
+        margin-bottom: 30px;
+    }
 }
 
 .orderInput {
     border: 1px solid #586ece26;
     border-radius: 10px;
-    padding: 10px;
+    padding: 15px;
+    font-size: 16px;
+    @media (max-width: 725px) {
+        padding: 20px;
+    }
 }
 
 .orderLabel {
@@ -28,25 +36,39 @@
 .fieldContainer {
     display: flex;
     flex-direction: column;
-}
-
-.fieldContainer:not(:last-child) {
-    margin-bottom: 25px;
+    &:not(:last-child) {
+        margin-bottom: 25px;
+    }
 }
 
 .formInner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: 20px;
     margin-bottom: 15px;
+    @media (max-width: 725px) {
+        grid-template-columns: minmax(300px, 450px);
+        margin-bottom: 40px;
+    }
 }
 
 .submitBtn {
     width: 30%;
+    @media (max-width: 725px) {
+        width: 100%;
+        padding: 15px;
+    }
 }
-.form{
+.form {
     background-color: #d3cdf94d;
     border-radius: 15px;
     padding: 30px 20px;
     box-shadow: 0px 0px 10px 1px hsl(245deg, 76%, 97%);
-}
+
+    @media (max-width: 725px) {
+        max-width: 450px;
+        margin: 0 auto;
+        box-sizing: border-box;
+        padding: 30px;
+    }
+}

src/components/CartForm/formFields/FormikInputBlock.jsx

@@ -1,5 +1,5 @@
 import { Field, ErrorMessage } from 'formik';
-import styles from '../CartForm.module.css';
+import styles from '../CartForm.module.scss';
 import PropTypes from 'prop-types';
 
 export const FormikInputBlock = ({ id, name, placeholder, type, label }) => {

src/components/CartForm/formFields/NumberFormatInputBlock.jsx

@@ -1,5 +1,5 @@
 import { ErrorMessage, useField } from 'formik';
-import styles from '../CartForm.module.css';
+import styles from '../CartForm.module.scss';
 import NumberFormat from "react-number-format";
 import PropTypes from 'prop-types';
 

src/components/CartList/CartList.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styles from './CartList.module.css';
+import styles from './CartList.module.scss';
 import CardInCart from '../CardInCart/CardInCart';
 
 const CartList = ({ cards, onClickHandler }) => {