From 375d5a37d26f4f14a33cd14fc9bca912c5210a80 Mon Sep 17 00:00:00 2001
From: TTPL-RT-52 <shreyas1434shinde@gmail.com>
Date: Fri, 31 May 2024 19:15:39 +0530
Subject: [PATCH 1/2] Issue #PS-652 fix:Login button position should be dynamic

---
 src/assets/images/account.svg  |   3 +
 src/assets/images/menuIcon.svg |   3 +
 src/components/Header.tsx      |  28 ++-
 src/pages/dashboard.tsx        |   2 +
 src/pages/login.tsx            | 325 +++++++++++++++++----------------
 5 files changed, 191 insertions(+), 170 deletions(-)
 create mode 100644 src/assets/images/account.svg
 create mode 100644 src/assets/images/menuIcon.svg

diff --git a/src/assets/images/account.svg b/src/assets/images/account.svg
new file mode 100644
index 00000000..cf0c8cbc
--- /dev/null
+++ b/src/assets/images/account.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM16.36 14.83C14.93 13.09 11.46 12.5 10 12.5C8.54 12.5 5.07 13.09 3.64 14.83C2.62 13.49 2 11.82 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 11.82 17.38 13.49 16.36 14.83ZM6.5 7.5C6.5 5.56 8.06 4 10 4C11.94 4 13.5 5.56 13.5 7.5C13.5 9.44 11.94 11 10 11C8.06 11 6.5 9.44 6.5 7.5Z" fill="#4D4639"/>
+</svg>
diff --git a/src/assets/images/menuIcon.svg b/src/assets/images/menuIcon.svg
new file mode 100644
index 00000000..46ac3798
--- /dev/null
+++ b/src/assets/images/menuIcon.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2V0H18V2H0ZM0 7H18V5H0V7ZM0 12H18V10H0V12Z" fill="#1F1B13"/>
+</svg>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 1757dbb7..56304d1b 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -13,8 +13,10 @@ import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
 import MenuIcon from '@mui/icons-material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
+import accountIcon from './../assets/images/account.svg';
 import dynamic from 'next/dynamic';
 import logoLight from '../../public/images/logo-light.png';
+import menuIcon from '../assets/images/menuIcon.svg';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 
@@ -120,11 +122,11 @@ const Header: React.FC = () => {
       >
         <Stack
           width={'100%'}
-          padding={'8px 0'}
+          // padding={'8px 0'}
           direction="row"
           justifyContent={'space-between'}
           alignItems={'center'}
-          height="auto"
+          height="64px"
           boxShadow="0px 1px 3px 0px #0000004D"
         >
           <Box
@@ -133,11 +135,12 @@ const Header: React.FC = () => {
             sx={{ cursor: 'pointer' }}
             paddingLeft={'1rem'}
           >
-            <MenuIcon
-              style={{
-                fill: theme.palette.warning['A200'],
-              }}
-              className="menuSvg"
+            <Image
+              height={12}
+              width={18}
+              src={menuIcon}
+              alt="logo"
+              style={{ cursor: 'pointer' }}
             />
           </Box>
 
@@ -162,11 +165,18 @@ const Header: React.FC = () => {
             flexDirection={'column'}
             mt={'0.5rem'}
           >
-            <AccountCircleIcon
+            <Image
+              height={20}
+              width={20}
+              src={accountIcon}
+              alt="logo"
+              style={{ cursor: 'pointer' }}
+            />
+            {/* <AccountCircleIcon
               fontSize="large"
               className="accIcon"
               style={{ fill: theme.palette.warning['A200'] }}
-            />
+            /> */}
           </Box>
           <div style={{ position: 'absolute' }}>
             <StyledMenu
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index 8a1b0cce..cf35fd30 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -35,6 +35,7 @@ import { isAfter, startOfDay } from 'date-fns';
 
 import ArrowForwardSharpIcon from '@mui/icons-material/ArrowForwardSharp';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import CustomRangeModal from '@/components/CustomRangeModal';
 import Divider from '@mui/material/Divider';
 import Header from '../components/Header';
 import Link from 'next/link';
@@ -741,6 +742,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
               />
             </Box>
           </Box> */}
+          <CustomRangeModal />
         </Box>
       )}
     </>
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 261a23b7..7cd34e9d 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -42,6 +42,7 @@ const LoginPage = () => {
   const [loading, setLoading] = useState(false);
   const [selectedLanguage, setSelectedLanguage] = useState('en');
   const [language, setLanguage] = useState(selectedLanguage);
+  const [scrolling, setScrolling] = useState(false);
 
   const theme = useTheme<any>();
   const router = useRouter();
@@ -158,13 +159,14 @@ const LoginPage = () => {
   useEffect(() => {
     const handlePasswordFocus = () => {
       if (loginButtonRef.current) {
-        loginButtonRef.current.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-        });
+        setTimeout(() => {
+          loginButtonRef.current?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+          });
+        }, 200); // Delay of 200 milliseconds
       }
     };
