style: flexible design

components/cards/cart-card/CartCard.jsx

@@ -14,15 +14,16 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
     <Paper
       sx={{
         p: 1,
-        width: { lg: '88%', xs: '80%' },
+        width: { lg: '88%', xs: '73%', md: '80%' },
         mb: 2,
         ml: 12,
         backgroundColor: '#f2f2f2',
         display: 'flex',
+        justifyContent: { xs: 'center', md: 'none' },
       }}
       elevation={3}
     >
-      <Box sx={{ width: '30%' }}>
+      <Box sx={{ width: '30%', display: { xs: 'none', md: 'block' } }}>
         <Image
           src="/images/coffee-mug.svg"
           alt="profile"
@@ -45,7 +46,8 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
             textAlign: 'center',
             height: 25,
             fontWeight: 600,
-            fontSize: 20,
+            ml: { xs: -1, sm: 0 },
+            fontSize: { xs: 16, sm: 20 },
           }}
         >
           {product?.name}
@@ -58,6 +60,7 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
           width: '20%',
           justifyContent: 'center',
           alignItems: 'center',
+          ml: { xs: 2, sm: 0 },
         }}
       >
         <Typography
@@ -140,7 +143,7 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
       </Box>
       <Box
         sx={{
-          ml: 3,
+          ml: { xs: 5, sm: 3 },
           display: 'flex',
           flexDirection: 'column',
           width: '20%',
@@ -153,7 +156,7 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
             width: '100%',
             textAlign: 'center',
             height: 25,
-            fontSize: 18,
+            fontSize: { xs: 15, md: 18 },
           }}
         >
           Price: ${product?.price}

components/cards/data-card/DataCard.jsx

