Merge branch 'profile-responsive' of ntasicc/coffee into master

components/cards/order-card/OrderCard.jsx

-import { Divider, Paper, Typography } from '@mui/material';
+import { Card, Divider, Typography } from '@mui/material';
+import { Box } from '@mui/system';
 import PropType from 'prop-types';
 
 const OrderCard = ({ data }) => {
   return (
-    <Paper
+    <Card
       sx={{
-        p: 3,
         width: '100%',
-        mb: 2,
         backgroundColor: '#f2f2f2',
-        textAlign: { xs: 'center', md: 'left' },
-        ml: { sm: '10%' },
+        p: 2,
+        mb: 2,
       }}
-      elevation={3}
     >
-      <Typography sx={{ fontWeight: 600 }}>
-        Order placed on: {data.date}
-      </Typography>
-      <Divider />
-      <Typography sx={{ mt: 1 }}>By: {data.name}</Typography>
-      <Typography>Total: ${data.totalPrice.toFixed(2)}</Typography>
-    </Paper>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: { xs: 'center', md: 'flex-start' },
+        }}
+      >
+        <Typography sx={{ fontWeight: 600 }}>
+          Order placed on: {data.date}
+        </Typography>
+        <Divider />
+        <Typography sx={{ mt: 1 }}>By: {data.name}</Typography>
+        <Typography>Total: ${data.totalPrice.toFixed(2)}</Typography>
+      </Box>
+    </Card>
   );
 };
 

components/forms/shipping-details/ShippingDetailsForm.jsx

-import { Box, Button, Paper, TextField } from '@mui/material';
+import { Box, Button, Card, TextField } from '@mui/material';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/router';
 import PropType from 'prop-types';
   });
 
   return (
-    <Paper sx={{ p: 3, mt: 2, backgroundColor: '#f2f2f2' }} elevation={3}>
+    <Card sx={{ p: 3, backgroundColor: '#f2f2f2' }}>
       <Box
         sx={{
           width: '100%',
           </Button>
         </Box>
       </Box>
-    </Paper>
+    </Card>
   );
 };
 

components/layout/steps-title/StepTitle.jsx

           separator={<NavigateNextIcon fontSize="small" />}
           sx={{ ml: { xs: 2, md: 12 }, fontSize: 20 }}
         >
-          {breadcrumbsArray.map((entry, index) => {
-            return (
-              <Typography
-                sx={{ fontSize: { xs: '16px', md: '22px' } }}
-                key={index}
-                color={index === breadcrumbsArray.length - 1 ? 'red' : 'black'}
-              >
-                {entry}
-              </Typography>
-            );
-          })}
+          {breadcrumbsArray &&
+            breadcrumbsArray.map((entry, index) => {
+              return (
+                <Typography
+                  sx={{ fontSize: { xs: '16px', md: '22px' } }}
+                  key={index}
+                  color={
+                    index === breadcrumbsArray.length - 1 ? 'red' : 'black'
+                  }
+                >
+                  {entry}
+                </Typography>
+              );
+            })}
         </Breadcrumbs>
       </Grid>
     </>

components/profile-content/ProfileContent.jsx

-import { Alert, Grid, Snackbar, Typography } from '@mui/material';
+import { Alert, Snackbar, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useSession } from 'next-auth/react';
 import { useState } from 'react';
 import { useUserUpdate } from '../../store/user-context';
 import OrderCard from '../cards/order-card/OrderCard';
 import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm';
+import StepTitle from '../layout/steps-title/StepTitle';
 
 const ProfileContent = ({ orders }) => {
   const { data: session } = useSession();
     ));
 
   return (
-    <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
+    <Box sx={{ py: 10, height: '100%', width: '100%' }}>
+      <StepTitle title="Items in Your Cart" />
       <Snackbar
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         open={open}
           User profile updated!
         </Alert>
       </Snackbar>
-      <Grid item xs={12}>
-        <Typography
-          variant="h3"
-          sx={{ pl: 12, mt: 12, height: '100%', color: 'primary.main' }}
-        >
-          Welcome to your user account
-        </Typography>
-      </Grid>
-      <Grid item xs={12} md={8} sx={{ mt: 4, mb: { xs: -2, md: 0 } }}>
-        <Typography sx={{ pl: 12, fontSize: 20 }}>
-          Save details for later
-        </Typography>
-      </Grid>
-      <Grid item xs={4} sx={{ mt: 4, display: { xs: 'none', md: 'block' } }}>
-        <Typography sx={{ fontSize: 20, ml: 8 }}>Previous Orders</Typography>
-      </Grid>
-      <Grid
-        item
-        xs={12}
-        md={8}
-        sx={{ ml: { sm: 12, xs: 6 }, mr: { md: -12 }, pr: { sm: 12, xs: 6 } }}
-      >
-        <ShippingDetailsForm
-          submitHandler={updateUserHandler}
-          enableBtn={enableBtn}
-        ></ShippingDetailsForm>
-      </Grid>
-      <Grid
-        item
-        xs={12}
+
+      <Box
         sx={{
-          mt: 4,
-          display: { xs: 'block', md: 'none' },
-          textAlign: 'center',
+          display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
+          mr: { xs: 2, md: 12 },
+          ml: { xs: 2, md: 12 },
         }}
       >
-        <Typography sx={{ fontSize: 20, ml: 0 }}>Previous Orders</Typography>
-      </Grid>
-      <Grid item xs={12} md={4}>
         <Box
           sx={{
-            width: { sm: '60%', xs: '55%' },
+            width: { xs: '100%', md: '100%' },
+            mt: 2,
+            mr: { md: 2 },
+            mb: { xs: 6 },
+          }}
+        >
+          <Typography sx={{ fontSize: 20, mb: 3 }}>
+            Save details for later
+          </Typography>
+          <ShippingDetailsForm
+            submitHandler={updateUserHandler}
+            enableBtn={enableBtn}
+          ></ShippingDetailsForm>
+        </Box>
+
+        <Box
+          sx={{
             mt: 2,
-            ml: { xs: 12, md: 4 },
+            maxWidth: { sm: '100%', lg: '10%' },
+            minWidth: { md: '40%' },
           }}
         >
+          <Typography sx={{ fontSize: 20, mb: 3 }}>Previous Orders</Typography>
           {mapOrdersToDom()}
         </Box>
-      </Grid>
-    </Grid>
+      </Box>
+    </Box>
   );
 };
 

pages/products/[customId].js

         <Grid container spacing={2}>
           <Grid sx={{ display: 'flex' }} item md={6} sm={12}>
             <Image
-              src="/images/product-card-image.jpg"
+              src={data.product.image}
               alt="product"
               width={900}
-              height={600}
+              height={700}
             />
           </Grid>
           <Grid item xs={12} md={6}>