-
     const passwordField = passwordRef.current;
     if (passwordField) {
       passwordField.addEventListener('focus', handlePasswordFocus);
@@ -175,180 +177,181 @@ const LoginPage = () => {
   }, []);
 
   return (
-    <form onSubmit={handleFormSubmit}>
-      <Box
-        display="flex"
-        flexDirection="column"
-        bgcolor={theme.palette.warning.A200}
-      >
-        {loading && (
-          <Loader showBackdrop={true} loadingText={t('COMMON.LOADING')} />
-        )}
+    <Box sx={{ height: '100vh', overflowY: 'auto', background: 'white' }}>
+      <form onSubmit={handleFormSubmit}>
         <Box
-          display={'flex'}
-          overflow="auto"
-          alignItems={'center'}
-          justifyContent={'center'}
-          zIndex={99}
-          sx={{ margin: '32px 0 65px' }}
+          display="flex"
+          flexDirection="column"
+          bgcolor={theme.palette.warning.A200}
         >
-          <Image src={appLogo} alt="App Logo" height={100} />{' '}
+          {loading && (
+            <Loader showBackdrop={true} loadingText={t('COMMON.LOADING')} />
+          )}
+          <Box
+            display={'flex'}
+            overflow="auto"
+            alignItems={'center'}
+            justifyContent={'center'}
+            zIndex={99}
+            sx={{ margin: '32px 0 65px' }}
+          >
+            <Image src={appLogo} alt="App Logo" height={100} />{' '}
+          </Box>
         </Box>
-      </Box>
-      <Box
-        flexGrow={1}
-        display={'flex'}
-        bgcolor="white"
-        overflow="auto"
-        height="auto"
-        borderRadius={'2rem 2rem 0 0'}
-        zIndex={99}
-        justifyContent={'center'}
-        p={'2rem'}
-        marginTop={'-25px'}
-        sx={{ height: `calc(100vh - 172px)` }}
-      >
         <Box
-          position={'relative'}
-          sx={{
-            '@media (max-width: 700px)': {
-              width: '100%',
-            },
-          }}
+          flexGrow={1}
+          display={'flex'}
+          bgcolor="white"
+          height="auto"
+          borderRadius={'2rem 2rem 0 0'}
+          zIndex={99}
+          justifyContent={'center'}
+          p={'2rem'}
+          marginTop={'-25px'}
         >
-          <Box mt={'0.5rem'}>
-            <FormControl sx={{ m: '1rem 0 1rem' }}>
-              <Select
-                className="SelectLanguages"
-                value={language}
-                onChange={handleChange}
-                displayEmpty
-                style={{
-                  borderRadius: '0.5rem',
-                  color: theme.palette.warning['A200'],
-                  width: '117px',
-                  height: '32px',
-                  marginBottom: '0rem',
-                  fontSize: '14px',
-                }}
-              >
-                {config?.languages.map((lang) => (
-                  <MenuItem value={lang.code} key={lang.code}>
-                    {lang.label}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </Box>
           <Box
-            marginY={'1rem'}
+            position={'relative'}
             sx={{
-              width: '668px',
               '@media (max-width: 700px)': {
                 width: '100%',
               },
             }}
           >
-            <TextField
-              id="username"
-              InputLabelProps={{
-                shrink: true,
+            <Box mt={'0.5rem'}>
+              <FormControl sx={{ m: '1rem 0 1rem' }}>
+                <Select
+                  className="SelectLanguages"
+                  value={language}
+                  onChange={handleChange}
+                  displayEmpty
+                  style={{
+                    borderRadius: '0.5rem',
+                    color: theme.palette.warning['A200'],
+                    width: '117px',
+                    height: '32px',
+                    marginBottom: '0rem',
+                    fontSize: '14px',
+                  }}
+                >
+                  {config?.languages.map((lang) => (
+                    <MenuItem value={lang.code} key={lang.code}>
+                      {lang.label}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </Box>
+            <Box
+              marginY={'1rem'}
+              sx={{
+                width: '668px',
+                '@media (max-width: 700px)': {
+                  width: '100%',
+                },
               }}
-              label={t('LOGIN_PAGE.USERNAME')}
-              placeholder={t('LOGIN_PAGE.USERNAME_PLACEHOLDER')}
-              value={username}
-              onChange={handleUsernameChange}
-              error={usernameError}
-            />
-          </Box>
-          <Box
-            sx={{
-              width: '668px',
-              '@media (max-width: 768px)': {
-                width: '100%',
-              },
-            }}
-            margin={'2rem 0 0'}
-          >
-            <TextField
-              type={showPassword ? 'text' : 'password'}
-              id="password"
-              InputLabelProps={{
-                shrink: true,
-              }}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton
-                      aria-label="toggle password visibility"
-                      onClick={handleClickShowPassword}
-                      onMouseDown={handleMouseDownPassword}
-                      edge="end"
-                    >
-                      {showPassword ? <VisibilityOff /> : <Visibility />}
-                    </IconButton>
-                  </InputAdornment>
-                ),
+            >
+              <TextField
+                id="username"
+                InputLabelProps={{
+                  shrink: true,
+                }}
+                label={t('LOGIN_PAGE.USERNAME')}
+                placeholder={t('LOGIN_PAGE.USERNAME_PLACEHOLDER')}
+                value={username}
+                onChange={handleUsernameChange}
+                error={usernameError}
+              />
+            </Box>
+            <Box
+              sx={{
+                width: '668px',
+                '@media (max-width: 768px)': {
+                  width: '100%',
+                },
               }}
-              label={t('LOGIN_PAGE.PASSWORD')}
-              placeholder={t('LOGIN_PAGE.PASSWORD_PLACEHOLDER')}
-              value={password}
-              onChange={handlePasswordChange}
-              error={passwordError}
-              inputRef={passwordRef}
-            />
-          </Box>
-
-          <Box marginTop={'1rem'} marginLeft={'0.8rem'}>
-            <Link
-              sx={{ color: theme.palette.secondary.main }}
-              href="https://qa.prathamteacherapp.tekdinext.com/auth/realms/pratham/login-actions/reset-credentials?client_id=security-admin-console&tab_id=R-3zEZbbbyM"
-              underline="none"
+              margin={'2rem 0 0'}
             >
-              {t('LOGIN_PAGE.FORGOT_PASSWORD')}
-            </Link>
-          </Box>
-          <Box marginTop={'1.2rem'} className="remember-me-checkbox">
-            <Checkbox onChange={(e) => setRememberMe(e.target.checked)} />
-            {t('LOGIN_PAGE.REMEMBER_ME')}
-          </Box>
-          <Box
-            alignContent={'center'}
-            textAlign={'center'}
-            marginTop={'2rem'}
-            marginBottom={'2rem'}
-            width={'100%'}
-          >
-            <Button
-              variant="contained"
-              type="submit"
-              fullWidth={true}
-              disabled={isButtonDisabled}
-              ref={loginButtonRef}
-              sx={{ marginBottom: '2rem' }}
+              <TextField
+                type={showPassword ? 'text' : 'password'}
+                id="password"
+                InputLabelProps={{
+                  shrink: true,
+                }}
+                onClick={() => setScrolling(!scrolling)}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton
+                        aria-label="toggle password visibility"
+                        onClick={handleClickShowPassword}
+                        onMouseDown={handleMouseDownPassword}
+                        edge="end"
+                      >
+                        {showPassword ? <VisibilityOff /> : <Visibility />}
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                }}
+                label={t('LOGIN_PAGE.PASSWORD')}
+                placeholder={t('LOGIN_PAGE.PASSWORD_PLACEHOLDER')}
+                value={password}
+                onChange={handlePasswordChange}
+                error={passwordError}
+                inputRef={passwordRef}
+              />
+            </Box>
+
+            <Box marginTop={'1rem'} marginLeft={'0.8rem'}>
+              <Link
+                sx={{ color: theme.palette.secondary.main }}
+                href="https://qa.prathamteacherapp.tekdinext.com/auth/realms/pratham/login-actions/reset-credentials?client_id=security-admin-console&tab_id=R-3zEZbbbyM"
+                underline="none"
+              >
+                {t('LOGIN_PAGE.FORGOT_PASSWORD')}
+              </Link>
+            </Box>
+            <Box marginTop={'1.2rem'} className="remember-me-checkbox">
+              <Checkbox onChange={(e) => setRememberMe(e.target.checked)} />
+              {t('LOGIN_PAGE.REMEMBER_ME')}
+            </Box>
+            <Box
+              alignContent={'center'}
+              textAlign={'center'}
+              marginTop={'2rem'}
+              // marginBottom={'2rem'}
+              width={'100%'}
             >
-              {t('LOGIN_PAGE.LOGIN')}
-            </Button>
+              <Button
+                variant="contained"
+                type="submit"
+                fullWidth={true}
+                disabled={isButtonDisabled}
+                ref={loginButtonRef}
+                // sx={{ marginBottom: '2rem' }}
+              >
+                {t('LOGIN_PAGE.LOGIN')}
+              </Button>
+            </Box>
           </Box>
         </Box>
-      </Box>
-      {showToastMessage && (
-        <Snackbar
-          anchorOrigin={{ vertical, horizontal }}
-          open={openModal}
-          onClose={handleClose}
-          className="alert"
-          autoHideDuration={5000}
-          key={vertical + horizontal}
-          message={t('LOGIN_PAGE.USERNAME_PASSWORD_NOT_CORRECT')}
-          action={
-            <IconButton size="small" color="inherit" onClick={handleClose}>
-              <CloseIcon fontSize="small" />
-            </IconButton>
-          }
-        />
-      )}
-    </form>
+        {showToastMessage && (
+          <Snackbar
+            anchorOrigin={{ vertical, horizontal }}
+            open={openModal}
+            onClose={handleClose}
+            className="alert"
+            autoHideDuration={5000}
+            key={vertical + horizontal}
+            message={t('LOGIN_PAGE.USERNAME_PASSWORD_NOT_CORRECT')}
+            action={
+              <IconButton size="small" color="inherit" onClick={handleClose}>
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            }
+          />
+        )}
+      </form>
+    </Box>
   );
 };
 

From 35c98217ea5603de3a66a3058b2b95093707d825 Mon Sep 17 00:00:00 2001
From: TTPL-RT-52 <shreyas1434shinde@gmail.com>
Date: Fri, 31 May 2024 19:19:00 +0530
Subject: [PATCH 2/2] Issue #PS-652 fix:Login button position should be dynamic

---
 src/pages/dashboard.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index cf35fd30..8a1b0cce 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -35,7 +35,6 @@ import { isAfter, startOfDay } from 'date-fns';
 
 import ArrowForwardSharpIcon from '@mui/icons-material/ArrowForwardSharp';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import CustomRangeModal from '@/components/CustomRangeModal';
 import Divider from '@mui/material/Divider';
 import Header from '../components/Header';
 import Link from 'next/link';
@@ -742,7 +741,6 @@ const Dashboard: React.FC<DashboardProps> = () => {
               />
             </Box>
           </Box> */}
-          <CustomRangeModal />
         </Box>
       )}
     </>