@@ -7,14 +7,23 @@ const DataCard = ({ data, quantity }) => {
     <Paper
       sx={{
         p: 3,
-        width: '100%',
+        width: { lg: '100%', xs: '35%' },
         mb: 2,
+        ml: { lg: 0, xs: 6 },
         backgroundColor: '#f2f2f2',
         display: 'flex',
+        flex: { xs: [0, 0, '32%'], lg: 'none' },
       }}
       elevation={3}
     >
-      <Box sx={{ width: '30%', borderRadius: 4, overflow: 'hidden' }}>
+      <Box
+        sx={{
+          width: '30%',
+          borderRadius: 4,
+          overflow: 'hidden',
+          display: { xs: 'none', lg: 'block' },
+        }}
+      >
         <Image
           src="/images/coffee-mug.svg"
           alt="profile"
@@ -23,7 +32,12 @@ const DataCard = ({ data, quantity }) => {
         />
       </Box>
       <Box
-        sx={{ ml: 3, display: 'flex', flexDirection: 'column', width: '60%' }}
+        sx={{
+          ml: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          width: { lg: '60%', sx: '100%' },
+        }}
       >
         <Typography
           sx={{
@@ -31,14 +45,14 @@ const DataCard = ({ data, quantity }) => {
             textAlign: 'center',
             height: 25,
             fontWeight: 600,
-            fontSize: 20,
+            fontSize: { md: 20, xs: 16 },
           }}
         >
           {data.name} - x{quantity}
         </Typography>
         <Typography
           sx={{
-            mt: 3,
+            mt: { sm: 3, xs: 6 },
             fontSize: 14,
           }}
         >
@@ -46,7 +60,7 @@ const DataCard = ({ data, quantity }) => {
         </Typography>
         <Typography
           sx={{
-            mt: 3,
+            mt: { lg: 3, xs: 1 },
             textAlign: 'right',
             fontSize: 14,
           }}

components/checkout-content/CheckoutContent.jsx

@@ -52,15 +52,27 @@ const CheckoutContent = () => {
           order
         </Typography>
       </Grid>
-      <Grid item xs={8}>
+      <Grid item lg={8} xs={12}>
         <ShippingDetailsForm
           backBtn={true}
           isCheckout={true}
           submitHandler={submitHandler}
         ></ShippingDetailsForm>
       </Grid>
-      <Grid item xs={4}>
-        <Box sx={{ width: '80%', mt: 2 }}>{mapProductsToDom()}</Box>
+      <Grid item lg={4} xs={12}>
+        <Box
+          sx={{
+            width: '80%',
+            mt: 2,
+            height: '100%',
+            ml: { xs: 12, lg: 0 },
+            display: { lg: 'block', xs: 'flex' },
+            flexWrap: { xs: 'wrap', lg: 'none' },
+            justifyContent: { xs: 'center', lg: 'none' },
+          }}
+        >
+          {mapProductsToDom()}
+        </Box>
       </Grid>
     </Grid>
   );

components/forms/shipping-details/ShippingDetailsForm.jsx

@@ -1,6 +1,7 @@
 import { Box, Button, Paper, TextField } from '@mui/material';
 import { useFormik } from 'formik';
 import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/router';
 import PropType from 'prop-types';
 import { useState } from 'react';
 import { shippingDetailsSchema } from '../../../schemas/shippingDetailsSchema';
@@ -14,6 +15,7 @@ const ShippingDetailsForm = ({
 }) => {
   const [error] = useState({ hasError: false, errorMessage: '' });
   const { data: session } = useSession();
+  const router = useRouter();
 
   const formikSubmitHandler = async (values) => {
     submitHandler(values);
@@ -129,6 +131,9 @@ const ShippingDetailsForm = ({
                 color: 'white',
                 mr: 2,
               }}
+              onClick={() => {
+                router.push('/cart');
+              }}
             >
               Back to cart
             </Button>

components/layout/navbar/Navbar.jsx

@@ -41,7 +41,7 @@ const Navbar = () => {
             flexGrow: 1,
             maxWidth: '50%',
             height: 30,
-            display: { xs: 'none', md: 'flex' },
+            display: 'flex',
             px: 10,
           }}
         >
@@ -50,8 +50,9 @@ const Navbar = () => {
               textAlign="center"
               sx={{
                 mx: 'auto',
-                fontSize: 20,
+                fontSize: { md: 20, xs: 17 },
                 fontWeight: 500,
+                mr: { lg: 0, xs: 2 },
                 color: router.pathname === '/' ? 'white' : 'black',
                 textDecoration: 'none',
                 cursor: 'pointer',
@@ -66,8 +67,9 @@ const Navbar = () => {
               textAlign="center"
               sx={{
                 mx: 'auto',
-                fontSize: 20,
+                fontSize: { md: 20, xs: 17 },
                 fontWeight: 500,
+                mr: { lg: 0, xs: 2 },
                 color: router.pathname === '/' ? 'white' : 'black',
                 textDecoration: 'none',
                 cursor: 'pointer',
@@ -82,8 +84,9 @@ const Navbar = () => {
               textAlign="center"
               sx={{
                 mx: 'auto',
-                fontSize: 20,
+                fontSize: { md: 20, xs: 17 },
                 fontWeight: 500,
+                mr: { lg: 0, xs: 2 },
                 color: router.pathname === '/' ? 'white' : 'black',
                 textDecoration: 'none',
                 cursor: 'pointer',
@@ -98,8 +101,9 @@ const Navbar = () => {
               textAlign="center"
               sx={{
                 mx: 'auto',
-                fontSize: 20,
+                fontSize: { md: 20, xs: 17 },
                 fontWeight: 500,
+                mr: { lg: 0, xs: 2 },
                 color: router.pathname === '/' ? 'white' : 'black',
                 textDecoration: 'none',
                 cursor: 'pointer',
@@ -114,7 +118,7 @@ const Navbar = () => {
               textAlign="center"
               sx={{
                 mx: 'auto',
-                fontSize: 20,
+                fontSize: { md: 20, xs: 17 },
                 fontWeight: 500,
                 color: router.pathname === '/' ? 'white' : 'black',
                 textDecoration: 'none',
@@ -130,7 +134,7 @@ const Navbar = () => {
             flexGrow: 1,
             maxWidth: '50%',
             height: 30,
-            display: { xs: 'none', md: 'flex' },
+            display: 'flex',
             justifyContent: 'right',
             pt: 0.5,
             mr: 4,

components/shipping-content/ShippingContent.jsx

@@ -8,6 +8,7 @@ import {
   useCheckoutDataUpdate,
 } from '../../store/checkout-context';
 import { stripe } from '../../utils/helpers/stripe';
+//import DataCardS from '../cards/data-card-shipping/DataCardS';
 import DataCard from '../cards/data-card/DataCard';
 import StepTitle from '../layout/steps-title/StepTitle';
 import ButtonGroup from './shipping-btnGroup/ButtonGroup';
@@ -76,7 +77,7 @@ const ShippingContent = () => {
           order
         </Typography>
       </Grid>
-      <Grid item xs={8}>
+      <Grid item xs={12} lg={8}>
         <ShippingData
           email={checkoutStorage?.userInfo?.email}
           address={checkoutStorage?.userInfo?.address}
@@ -108,8 +109,20 @@ const ShippingContent = () => {
           handleBackToCart={handleBackToCart}
         />
       </Grid>
-      <Grid item xs={4}>
-        <Box sx={{ width: '80%', mt: 2 }}>{mapProductsToDom()}</Box>
+      <Grid item xs={12} lg={4}>
+        <Box
+          sx={{
+            width: '80%',
+            mt: 2,
+            height: '100%',
+            ml: { xs: 12, lg: 0 },
+            display: { lg: 'block', xs: 'flex' },
+            flexWrap: { xs: 'wrap', lg: 'none' },
+            justifyContent: { xs: 'center', lg: 'none' },
+          }}
+        >
+          {mapProductsToDom()}
+        </Box>
       </Grid>
       <ShippingModal
         open={open}

components/shipping-content/shipping-data/ShippingData.jsx

@@ -14,7 +14,7 @@ const ShippingData = ({ email, address, city, postcode, handleOpen }) => {
           mt: 2,
           ml: 12,
           mb: 2,
-          width: '90%',
+          width: { lg: '90%', xs: '80%' },
           borderRadius: 2,
           p: 1,
         }}
@@ -24,8 +24,7 @@ const ShippingData = ({ email, address, city, postcode, handleOpen }) => {
         <Button
           sx={{
             height: 35,
-
-            width: 125,
+            minWidth: { md: 125, xs: 90 },
             fontSize: 15,
             textTransform: 'none',
             backgroundColor: '#CBA213',
@@ -46,12 +45,18 @@ const ShippingData = ({ email, address, city, postcode, handleOpen }) => {
           alignItems: 'center',
           ml: 12,
           mb: 2,
-          width: '90%',
+          width: { lg: '90%', xs: '80%' },
           borderRadius: 2,
           p: 1,
         }}
       >
-        <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
+        <Typography
+          sx={{
+            fontSize: { md: 18, xs: 16 },
+            fontWeight: 600,
+            mr: { xs: 1, sm: 0 },
+          }}
+        >
           Shipping to
         </Typography>
         <Typography>
@@ -60,7 +65,7 @@ const ShippingData = ({ email, address, city, postcode, handleOpen }) => {
         <Button
           sx={{
             height: 35,
-            width: 125,
+            minWidth: { md: 125, xs: 90 },
             fontSize: 15,
             textTransform: 'none',
             backgroundColor: '#CBA213',