feat: fixed responsiveness

components/cards/cart-card/CartCard.jsx

@@ -25,12 +25,18 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
           justifyContent: { xs: 'center' },
         }}
       >
-        <Box sx={{ display: { xs: 'none', md: 'flex', width: '20%' } }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            mb: { xs: 2, md: 0 },
+          }}
+        >
           <Image
             src="/images/coffee-mug.svg"
             alt="profile"
-            width={500}
-            height={300}
+            width={200}
+            height={200}
           />
         </Box>
         <Box
@@ -44,11 +50,11 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
           <Typography
             align="center"
             sx={{
-              mb: { xs: 10, sm: 5, md: 0 },
+              mb: { xs: 5, sm: 5, md: 0 },
               mr: { md: 5 },
               width: '100%',
               fontWeight: 600,
-              fontSize: { xs: 16, sm: 20 },
+              fontSize: { xs: 20, sm: 20 },
             }}
           >
             {product?.name}
@@ -57,72 +63,81 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
         <Box
           sx={{
             display: 'flex',
-            flexDirection: 'column',
+            flexDirection: { xs: 'row', md: 'column' },
             justifyContent: 'center',
-            alignItems: 'center',
-            mb: { xs: 10, sm: 5, md: 0 },
+            alignItems: { xs: 'flex-end', md: 'center' },
+            mb: { xs: 5, sm: 5, md: 0 },
             mr: { md: 5 },
           }}
         >
-          <Typography
+          <Box
             sx={{
-              width: '100%',
-              textAlign: 'center',
-              height: 16,
-              fontSize: 14,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'flex-end',
+              mr: { xs: 2, md: 0 },
             }}
           >
-            Quantity
-          </Typography>
-          <ButtonGroup
-            size="small"
-            aria-label="small outlined button group"
-            sx={{
-              height: 35,
-              mt: 1,
-              backgroundColor: 'primary.main',
-              color: 'white',
-              border: 0,
-            }}
-          >
-            <Button
-              sx={{
-                color: 'white',
-                fontSize: 17,
-                width: 25,
-              }}
-              onClick={() => {
-                if (quantity > 0) {
-                  updateQuantity(product?.customID, quantity - 1);
-                  setQuantity((prevState) => prevState - 1);
-                }
-              }}
-            >
-              -
-            </Button>
-            <Button
+            <Typography
               sx={{
-                color: 'white',
-                fontSize: 15,
-                width: 25,
+                width: '100%',
+                textAlign: 'center',
+                height: 16,
+                fontSize: 14,
               }}
             >
-              {quantity}
-            </Button>
-            <Button
+              Quantity
+            </Typography>
+            <ButtonGroup
+              size="small"
+              aria-label="small outlined button group"
               sx={{
+                height: 35,
+                mt: 1,
+                backgroundColor: 'primary.main',
                 color: 'white',
-                fontSize: 17,
-                width: 25,
-              }}
-              onClick={() => {
-                updateQuantity(product?.customID, quantity + 1);
-                setQuantity((prevState) => prevState + 1);
+                border: 0,
               }}
             >
