styling fixes

src/components/CardWithIcon/CardWithIcon.module.scss

@@ -1,5 +1,5 @@
-.title{
+.title {
     font-family: var(--font-brand);
     font-weight: bold;
-    font-size: 20px;
-}
+    font-size: var(--title-size-mobile);
+}

src/components/Hero/Hero.module.scss

@@ -31,11 +31,17 @@
         font-size: 70px;
         font-weight: 600;
         margin: 0;
+        @media (max-width: 765px) {
+            font-size: var(--title-size);
+        }
     }
     p {
         margin: 0 20px;
         margin-bottom: 20px;
         text-align: center;
+        @media (max-width: 765px) {
+            font-size: 14px;
+        }
     }
     .downArrow {
         position: absolute;

src/components/OrderSummary/OrderSummary.module.scss

@@ -5,14 +5,12 @@
     max-height: 240px;
     .layout {
         padding: 30px;
-        p{
-
-                font-family: var(--font-brand);
-                font-weight: bold;
-                font-size: 20px;
-
+        p {
+            font-family: var(--font-brand);
+            font-weight: bold;
+            font-size: var(--title-size-mobile);
         }
-        a{
+        a {
             padding-bottom: 20px;
         }
     }

src/index.css

@@ -18,6 +18,7 @@
     --color-secondary-light: white;
     --shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
     --title-size: 40px;
+    --title-size-mobile: 20px;
     --font-brand: "Crimson Pro", serif;
 }
 

src/pages/CheckoutWizard/Address/Address.tsx

@@ -131,6 +131,7 @@ export const Address = ({ onNext }: AddressProps) => {
                     <div className={style.flexRow}>
                         <TextInputRHF
                             name="street"
+                            className={style.street}
                             label="Address"
                             defaultValue={userStore.street}
                             rules={{

src/pages/CheckoutWizard/Address/address.module.scss

@@ -48,6 +48,9 @@
         .district {
             min-width: 100px;
         }
+        .street {
+            text-transform: capitalize;
+        }
     }
     .map {
         @media (max-width: 765px) {

src/pages/CheckoutWizard/Checkout/Checkout.module.scss

@@ -11,42 +11,43 @@
         max-height: 25vh;
         border-radius: 8px;
         margin-top: 50px;
-        h2{
+        h2 {
             text-transform: capitalize;
         }
         @media (max-width: 765px) {
             width: 80vw;
-           }
-        .billingData{
+        }
+        .billingData {
             font-family: var(--font-brand);
-            font-size: 20px;
+            font-size: var(--title-size-mobile);
             font-weight: bold;
             margin-bottom: 30px;
+            text-transform: capitalize;
         }
-        .backBtn{
+        .backBtn {
             @media (max-width: 765px) {
-               margin-bottom: 30px;
-               }
+                margin-bottom: 30px;
+            }
         }
     }
     .form {
         display: flex;
         flex-direction: column;
         padding: 45px;
         margin-bottom: 100px;
-        gap:30px;
-        .label{
-        font-size: 18px;
-        font-weight: bold;
-        color: black;
-        font-family: var(--font-brand);
+        gap: 30px;
+        .label {
+            font-size: 18px;
+            font-weight: bold;
+            color: black;
+            font-family: var(--font-brand);
         }
         .field {
             display: flex;
             flex-direction: column;
             width: 414px;
             @media (max-width: 765px) {
-             width: 80vw;
+                width: 80vw;
             }
             .textfield {
                 background-color: var(--color-secondary-light);

src/pages/CheckoutWizard/Checkout/index.tsx → src/pages/CheckoutWizard/Checkout/Checkout.tsx

@@ -4,7 +4,8 @@ import useUserStore from "../../../stores/userStore"
 import { Button, FormLabel } from "@mui/material"
 import TextInputRHF from "../../../components/input/TextInput/TextInput.rhf"
 import DateInput from "../../../components/input/DateInput/DateInput"
-import {  } from "react-router-dom"
+import {} from "react-router-dom"
+import {} from "lodash"
 
 interface CheckoutData {
     cardNumber: string

src/pages/CheckoutWizard/ThankYou/styles.module.scss

@@ -5,7 +5,7 @@
     .title {
         color: var(--color-main);
         @media (max-width: 765px) {
-            font-size: 20px;
+            font-size: var(--title-size-mobile);
         }
     }
     .cardsContainer {

src/pages/CheckoutWizard/index.tsx

@@ -1,6 +1,6 @@
 import { Navigate, Route, Routes, useNavigate } from "react-router-dom"
 import { Address } from "./Address/Address"
-import { Checkout } from "./Checkout"
+import { Checkout } from "./Checkout/Checkout"
 import { Wrapper } from "../../components/Wrapper/Wrapper"
 import { ThankYou } from "./ThankYou/ThankYou"
 

src/pages/Home/components/AboutRestaurant/AboutRestaurant.module.scss

@@ -14,7 +14,7 @@
             margin-left: 20px;
             margin-right: 20px;
             @media (max-width: 765px) {
-                font-size: var(--title-size);
+                font-size: var(--title-size-mobile);
             }
         }
     }

src/pages/Home/components/WhyChooseUs/styles.module.scss

@@ -13,6 +13,9 @@
             font-size: var(--title-size);
             font-family: var(--font-brand);
             margin: 5px 15px 5px 25px;
+            @media (max-width: 765px) {
+                font-size: var(--title-size-mobile);
+            }
         }
         .carousel {
             display: flex;
@@ -37,10 +40,10 @@
                 .description {
                     padding: 20px;
                 }
-                .title{
+                .title {
                     font-family: var(--font-brand);
                     font-weight: bold;
-                    font-size: 20px;
+                    font-size: var(--title-size-mobile);
                 }
             }
             .card {
@@ -51,10 +54,10 @@
                 flex-direction: column;
                 align-items: center;
                 margin: 20px;
-                .title{
+                .title {
                     font-family: var(--font-brand);
                     font-weight: bold;
-                    font-size: 20px;
+                    font-size: var(--title-size-mobile);
                 }
                 .description {
                     padding: 20px;

src/pages/ReservedArea/ReservedArea.tsx

@@ -83,7 +83,7 @@ export const ReservedArea = () => {
                             <h4>
                                 Full Name: {name} {surname}
                             </h4>
-                            <h4>
+                            <h4 className={styles.address}>
                                 Address: {number}, {street}
                             </h4>
                             <h4>

src/pages/ReservedArea/styles.module.scss

@@ -108,6 +108,7 @@
     h2,
     h4 {
         margin: 20px;
+        text-transform: capitalize;
         .btn {
             background-color: transparent;
             border: none;