style: flex design and more

components/cards/order-card/OrderCard.jsx

 const OrderCard = ({ data }) => {
   return (
     <Paper
-      sx={{ p: 3, width: '100%', mb: 2, backgroundColor: '#f2f2f2' }}
+      sx={{
+        p: 3,
+        width: '100%',
+        mb: 2,
+        backgroundColor: '#f2f2f2',
+        textAlign: { xs: 'center', md: 'left' },
+        ml: { sm: '10%' },
+      }}
       elevation={3}
     >
       <Typography sx={{ fontWeight: 600 }}>
       </Typography>
       <Divider />
       <Typography sx={{ mt: 1 }}>By: {data.name}</Typography>
-      <Typography>Total: ${data.totalPrice}</Typography>
+      <Typography>Total: ${data.totalPrice.toFixed(2)}</Typography>
     </Paper>
   );
 };

components/forms/forgot-password/ForgotPasswordForm.jsx

             {t('forgotPass:SendBtn')}
           </Button>
           <Grid container justifyContent="center">
-            <Link href={LOGIN_PAGE}>{t('common:Back')}</Link>
+            <Link href={LOGIN_PAGE}>
+              <Typography sx={{ cursor: 'pointer' }}>
+                {t('common:Back')}
+              </Typography>
+            </Link>
           </Grid>
         </Box>
       </Box>

components/forms/login/LoginForm.jsx

               item
               xs={12}
               md={6}
-              sx={{ textAlign: { xs: 'center', md: 'left' } }}
+              sx={{ textAlign: { xs: 'center', md: 'left' }, mt: 1 }}
             >
               <Link href={FORGOT_PASSWORD_PAGE}>
-                {t('login:ForgotPassword')}
+                <Typography sx={{ cursor: 'pointer' }}>
+                  {t('login:ForgotPassword')}
+                </Typography>
               </Link>
             </Grid>
             <Grid
               item
               xs={12}
               md={6}
-              sx={{ textAlign: { xs: 'center', md: 'right' } }}
+              sx={{
+                textAlign: {
+                  xs: 'center',
+                  md: 'right',
+                },
+                mt: 1,
+              }}
             >
-              <Link href={REGISTER_PAGE}>{t('login:NoAccount')}</Link>
+              <Link href={REGISTER_PAGE}>
+                <Typography sx={{ cursor: 'pointer' }}>
+                  {t('login:NoAccount')}
+                </Typography>
+              </Link>
             </Grid>
           </Grid>
         </Box>

components/forms/register/RegisterForm.jsx

               item
               xs={12}
               md={6}
-              sx={{ textAlign: { xs: 'center', md: 'left' } }}
+              sx={{ textAlign: { xs: 'center', md: 'left' }, mt: 1 }}
             >
               <Link href={FORGOT_PASSWORD_PAGE}>
-                {t('register:ForgotPassword')}
+                <Typography sx={{ cursor: 'pointer' }}>
+                  {t('register:ForgotPassword')}
+                </Typography>
               </Link>
             </Grid>
             <Grid
               item
               xs={12}
               md={6}
-              sx={{ textAlign: { xs: 'center', md: 'right' } }}
+              sx={{ textAlign: { xs: 'center', md: 'right' }, mt: 1 }}
             >
-              <Link href={LOGIN_PAGE}>{t('register:HaveAccount')}</Link>
+              <Link href={LOGIN_PAGE}>
+                <Typography sx={{ cursor: 'pointer' }}>
+                  {t('register:HaveAccount')}
+                </Typography>
+              </Link>
             </Grid>
           </Grid>
         </Box>

components/layout/navbar/DesktopNav.jsx

           maxWidth: '50%',
           height: 30,
           display: 'flex',
-          justifyContent: 'space-between',
+          justifyContent: 'center',
         }}
       >
-        {items.map((item) => (
+        {items.map((item, i) => (
           <NavItemDesktop
             key={item.id}
             router={router}

components/layout/navbar/MobileNav.jsx

+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import CloseIcon from '@mui/icons-material/Close';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { Box, Button, Divider, Drawer, IconButton } from '@mui/material';
 import Image from 'next/image';
 import Link from 'next/link';
   return (
     <Drawer
       PaperProps={{
-        sx: { width: '50%' },
+        sx: { width: '40%' },
       }}
       anchor="left"
       open={open}
 
         {session?.user?._id && (
           <>
-            <Box
-              display="flex"
-              flexDirection="column"
-              justifyContent="center"
-              alignItems="center"
-            >
+            <Box display="flex" flexDirection="column" sx={{ ml: 1 }}>
               <NavItemMobile
+                icon={<AccountCircleIcon />}
                 toggleDrawer={toggleDrawer}
                 name="Profile"
                 url={PROFILE_PAGE}
           </>
         )}
 
-        <Box
-          sx={{ mb: 2 }}
-          display="flex"
-          flexDirection="column"
-          justifyContent="center"
-          alignItems="center"
-        >
+        <Box sx={{ mb: 2, ml: 1 }} display="flex" flexDirection="column">
           {items.map((item) => (
             <NavItemMobile
               key={item.id}
+              icon={item.icon}
               toggleDrawer={toggleDrawer}
               name={item.name}
               url={item.url}
             />
           ))}
 
+          <Divider sx={{}} />
           <NavItemMobile
+            icon={<ShoppingCartIcon />}
             toggleDrawer={toggleDrawer}
             name="Cart"
             url={CART_PAGE}

components/layout/navbar/NavItem.jsx

-import { ListItemButton, ListItemText, Typography } from '@mui/material';
+import { Box, ListItemButton, ListItemText, Typography } from '@mui/material';
 import Link from 'next/link';
 
-export const NavItemMobile = ({ toggleDrawer, name, url }) => {
+export const NavItemMobile = ({ toggleDrawer, icon, name, url }) => {
   return (
     <ListItemButton>
       <Link href={url}>
         <ListItemText
           onClick={toggleDrawer(false)}
           primary={
-            <Typography
-              sx={{ fontSize: '24px' }}
-              style={{ color: 'primary.main' }}
-            >
-              {name}
-            </Typography>
+            <Box sx={{ display: 'flex' }}>
+              <Box sx={{ mt: 0.4, mr: 2 }}>{icon}</Box>
+              <Typography
+                sx={{ fontSize: '22px' }}
+                style={{ color: 'primary.main' }}
+              >
+                {name}
+              </Typography>
+            </Box>
           }
         />
       </Link>
 
 export const NavItemDesktop = ({ url, router, name }) => {
   return (
-    <Link href={url}>
-      <Typography
-        textAlign="center"
-        sx={{
-          mx: 'auto',
-          fontSize: { md: 20, lg: 20 },
-          fontWeight: 500,
-          color: router.pathname === '/' ? 'white' : 'primary.main',
-          textDecoration: 'none',
-          cursor: 'pointer',
-        }}
-      >
-        {name}
-      </Typography>
-    </Link>
+    <Box sx={{ width: 150, mr: 3, ml: 3 }}>
+      <Link href={url}>
+        <Typography
+          textAlign="center"
+          sx={{
+            mx: 'auto',
+            width: '100%',
+            fontSize: { md: 24, lg: 24 },
+            mt: -1,
+            fontWeight: 500,
+            color: router.pathname === '/' ? 'white' : 'primary.main',
+            textDecoration: 'none',
+            cursor: 'pointer',
+          }}
+        >
+          {name}
+        </Typography>
+      </Link>
+    </Box>
   );
 };

components/layout/navbar/Navbar.jsx

-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import { signOut, useSession } from 'next-auth/react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import {
-  BASE_PAGE,
-  CART_PAGE,
-  CONTACT_PAGE,
-  PRODUCTS_PAGE,
-  PROFILE_PAGE,
-} from '../../../constants/pages';
-import { useStore } from '../../../store/cart-context';
-import { useUserUpdate } from '../../../store/user-context';
-
-const Navbar = () => {
-  const router = useRouter();
-  const { totalQuantity } = useStore();
-  const { data: session } = useSession();
-  const { clearUser } = useUserUpdate();
-
-  const signOutHandler = async () => {
-    const data = await signOut({ redirect: false, callbackUrl: '/' });
-    clearUser();
-    router.push(data.url);
-  };
-
-  return (
-    <AppBar
-      position="absolute"
-      sx={{
-        zIndex: 100,
-        top: 20,
-        width: '100%',
-        backgroundColor: 'transparent',
-        boxShadow: 'none',
-        height: 40,
-      }}
-    >
-      <Box sx={{ display: 'flex', width: '100%' }}>
-        <Box
-          sx={{
-            flexGrow: 1,
-            maxWidth: '50%',
-            height: 30,
-            display: 'flex',
-            px: 10,
-          }}
-        >
-          <Link key="home" href={BASE_PAGE}>
-            <Typography
-              textAlign="center"
-              sx={{
-                mx: 'auto',
-                fontSize: { md: 20, xs: 17 },
-                fontWeight: 500,
-                mr: { lg: 0, xs: 2 },
-                color: router.pathname === '/' ? 'white' : 'black',
-                textDecoration: 'none',
-                cursor: 'pointer',
-              }}
-            >
-              Home
-            </Typography>
-          </Link>
-
-          <Link key="menu" href={BASE_PAGE}>
-            <Typography
-              textAlign="center"
-              sx={{
-                mx: 'auto',
-                fontSize: { md: 20, xs: 17 },
-                fontWeight: 500,
-                mr: { lg: 0, xs: 2 },
-                color: router.pathname === '/' ? 'white' : 'black',
-                textDecoration: 'none',
-                cursor: 'pointer',
-              }}
-            >
-              Menu
-            </Typography>
-          </Link>
-
-          <Link key="about" href={BASE_PAGE}>
-            <Typography
-              textAlign="center"
-              sx={{
-                mx: 'auto',
-                fontSize: { md: 20, xs: 17 },
-                fontWeight: 500,
-                mr: { lg: 0, xs: 2 },
-                color: router.pathname === '/' ? 'white' : 'black',
-                textDecoration: 'none',
-                cursor: 'pointer',
-              }}
-            >
-              About
-            </Typography>
-          </Link>
-
-          <Link key="store" href={PRODUCTS_PAGE}>
-            <Typography
-              textAlign="center"
-              sx={{
-                mx: 'auto',
-                fontSize: { md: 20, xs: 17 },
-                fontWeight: 500,
-                mr: { lg: 0, xs: 2 },
-                color: router.pathname === '/' ? 'white' : 'black',
-                textDecoration: 'none',
-                cursor: 'pointer',
-              }}
-            >
-              Store
-            </Typography>
-          </Link>
-
-          <Link key="contact" href={CONTACT_PAGE}>
-            <Typography
-              textAlign="center"
-              sx={{
-                mx: 'auto',
-                fontSize: { md: 20, xs: 17 },
-                fontWeight: 500,
-                color: router.pathname === '/' ? 'white' : 'black',
-                textDecoration: 'none',
-                cursor: 'pointer',
-              }}
-            >
-              Contact
-            </Typography>
-          </Link>
-        </Box>
-        <Box
-          sx={{
-            flexGrow: 1,
-            maxWidth: '50%',
-            height: 30,
-            display: 'flex',
-            justifyContent: 'right',
-            pt: 0.5,
-            mr: 4,
-          }}
-        >
-          {session?.user?._id && (
-            <Box
-              sx={{
-                mx: 2,
-                mt: 0.1,
-                cursor: 'pointer',
-              }}
-              onClick={signOutHandler}
-            >
-              <Image
-                src="/images/logout.svg"
-                alt="profile"
-                width={18}
-                height={20}
-              />
-            </Box>
-          )}
-          <Box
-            sx={{
-              mx: 2,
-              cursor: 'pointer',
-            }}
-          >
-            <Link key="home" href={PROFILE_PAGE}>
-              <Image
-                src="/images/profile.svg"
-                alt="profile"
-                width={24}
-                height={24}
-              />
-            </Link>
-          </Box>
-          <Box
-            sx={{
-              mr: 6,
-              ml: 2,
-              cursor: 'pointer',
-            }}
-          >
-            <Link key="home" href={CART_PAGE}>
-              <Box>
-                <Box
-                  sx={{
-                    color: 'white',
-                    zIndex: 3,
-                    width: 20,
-                    height: 20,
-                    borderRadius: 20,
-                    textAlign: 'center',
-                    px: 0.5,
-                    ml: 2.2,
-                    mt: -1,
-                    fontSize: 17,
-                    position: 'absolute',
-                    backgroundColor: 'primary.main',
-                  }}
-                >
-                  {totalQuantity}
-                </Box>
-                <Image
-                  src="/images/cart.svg"
-                  alt="cart"
-                  width={24}
-                  height={24}
-                />
-              </Box>
-            </Link>
-          </Box>
-        </Box>
-      </Box>
-    </AppBar>
-  );
-};
-
-export default Navbar;

components/layout/navbar/Navbar.mock.js

-const base = {};
-
-export const mockNavbarProps = {
-  base,
-};

components/layout/navbar/Navbar.stories.jsx

-import Navbar from './Navbar';
-import { mockNavbarProps } from './Navbar.mock';
-
-const obj = {
-  title: 'layout/Navbar',
-  component: Navbar,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {},
-}; //eslint-disable-line
-
-export default obj;
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Navbar {...args} />;
-
-export const Base = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-
-Base.args = {
-  ...mockNavbarProps.base,
-};

components/layout/navbar/navItems.js

+import ContactSupportIcon from '@mui/icons-material/ContactSupport';
+import HomeIcon from '@mui/icons-material/Home';
+import LocalMallIcon from '@mui/icons-material/LocalMall';
 import {
   BASE_PAGE,
   CONTACT_PAGE,
     id: 1,
     name: 'Home',
     url: BASE_PAGE,
+    icon: <HomeIcon></HomeIcon>,
   },
   {
     id: 2,
-    name: 'Menu',
-    url: BASE_PAGE,
-  },
-  {
-    id: 3,
-    name: 'About',
-    url: BASE_PAGE,
-  },
-  {
-    id: 4,
     name: 'Store',
     url: PRODUCTS_PAGE,
+    icon: <LocalMallIcon></LocalMallIcon>,
   },
   {
-    id: 5,
+    id: 3,
     name: 'Contact',
     url: CONTACT_PAGE,
+    icon: <ContactSupportIcon></ContactSupportIcon>,
   },
 ];

components/profile-content/ProfileContent.jsx

           Welcome to your user account
         </Typography>
       </Grid>
-      <Grid item xs={8} sx={{ mt: 4 }}>
+      <Grid item xs={12} md={8} sx={{ mt: 4, mb: { xs: -2, md: 0 } }}>
         <Typography sx={{ pl: 12, fontSize: 20 }}>
-          Save details for later (user will be logged out)
+          Save details for later
         </Typography>
       </Grid>
-      <Grid item xs={4} sx={{ mt: 4 }}>
-        <Typography sx={{ fontSize: 20 }}>Previous Orders</Typography>
+      <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={8}>
+      <Grid item xs={12} md={8} sx={{ ml: { xs: -8, md: 0 } }}>
         <ShippingDetailsForm
           submitHandler={updateUserHandler}
           enableBtn={enableBtn}
         ></ShippingDetailsForm>
       </Grid>
-      <Grid item xs={4}>
-        <Box sx={{ width: '60%', mt: 2 }}>{mapOrdersToDom()}</Box>
+      <Grid
+        item
+        xs={12}
+        sx={{
+          mt: 4,
+          display: { xs: 'block', md: 'none' },
+          textAlign: 'center',
+        }}
+      >
+        <Typography sx={{ fontSize: 20, ml: 0 }}>Previous Orders</Typography>
+      </Grid>
+      <Grid item xs={12} md={4}>
+        <Box
+          sx={{
+            width: '60%',
+            mt: 2,
+            ml: { md: 4, xs: 12 },
+          }}
+        >
+          {mapOrdersToDom()}
+        </Box>
       </Grid>
     </Grid>
   );

package.json

     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/codemod": "^5.8.7",
-    "@mui/icons-material": "^5.8.4",
+    "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.9.2",
     "@react-google-maps/api": "^2.12.2",
     "@sendgrid/mail": "^7.7.0",

yarn.lock

   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
+  integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@~7.5.4":
   version "7.5.5"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz"
     jscodeshift-add-imports "^1.0.10"
     yargs "^17.5.1"
 
-"@mui/icons-material@^5.8.4":
-  version "5.8.4"
-  resolved "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.8.4.tgz"
-  integrity sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==
+"@mui/icons-material@^5.10.6":
+  version "5.10.6"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.10.6.tgz#a032395cfe7fe8e9a8edde2d27b9e3bd23e5b935"
+  integrity sha512-QwxdRmLA46S94B0hExPDx0td+A2unF+33bQ6Cs+lNpJKVsm1YeHwNdYXYcnpWeHeQQ07055OXl7IB2GKDd0MfA==
   dependencies:
-    "@babel/runtime" "^7.17.2"
+    "@babel/runtime" "^7.19.0"
 
 "@mui/material@^5.9.2":
   version "5.9.2"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz"
   integrity sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==
 
-
 "@sendgrid/client@^7.7.0":
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/@sendgrid/client/-/client-7.7.0.tgz#f8f67abd604205a0d0b1af091b61517ef465fdbf"
   dependencies:
     minimist "^1.2.6"
 
-mkdirp@^1.0.3, mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
-  dependencies:
-    yallist "^4.0.0"
-
-minizlib@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz"
-  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
-  dependencies:
-    minipass "^3.0.0"
-    yallist "^4.0.0"
-
-mixin-deep@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz"
-  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
-  dependencies:
-    for-in "^1.0.2"
-    is-extendable "^1.0.1"
-
-mkdirp@^0.5.1:
-  version "0.5.6"
-  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz"
-  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
-  dependencies:
-    minimist "^1.2.6"
-
 mkdirp@^1.0.3, mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"