ntasicc
/
coffee
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

style: flex design and more

design-fix
ntasicc 3 лет назад
Родитель
bbe65a9e03
Сommit
d3f07b643e
14 измененных файлов: 127 добавлений и 352 удалений
Разделённый вид Показать статистику Diff
  1. 9
    2
      components/cards/order-card/OrderCard.jsx
  2. 5
    1
      components/forms/forgot-password/ForgotPasswordForm.jsx
  3. 16
    4
      components/forms/login/LoginForm.jsx
  4. 10
    4
      components/forms/register/RegisterForm.jsx
  5. 2
    2
      components/layout/navbar/DesktopNav.jsx
  6. 9
    14
      components/layout/navbar/MobileNav.jsx
  7. 30
    23
      components/layout/navbar/NavItem.jsx
  8. 0
    221
      components/layout/navbar/Navbar.jsx
  9. 0
    5
      components/layout/navbar/Navbar.mock.js
  10. 0
    20
      components/layout/navbar/Navbar.stories.jsx
  11. 7
    11
      components/layout/navbar/navItems.js
  12. 26
    7
      components/profile-content/ProfileContent.jsx
  13. 1
    1
      package.json
  14. 12
    37
      yarn.lock

+ 9
- 2
components/cards/order-card/OrderCard.jsx Просмотреть файл

@@ -4,7 +4,14 @@ import PropType from 'prop-types';
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 }}>
@@ -12,7 +19,7 @@ const OrderCard = ({ data }) => {
</Typography>
<Divider />
<Typography sx={{ mt: 1 }}>By: {data.name}</Typography>
<Typography>Total: ${data.totalPrice}</Typography>
<Typography>Total: ${data.totalPrice.toFixed(2)}</Typography>
</Paper>
);
};

+ 5
- 1
components/forms/forgot-password/ForgotPasswordForm.jsx Просмотреть файл

@@ -68,7 +68,11 @@ const ForgotPasswordForm = () => {
{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>

+ 16
- 4
components/forms/login/LoginForm.jsx Просмотреть файл

@@ -119,19 +119,31 @@ const LoginForm = () => {
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>

+ 10
- 4
components/forms/register/RegisterForm.jsx Просмотреть файл

@@ -231,19 +231,25 @@ const RegisterForm = () => {
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>

+ 2
- 2
components/layout/navbar/DesktopNav.jsx Просмотреть файл

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

+ 9
- 14
components/layout/navbar/MobileNav.jsx Просмотреть файл

@@ -1,4 +1,6 @@
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';
@@ -10,7 +12,7 @@ const MobileNav = ({ toggleDrawer, session, signOutHandler, open }) => {
return (
<Drawer
PaperProps={{
sx: { width: '50%' },
sx: { width: '40%' },
}}
anchor="left"
open={open}
@@ -45,13 +47,9 @@ const MobileNav = ({ toggleDrawer, session, signOutHandler, 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}
@@ -61,23 +59,20 @@ const MobileNav = ({ toggleDrawer, session, signOutHandler, open }) => {
</>
)}

<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}

+ 30
- 23
components/layout/navbar/NavItem.jsx Просмотреть файл

@@ -1,19 +1,22 @@
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>
@@ -23,20 +26,24 @@ export const NavItemMobile = ({ toggleDrawer, name, url }) => {

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>
);
};

+ 0
- 221
components/layout/navbar/Navbar.jsx Просмотреть файл

@@ -1,221 +0,0 @@
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;

+ 0
- 5
components/layout/navbar/Navbar.mock.js Просмотреть файл

@@ -1,5 +0,0 @@
const base = {};

export const mockNavbarProps = {
base,
};

+ 0
- 20
components/layout/navbar/Navbar.stories.jsx Просмотреть файл

@@ -1,20 +0,0 @@
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,
};

+ 7
- 11
components/layout/navbar/navItems.js Просмотреть файл

@@ -1,3 +1,6 @@
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,
@@ -9,25 +12,18 @@ export const items = [
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>,
},
];

+ 26
- 7
components/profile-content/ProfileContent.jsx Просмотреть файл

@@ -70,22 +70,41 @@ const ProfileContent = ({ orders }) => {
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>
);

+ 1
- 1
package.json Просмотреть файл

@@ -16,7 +16,7 @@
"@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",

+ 12
- 37
yarn.lock Просмотреть файл

@@ -1080,6 +1080,13 @@
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"
@@ -1693,12 +1700,12 @@
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"
@@ -1937,7 +1944,6 @@
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"
@@ -7929,37 +7935,6 @@ mkdirp@^0.5.1:
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"

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить