sysadminix/rentalcalculator
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

RC-11: update components according to ui kit

Browse Source
This commit is contained in:
evgeniywas
2023-06-24 20:43:29 +01:00
parent dbc9bffec4
commit b78e7b159b
15 changed files with 76 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/main/authPages/forgot-password/ForgotPasswordPage.js
View File

@@ -43,7 +43,7 @@ function ForgotPasswordPage({ t }) {
<Paper
className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
sx={{ background: (theme) => theme.palette.background?.authPaper }}
sx={{ background: (theme) => theme.palette.background?.default }}
>
<div className="w-full mx-auto sm:mx-0">
<Typography className="text-4xl font-extrabold tracking-tight leading-tight">
@@ -81,7 +81,7 @@ function ForgotPasswordPage({ t }) {
)}
/>
<div className="flex justify-center w-full">
<div className="flex flex-col items-center justify-center gap-10 w-full">
<Button
variant="contained"
color="secondary"
@@ -93,11 +93,14 @@ function ForgotPasswordPage({ t }) {
>
{t('forgot_password_btn')}
</Button>
{errors.root?.message && (
<p className="text-l text-error-main">{errors.root?.message}</p>
)}
</div>
<Typography className="mt-32 font-medium" color="text.secondary">
<span>{t('return')}</span>
<Link className="ml-4 text-indigo-400 underline" to="/sign-in">
<Link className="ml-4 text-secondary-main underline" to="/sign-in">
{t('sign_in')}
</Link>
</Typography>

14
src/app/main/authPages/shared-components/LeftSideCanvas.js
View File

@@ -6,7 +6,7 @@ function LeftSideCanvas({ title, subtitle, text }) {
return (
<Box
className="h-full min-h-screen relative hidden md:flex flex-auto items-center justify-center p-64 lg:px-112 overflow-hidden max-w-[45vw] w-full"
sx={{ backgroundColor: 'primary.main' }}
sx={{ backgroundColor: 'common.layout' }}
>
<svg
className="absolute inset-0 pointer-events-none"
@@ -30,15 +30,17 @@ function LeftSideCanvas({ title, subtitle, text }) {
</svg>
<div className="z-10 relative w-full max-w-2xl">
{title && <div className="text-7xl font-bold leading-none text-gray-100">{title}</div>}
{title && <div className="text-7xl font-bold leading-none text-primary-light">{title}</div>}
{subtitle && (
<div className="mt-24 text-lg tracking-tight leading-6 text-gray-400">{subtitle}</div>
<div className="mt-24 text-lg tracking-tight leading-6 text-common-disabled">
{subtitle}
</div>
)}
<div className="flex items-center mt-32">
<AvatarGroup
sx={{
'& .MuiAvatar-root': {
borderColor: 'primary.main',
borderColor: 'common.layout',
},
}}
>
@@ -48,7 +50,9 @@ function LeftSideCanvas({ title, subtitle, text }) {
<Avatar src="assets/images/avatars/male-16.jpg" />
</AvatarGroup>
{text && <div className="ml-16 font-medium tracking-tight text-gray-400">{text}</div>}
{text && (
<div className="ml-16 font-medium tracking-tight text-common-disabled">{text}</div>
)}
</div>
</div>
</Box>

16
src/app/main/authPages/sign-in/SignInPage.js
View File

@@ -49,7 +49,7 @@ function SignInPage({ t }) {
<Paper
className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
sx={{ background: (theme) => theme.palette.background?.authPaper }}
sx={{ background: (theme) => theme.palette.background?.default }}
>
<div className="w-full mx-auto sm:mx-0">
<Typography className="text-4xl font-extrabold tracking-tight leading-tight">
@@ -57,7 +57,7 @@ function SignInPage({ t }) {
</Typography>
<div className="flex items-baseline mt-10 font-medium">
<Typography>{t('have_account')}</Typography>
<Link className="ml-4 text-indigo-400 underline" to="/sign-up">
<Link className="ml-4 text-secondary-main underline" to="/sign-up">
{t('sign_up')}
</Link>
</div>
@@ -126,7 +126,9 @@ function SignInPage({ t }) {
control={
<Checkbox
{...field}
sx={{ color: (theme) => theme.palette.border.light }}
sx={{
color: (theme) => theme.palette.common.disabled,
}}
/>
}
/>
@@ -134,12 +136,12 @@ function SignInPage({ t }) {
)}
/>
<Link className="text-indigo-400 underline font-medium" to="/forgot-password">
<Link className="text-secondary-main underline font-medium" to="/forgot-password">
{t('forgot_password')}
</Link>
</div>
<div className="flex justify-center w-full">
<div className="flex flex-col items-center justify-center gap-10 w-full">
<Button
variant="contained"
color="secondary"
@@ -151,7 +153,9 @@ function SignInPage({ t }) {
>
{t('sign_in_btn')}
</Button>
{errors.root && <p>{errors.root.message}</p>}
{errors.root?.message && (
<p className="text-l text-error-main">{errors.root?.message}</p>
)}
</div>
</form>
</div>

14
src/app/main/authPages/sign-up/SignUpPage.js
View File

@@ -61,7 +61,7 @@ function SignUpPage({ t }) {
<Paper
className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
sx={{ background: (theme) => theme.palette.background?.authPaper }}
sx={{ background: (theme) => theme.palette.background?.default }}
>
<div className="w-full mx-auto sm:mx-0">
<Typography className="text-4xl font-extrabold tracking-tight leading-tight">
@@ -69,7 +69,7 @@ function SignUpPage({ t }) {
</Typography>
<div className="flex items-baseline mt-10 font-medium">
<Typography>{t('have_account')}</Typography>
<Link className="ml-4 text-indigo-400 underline" to="/sign-in">
<Link className="ml-4 text-secondary-main underline" to="/sign-in">
{t('sign_in')}
</Link>
</div>
@@ -181,7 +181,10 @@ function SignUpPage({ t }) {
<FormControlLabel
label={t('accept_terms')}
control={
<Checkbox {...field} sx={{ color: (theme) => theme.palette.border.light }} />
<Checkbox
{...field}
sx={{ color: (theme) => theme.palette.common.disabled }}
/>
}
/>
<FormHelperText>{errors?.acceptTermsConditions?.message}</FormHelperText>
@@ -189,7 +192,7 @@ function SignUpPage({ t }) {
)}
/>
<div className="flex justify-center w-full">
<div className="flex flex-col items-center justify-center gap-10 w-full">
<Button
variant="contained"
color="secondary"
@@ -201,6 +204,9 @@ function SignUpPage({ t }) {
>
{t('sign_up_btn')}
</Button>
{errors.root?.message && (
<p className="text-l text-error-main">{errors.root?.message}</p>
)}
</div>
</form>
</div>

10
src/app/main/navigationPages/dashboard/Dashboard.js
View File

@@ -21,11 +21,11 @@ function DashboardPage(props) {
return (
<Root
header={
<div className="p-24">
<h4>{t('TITLE')}</h4>
</div>
}
// header={
// <div className="p-24">
// <h4>{t('TITLE')}</h4>
// </div>
// }
content={
<div className="p-24">
<h4>Content</h4>

10
src/app/main/navigationPages/favorites/Favorites.js
View File

@@ -21,11 +21,11 @@ function FavoritesPage(props) {
return (
<Root
header={
<div className="p-24">
<h4>{t('TITLE')}</h4>
</div>
}
// header={
// <div className="p-24">
// <h4>{t('TITLE')}</h4>
// </div>
// }
content={
<div className="p-24">
<h4>Content</h4>

10
src/app/main/navigationPages/history/History.js
View File

@@ -21,11 +21,11 @@ function HistoryPage(props) {
return (
<Root
header={
<div className="p-24">
<h4>{t('TITLE')}</h4>
</div>
}
// header={
// <div className="p-24">
// <h4>{t('TITLE')}</h4>
// </div>
// }
content={
<div className="p-24">
<h4>Content</h4>

10
src/app/main/navigationPages/profile/Profile.js
View File

@@ -21,11 +21,11 @@ function ProfilePage(props) {
return (
<Root
header={
<div className="p-24">
<h4>{t('TITLE')}</h4>
</div>
}
// header={
// <div className="p-24">
// <h4>{t('TITLE')}</h4>
// </div>
// }
content={
<div className="p-24">
<h4>Content</h4>

2
src/app/services/authService.js
View File

@@ -112,7 +112,7 @@ export default class AuthService extends FuseUtils.EventEmitter {
sendPasswordResetEmail = (email) => {
return new Promise((resolve, reject) => {
if (email) {
if (!email) {
reject(Error('Email is empty'));
}

27
src/app/theme-layouts/layout1/Layout1Config.js
View File

@@ -5,7 +5,6 @@ const config = {
containerWidth: 1570,
navbar: {
display: true,
style: 'style-1',
folded: true,
position: 'left',
},
@@ -55,32 +54,6 @@ const config = {
},
],
},
style: {
title: 'Style',
type: 'radio',
options: [
{
name: 'Slide (style-1)',
value: 'style-1',
},
{
name: 'Folded (style-2)',
value: 'style-2',
},
{
name: 'Tabbed (style-3)',
value: 'style-3',
},
{
name: 'Tabbed Dense (style-3-dense)',
value: 'style-3-dense',
},
],
},
folded: {
title: 'Folded (style-2, style-3)',
type: 'switch',
},
},
},
},

11
src/app/theme-layouts/layout1/components/NavbarWrapperLayout1.js
View File

@@ -3,9 +3,7 @@ import { memo } from 'react';
import { useSelector } from 'react-redux';
import { selectFuseCurrentLayoutConfig, selectNavbarTheme } from 'app/store/fuse/settingsSlice';
import { selectFuseNavbar } from 'app/store/fuse/navbarSlice';
import NavbarStyle1 from './navbar/style-1/NavbarStyle1';
import NavbarStyle2 from './navbar/style-2/NavbarStyle2';
import NavbarStyle3 from './navbar/style-3/NavbarStyle3';
import NavbarLayout1 from './navbar/NavbarLayout1';
import NavbarToggleFab from '../../shared-components/NavbarToggleFab';
function NavbarWrapperLayout1(props) {
@@ -17,12 +15,7 @@ function NavbarWrapperLayout1(props) {
return (
<>
<ThemeProvider theme={navbarTheme}>
<>
{config.navbar.style === 'style-1' && <NavbarStyle1 />}
{config.navbar.style === 'style-2' && <NavbarStyle2 />}
{config.navbar.style === 'style-3' && <NavbarStyle3 />}
{config.navbar.style === 'style-3-dense' && <NavbarStyle3 dense />}
</>
<NavbarLayout1 />
</ThemeProvider>
{config.navbar.display && !navbar.open && <NavbarToggleFab />}

10
src/app/theme-layouts/layout1/components/navbar/style-1/NavbarStyle1.js → src/app/theme-layouts/layout1/components/navbar/NavbarLayout1.js
View File

@@ -4,7 +4,7 @@ import SwipeableDrawer from '@mui/material/SwipeableDrawer';
import { useDispatch, useSelector } from 'react-redux';
import { navbarCloseMobile, selectFuseNavbar } from 'app/store/fuse/navbarSlice';
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
import NavbarStyle1Content from './NavbarStyle1Content';
import NavbarLayout1Content from './NavbarLayout1Content';
const navbarWidth = 280;
@@ -40,7 +40,7 @@ const StyledNavBarMobile = styled(SwipeableDrawer)(({ theme }) => ({
},
}));
function NavbarStyle1(props) {
function NavbarLayout1(props) {
const dispatch = useDispatch();
const config = useSelector(selectFuseCurrentLayoutConfig);
const navbar = useSelector(selectFuseNavbar);
@@ -53,7 +53,7 @@ function NavbarStyle1(props) {
open={navbar.open}
position={config.navbar.position}
>
<NavbarStyle1Content />
<NavbarLayout1Content />
</StyledNavBar>
</Hidden>
@@ -72,11 +72,11 @@ function NavbarStyle1(props) {
keepMounted: true, // Better open performance on mobile.
}}
>
<NavbarStyle1Content />
<NavbarLayout1Content />
</StyledNavBarMobile>
</Hidden>
</>
);
}
export default NavbarStyle1;
export default NavbarLayout1;

16
src/app/theme-layouts/layout1/components/navbar/style-1/NavbarStyle1Content.js → src/app/theme-layouts/layout1/components/navbar/NavbarLayout1Content.js
View File

@@ -2,10 +2,10 @@ import FuseScrollbars from '@fuse/core/FuseScrollbars';
import { styled } from '@mui/material/styles';
import clsx from 'clsx';
import { memo } from 'react';
import Logo from '../../../../shared-components/Logo';
import NavbarToggleButton from '../../../../shared-components/NavbarToggleButton';
import UserNavbarHeader from '../../../../shared-components/UserNavbarHeader';
import Navigation from '../../../../shared-components/Navigation';
import Logo from '../../../shared-components/Logo';
import NavbarToggleButton from '../../../shared-components/NavbarToggleButton';
import UserNavbarHeader from '../../../shared-components/UserNavbarHeader';
import Navigation from '../../../shared-components/Navigation';
const Root = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.background.default,
@@ -32,7 +32,7 @@ const StyledContent = styled(FuseScrollbars)(({ theme }) => ({
backgroundAttachment: 'local, scroll',
}));
function NavbarStyle1Content(props) {
function NavbarLayout1Content(props) {
return (
<Root className={clsx('flex flex-auto flex-col overflow-hidden h-full', props.className)}>
<div className="flex flex-row items-center shrink-0 h-48 md:h-72 px-20">
@@ -50,13 +50,9 @@ function NavbarStyle1Content(props) {
<UserNavbarHeader />
<Navigation layout="vertical" />
<div className="flex flex-0 items-center justify-center py-48 opacity-10">
<img className="w-full max-w-64" src="assets/images/logo/logo.svg" alt="footer logo" />
</div>
</StyledContent>
</Root>
);
}
export default memo(NavbarStyle1Content);
export default memo(NavbarLayout1Content);

2
src/app/theme-layouts/layout2/components/FooterLayout2.js
View File

@@ -7,7 +7,7 @@ function FooterLayout2() {
const { t } = useTranslation('layout2');
return (
<footer className="flex items-center justify-center w-full bg-gray-900">
<footer className="flex items-center justify-center w-full bg-common-layout">
<div className="flex gap-96 w-full max-w-screen-xl px-10 py-52">
<ul className="flex flex-col gap-16 mr-96">
<li>

10
src/app/theme-layouts/layout2/components/HeaderLayout2.js
View File

@@ -8,7 +8,7 @@ function HeaderLayout2(props) {
const { t } = useTranslation('layout2');
return (
<header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-white">
<header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-primary-light">
<div className="flex justify-between max-w-screen-xl w-full">
<Link to="/">
<img
@@ -17,10 +17,11 @@ function HeaderLayout2(props) {
alt={t('logo_alt')}
/>
</Link>
<nav className="flex grow justify-center gap-72 items-center">
{linksConfigLayout2.map((path) => (
<Link
className="text-lg leading-5 text-slate-800 no-underline"
className="text-lg leading-5 text-common-layout no-underline"
to={`/${path}`}
key={path}
>
@@ -28,13 +29,14 @@ function HeaderLayout2(props) {
</Link>
))}
</nav>
{props.isAuthenticated || (
<div className="flex gap-32 items-center">
<Link className="text-indigo-400" to="/sign-in">
<Link className="text-secondary-main" to="/sign-in">
{t('sign_in')}
</Link>
<Link
className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-white bg-indigo-400 rounded-2xl"
className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-primary-light bg-secondary-main rounded-2xl shadow hover:shadow-hover hover:shadow-secondary-main ease-in-out duration-300"
to="/sign-up"
>
<span>{t('sign_up')}</span>