-              +
-            </Button>
-          </ButtonGroup>
+              <Button
+                sx={{
+                  color: 'white',
+                  fontSize: 17,
+                  width: 25,
+                }}
+                onClick={() => {
+                  if (quantity > 0) {
+                    updateQuantity(product?.customID, quantity - 1);
+                    setQuantity((prevState) => prevState - 1);
+                  }
+                }}
+              >
+                -
+              </Button>
+              <Button
+                sx={{
+                  color: 'white',
+                  fontSize: 15,
+                  width: 25,
+                }}
+              >
+                {quantity}
+              </Button>
+              <Button
+                sx={{
+                  color: 'white',
+                  fontSize: 17,
+                  width: 25,
+                }}
+                onClick={() => {
+                  updateQuantity(product?.customID, quantity + 1);
+                  setQuantity((prevState) => prevState + 1);
+                }}
+              >
+                +
+              </Button>
+            </ButtonGroup>
+          </Box>
           <Button
             disableRipple
             sx={{

components/cards/order-summary-card/OrderSummaryCard.jsx

@@ -32,7 +32,18 @@ const OrderSummaryCard = ({ data }) => {
       <Divider />
       <Box sx={{ textAlign: 'center', mt: 4, width: '100%' }}>
         <Button
+          disableRipple
           sx={{
+            '&.Mui-disabled': {
+              backgroundColor: '#0066ff',
+              color: '#fff',
+              opacity: '0.6',
+            },
+            '&:hover': {
+              backgroundColor: '#0066ff',
+              color: 'white',
+              boxShadow: 'none',
+            },
             backgroundColor: '#0066ff',
             color: 'white',
             textTransform: 'none',

components/cart-content/CartContent.jsx

@@ -32,12 +32,12 @@ const CartContent = () => {
       return (
         <Typography
           sx={{
-            mr: { sm: 10, lg: 1 },
-            pl: 12,
+            mr: { lg: 1 },
             mt: 6,
             height: '100%',
             textAlign: 'center',
-            fontSize: 45,
+            fontSize: { xs: 36, md: 45 },
+            mb: { md: 5 },
           }}
         >
           Your cart is currently empty
@@ -52,12 +52,12 @@ const CartContent = () => {
       <Box
         sx={{
           display: 'flex',
-          flexDirection: { xs: 'column', lg: 'row' },
+          flexDirection: { xs: 'column', md: 'row' },
           mr: { xs: 2, md: 12 },
           ml: { xs: 2, md: 12 },
         }}
       >
-        <Box sx={{ mt: 2, mr: { lg: 2, minWidth: '65%' } }}>
+        <Box sx={{ mt: 2, mr: { md: 2, minWidth: '65%' }, mb: { xs: 6 } }}>
           {mapProductsToDom()}
         </Box>
 

components/features/Features.jsx

@@ -1,4 +1,4 @@
-import { Container, Typography } from '@mui/material';
+import { Container, Divider, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import Image from 'next/image';
 import FeatureItem from './FeatureItem';
@@ -23,7 +23,6 @@ const Features = () => {
         <Container
           sx={{
             width: '100%',
-            height: 140,
           }}
         >
           <Typography
@@ -42,17 +41,25 @@ const Features = () => {
           sx={{
             width: '100%',
             textAlign: 'center',
-            height: 60,
           }}
         >
-          <Image src="/images/line.svg" alt="profile" width={150} height={50} />
-          <Image
-            src="/images/coffee-beans-icon.svg"
-            alt="profile"
-            width={100}
-            height={50}
-          />
-          <Image src="/images/line.svg" alt="profile" width={150} height={50} />
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Divider sx={{ width: { xs: '100px', sm: '200px' }, mr: 4 }} />
+
+            <Image
+              src="/images/coffee-beans-icon.svg"
+              alt="profile"
+              width={50}
+              height={50}
+            />
+            <Divider sx={{ width: { xs: '100px', sm: '200px' }, ml: 4 }} />
+          </Box>
         </Container>
         <Box
           sx={{

components/layout/navbar/MainNav.jsx

@@ -88,6 +88,7 @@ export default function MainNav() {
 
         {/* The outside of the drawer */}
         <MobileNav
+          totalQuantity={totalQuantity}
           session={session}
           signOutHandler={signOutHandler}
           toggleDrawer={toggleDrawer}

components/layout/navbar/MobileNav.jsx

@@ -8,11 +8,17 @@ import { CART_PAGE, PROFILE_PAGE } from '../../../constants/pages';
 import { NavItemMobile } from './NavItem';
 import { items } from './navItems';
 
-const MobileNav = ({ toggleDrawer, session, signOutHandler, open }) => {
+const MobileNav = ({
+  toggleDrawer,
+  session,
+  signOutHandler,
+  open,
+  totalQuantity,
+}) => {
   return (
     <Drawer
       PaperProps={{
-        sx: { width: '40%' },
+        sx: { width: { xs: '60%', sm: '50%' } },
       }}
       anchor="left"
       open={open}
@@ -49,7 +55,7 @@ const MobileNav = ({ toggleDrawer, session, signOutHandler, open }) => {
           <>
             <Box display="flex" flexDirection="column" sx={{ ml: 1 }}>
               <NavItemMobile
-                icon={<AccountCircleIcon />}
+                icon={<AccountCircleIcon sx={{ color: '#664c47' }} />}
                 toggleDrawer={toggleDrawer}
                 name="Profile"
                 url={PROFILE_PAGE}
@@ -72,7 +78,8 @@ const MobileNav = ({ toggleDrawer, session, signOutHandler, open }) => {
 
           <Divider sx={{}} />
           <NavItemMobile
-            icon={<ShoppingCartIcon />}
+            totalQuantity={totalQuantity}
+            icon={<ShoppingCartIcon sx={{ color: '#664c47' }} />}
             toggleDrawer={toggleDrawer}
             name="Cart"
             url={CART_PAGE}

components/layout/navbar/NavItem.jsx

@@ -1,7 +1,13 @@
 import { Box, ListItemButton, ListItemText, Typography } from '@mui/material';
 import Link from 'next/link';
 
-export const NavItemMobile = ({ toggleDrawer, icon, name, url }) => {
+export const NavItemMobile = ({
+  toggleDrawer,
+  icon,
+  name,
+  url,
+  totalQuantity,
+}) => {
   return (
     <ListItemButton>
       <Link href={url}>
@@ -9,13 +15,31 @@ export const NavItemMobile = ({ toggleDrawer, icon, name, url }) => {
           onClick={toggleDrawer(false)}
           primary={
             <Box sx={{ display: 'flex' }}>
-              <Box sx={{ mt: 0.4, mr: 2 }}>{icon}</Box>
+              <Box sx={{ mt: 0.4, mr: 4 }}>{icon}</Box>
               <Typography
                 sx={{ fontSize: '22px' }}
                 style={{ color: 'primary.main' }}
               >
                 {name}
               </Typography>
+              {name === 'Cart' && totalQuantity !== 0 && (
+                <Box
+                  sx={{
+                    color: 'white',
+                    width: 20,
+                    height: 20,
+                    borderRadius: 20,
+                    textAlign: 'center',
+                    ml: 2.6,
+                    mt: '-7px',
+                    fontSize: 15,
+                    position: 'absolute',
+                    backgroundColor: 'primary.main',
+                  }}
+                >
+                  {totalQuantity}
+                </Box>
+              )}
             </Box>
           }
         />

components/layout/navbar/navItems.js

@@ -12,18 +12,18 @@ export const items = [
     id: 1,
     name: 'Home',
     url: BASE_PAGE,
-    icon: <HomeIcon></HomeIcon>,
+    icon: <HomeIcon sx={{ color: '#664c47' }}></HomeIcon>,
   },
   {
     id: 2,
     name: 'Store',
     url: PRODUCTS_PAGE,
-    icon: <LocalMallIcon></LocalMallIcon>,
+    icon: <LocalMallIcon sx={{ color: '#664c47' }}></LocalMallIcon>,
   },
   {
     id: 3,
     name: 'Contact',
     url: CONTACT_PAGE,
-    icon: <ContactSupportIcon></ContactSupportIcon>,
+    icon: <ContactSupportIcon sx={{ color: '#664c47' }}></ContactSupportIcon>,
   },
 ];

components/product-card/ProductCard.jsx

@@ -54,7 +54,7 @@ const ProductCard = ({ product }) => {
           {product.name}
         </Typography>
         <Typography
-          sx={{ height: '200px' }}
+          sx={{ height: { xs: '200px', sm: '250px', md: '200px' } }}
           align="center"
           fontSize="18px"
           m={2}

components/products/featured-product/ProductInfo.jsx

@@ -57,10 +57,10 @@ const ProductInfo = ({ data, bColor, addProductToCart, inCart }) => {
         sx={{
           width: '100%',
           display: 'flex',
-          mt: 4,
-          flexDirection: { xs: 'column', md: 'row' },
+          mt: 6,
+          flexDirection: { md: 'row' },
           alignItems: { xs: 'center' },
-          justifyContent: { md: 'flex-start' },
+          justifyContent: { xs: 'center', md: 'flex-start' },
         }}
       >
         <ButtonGroup
@@ -77,6 +77,9 @@ const ProductInfo = ({ data, bColor, addProductToCart, inCart }) => {
           <Button
             disableRipple
             sx={{
+              '&.Mui-disabled': {
+                color: 'rgba(255, 255, 255, 0.6)',
+              },
               color: 'white',
               fontSize: 20,
               width: 50,
@@ -90,6 +93,9 @@ const ProductInfo = ({ data, bColor, addProductToCart, inCart }) => {
           <Button
             disableRipple
             sx={{
+              '&.Mui-disabled': {
+                color: 'rgba(255, 255, 255, 0.6)',
+              },
               color: 'white',
               fontSize: 17,
               width: 50,
@@ -100,6 +106,9 @@ const ProductInfo = ({ data, bColor, addProductToCart, inCart }) => {
           <Button
             disableRipple
             sx={{
+              '&.Mui-disabled': {
+                color: 'rgba(255, 255, 255, 0.6)',
+              },
               color: 'white',
               fontSize: 20,
               width: 50,
@@ -114,8 +123,8 @@ const ProductInfo = ({ data, bColor, addProductToCart, inCart }) => {
         <Button
           disableRipple
           sx={{
-            mt: { xs: 2, md: 0 },
-            ml: { md: 2 },
+            mt: { md: 0 },
+            ml: { xs: 2 },
             backgroundColor: '#CBA213',
             height: 50,
             width: 150,

components/review-content/ReviewContent.jsx

@@ -14,6 +14,7 @@ let initialRender = true;
 const ReviewContent = () => {
   const { parseCheckoutValue, clearCheckout } = useCheckoutDataUpdate();
   const { clearCart } = useStoreUpdate();
+  // eslint-disable-next-line no-unused-vars
   const [orderData, setOrderData] = useState(parseCheckoutValue());
 
   const router = useRouter();
@@ -36,6 +37,7 @@ const ReviewContent = () => {
         });
       };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return (
     <Box sx={{ py: 10, height: '100%', width: '100%' }}>

hooks/useFetchProductData.js

@@ -4,6 +4,11 @@ import { getProductData } from '../requests/products/producDataRequest';
 export const useFetchSingleProduct = (customID) => {
   return useQuery(
     ['product', customID],
-    async () => await getProductData(customID)
+    async () => await getProductData(customID),
+    {
+      refetchOnWindowFocus: false,
+      staleTime: 60000,
+      cacheTime: 300000,
+    }
   );
 };

hooks/useInfiniteQuery.js

@@ -16,6 +16,9 @@ export const useInfiniteProducts = (category, filter) => {
           return pages.length + 1;
         }
       },
+      refetchOnWindowFocus: false,
+      staleTime: 60000,
+      cacheTime: 300000,
     }
   );
 };