From 425a9abe928b80dcafbdd185b7b9edd66aa4ce91 Mon Sep 17 00:00:00 2001 From: evgeniywas Date: Sun, 6 Aug 2023 15:28:50 +0100 Subject: [PATCH] RC-7: update auth pages and profile components --- src/@fuse/core/FuseLayout/FuseLayout.js | 18 +++--- .../forgot-password/ForgotPasswordPage.js | 21 +++++-- src/app/main/authPages/sign-in/SignInPage.js | 30 +++++----- src/app/main/authPages/sign-up/SignUpPage.js | 42 ++++++-------- .../main/navigationPages/profile/Profile.js | 55 ++++++++----------- src/app/main/shared-components/SearchInput.js | 55 +++++++++++++++++++ 6 files changed, 137 insertions(+), 84 deletions(-) create mode 100644 src/app/main/shared-components/SearchInput.js diff --git a/src/@fuse/core/FuseLayout/FuseLayout.js b/src/@fuse/core/FuseLayout/FuseLayout.js index ad418c7..7cf9842 100644 --- a/src/@fuse/core/FuseLayout/FuseLayout.js +++ b/src/@fuse/core/FuseLayout/FuseLayout.js @@ -52,15 +52,15 @@ const inputGlobalStyles = ( // textDecoration: 'none', // }, // }, - '[class*="MuiOutlinedInput-root"]': { - borderRadius: `${theme.spacing('10px')}!important`, - }, - '[class^="border"]': { - borderColor: theme.palette.divider, - }, - '[class*="border"]': { - borderColor: theme.palette.divider, - }, + // '[class*="MuiOutlinedInput-root"]': { + // borderRadius: `${theme.spacing('10px')}`, + // }, + // '[class^="border"]': { + // borderColor: theme.palette.divider, + // }, + // '[class*="border"]': { + // borderColor: theme.palette.divider, + // }, '[class*="divide-"] > :not([hidden]) ~ :not([hidden])': { borderColor: theme.palette.divider, }, diff --git a/src/app/main/authPages/forgot-password/ForgotPasswordPage.js b/src/app/main/authPages/forgot-password/ForgotPasswordPage.js index c9d626c..42ca7a9 100644 --- a/src/app/main/authPages/forgot-password/ForgotPasswordPage.js +++ b/src/app/main/authPages/forgot-password/ForgotPasswordPage.js @@ -4,6 +4,7 @@ import Button from '@mui/material/Button'; import Paper from '@mui/material/Paper'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; +import { forwardRef } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { withTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; @@ -15,6 +16,19 @@ const defaultValues = { email: '', }; +const StyledTextField = forwardRef((props, ref) => ( + theme.palette.background.paper, + borderRadius: '10px', + }, + }} + {...props} + ref={ref} + /> +)); + function ForgotPasswordPage({ t }) { const schema = yup.object().shape({ email: yup.string().email(t('email_error')).required(t('email_error')), @@ -63,7 +77,7 @@ function ForgotPasswordPage({ t }) { name="email" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> diff --git a/src/app/main/authPages/sign-in/SignInPage.js b/src/app/main/authPages/sign-in/SignInPage.js index a08ad3d..592b0ff 100644 --- a/src/app/main/authPages/sign-in/SignInPage.js +++ b/src/app/main/authPages/sign-in/SignInPage.js @@ -7,6 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import Paper from '@mui/material/Paper'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; +import { forwardRef } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { withTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; @@ -20,6 +21,19 @@ const defaultValues = { remember: false, }; +const StyledTextField = forwardRef((props, ref) => ( + theme.palette.background.paper, + borderRadius: '10px', + }, + }} + {...props} + ref={ref} + /> +)); + function SignInPage({ t }) { const schema = yup.object().shape({ email: yup.string().email(t('email_error')).required(t('email_error')), @@ -72,7 +86,7 @@ function SignInPage({ t }) { name="email" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> @@ -96,7 +105,7 @@ function SignInPage({ t }) { name="password" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> @@ -146,7 +150,7 @@ function SignInPage({ t }) { variant="contained" color="secondary" className="w-[220px] mt-32 text-base uppercase rounded-xl" - aria-label="Sign in" + aria-label={t('sign_in_btn')} disabled={_.isEmpty(dirtyFields) || !isValid} type="submit" size="large" diff --git a/src/app/main/authPages/sign-up/SignUpPage.js b/src/app/main/authPages/sign-up/SignUpPage.js index 0ee1f36..8517d4d 100644 --- a/src/app/main/authPages/sign-up/SignUpPage.js +++ b/src/app/main/authPages/sign-up/SignUpPage.js @@ -4,6 +4,7 @@ import Button from '@mui/material/Button'; import Paper from '@mui/material/Paper'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; +import { forwardRef } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { withTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; @@ -18,6 +19,19 @@ const defaultValues = { passwordConfirm: '', }; +const StyledTextField = forwardRef((props, ref) => ( + theme.palette.background.paper, + borderRadius: '10px', + }, + }} + {...props} + ref={ref} + /> +)); + function SignUpPage({ t }) { const schema = yup.object().shape({ name: yup.string().required(t('name_error')), @@ -78,7 +92,7 @@ function SignUpPage({ t }) { name="name" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> @@ -102,7 +111,7 @@ function SignUpPage({ t }) { name="email" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> @@ -125,7 +129,7 @@ function SignUpPage({ t }) { name="password" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> @@ -148,7 +147,7 @@ function SignUpPage({ t }) { name="passwordConfirm" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> diff --git a/src/app/main/navigationPages/profile/Profile.js b/src/app/main/navigationPages/profile/Profile.js index 2ec9f32..01b206e 100644 --- a/src/app/main/navigationPages/profile/Profile.js +++ b/src/app/main/navigationPages/profile/Profile.js @@ -12,6 +12,7 @@ import { withTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import * as yup from 'yup'; import { toBase64 } from 'src/app/utils'; +import { forwardRef } from 'react'; const MAX_PICTURE_SIZE = 5000000; const AVAILABLE_MEDIA_TYPES = ['image/png', 'image/jpeg']; @@ -26,6 +27,19 @@ const Root = styled(FusePageSimple)(({ theme }) => ({ '& .FusePageSimple-sidebarContent': {}, })); +const StyledTextField = forwardRef((props, ref) => ( + theme.palette.background.paper, + borderRadius: '10px', + }, + }} + {...props} + ref={ref} + /> +)); + function ProfilePage({ t }) { const dispatch = useDispatch(); const user = useSelector(selectUser); @@ -193,7 +207,7 @@ function ProfilePage({ t }) { name="firstName" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> @@ -215,7 +224,7 @@ function ProfilePage({ t }) { name="lastName" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> @@ -237,7 +241,7 @@ function ProfilePage({ t }) { name="displayName" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> @@ -260,7 +259,7 @@ function ProfilePage({ t }) { name="email" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> @@ -283,7 +277,7 @@ function ProfilePage({ t }) { name="mobileNumber" control={control} render={({ field }) => ( - theme.palette.background.paper, - }, - }} /> )} /> @@ -318,8 +307,9 @@ function ProfilePage({ t }) { fullWidth InputProps={{ sx: { - background: (theme) => theme.palette.background.paper, padding: 0, + background: (theme) => theme.palette.background.paper, + borderRadius: '10px', }, }} // eslint-disable-next-line react/jsx-no-duplicate-props @@ -349,8 +339,9 @@ function ProfilePage({ t }) { fullWidth InputProps={{ sx: { - background: (theme) => theme.palette.background.paper, padding: 0, + background: (theme) => theme.palette.background.paper, + borderRadius: '10px', }, }} // eslint-disable-next-line react/jsx-no-duplicate-props diff --git a/src/app/main/shared-components/SearchInput.js b/src/app/main/shared-components/SearchInput.js new file mode 100644 index 0000000..66d4f3b --- /dev/null +++ b/src/app/main/shared-components/SearchInput.js @@ -0,0 +1,55 @@ +import { forwardRef, memo, useCallback } from 'react'; +import TextField from '@mui/material/TextField'; +import Button from '@mui/material/Button'; +import _ from '@lodash'; + +const StyledTextField = forwardRef((props, ref) => ( + theme.palette.background.paper, + borderRadius: '15px', + borderColor: (theme) => theme.palette.secondary.light, + borderWidth: '1px', + boxShadow: '1px 1px 4px 0px rgba(0, 0, 0, 0.25)', + }, + }} + {...props} + ref={ref} + /> +)); + +function SearchInput({ mode, placeholder, btnText, query, onType, onSearch }) { + const isSimpleMode = mode === 'simple'; + + const debouncedOnType = useCallback(_.debounce(onType, 250), [onType]); + + return ( +
+ + + {isSimpleMode && ( + + )} + + ); +} + +export default memo(SearchInput);