updated the ui for the mobile view

src/pages/nearle/login1.js

@@ -19,6 +19,7 @@ import {
   Link
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import AnimateButton from 'components/@extended/AnimateButton';
 
 import logo from 'assets/images/logo-nearle1.png';
@@ -32,6 +33,7 @@ import { enqueueSnackbar } from 'notistack';
 
 const Login = () => {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [alertmessage, setAlertmessage] = useState('');
@@ -224,9 +226,9 @@ const Login = () => {
             item
             xs={12}
             // sx={{ ml: 3, mt: 3 }}
-            sx={{ ml: 3, mt: 1 }}
+            sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 3, md: 1 }, textAlign: { xs: 'center', md: 'left' } }}
           >
-            <img src={logo} alt="legendary" width="200px" />
+            <img src={logo} alt="legendary" width={isMobile ? '160px' : '200px'} />
           </Grid>
           <Grid item xs={12}>
             <Grid
@@ -242,8 +244,9 @@ const Login = () => {
                 {/* <AuthCard>{children}</AuthCard> */}
                 <Box
                   sx={{
+                    width: { xs: '100%', sm: 'auto' },
                     maxWidth: { xs: 400, lg: 475 },
-                    margin: { xs: 2.5, md: 3 },
+                    margin: { xs: 2, sm: 2.5, md: 3 },
                     '& > *': {
                       flexGrow: 1,
                       flexBasis: '50%'
@@ -254,10 +257,10 @@ const Login = () => {
                     sx={{
                       position: 'relative',
                       border: '1px solid',
-                      borderRadius: 1,
+                      borderRadius: { xs: 2, md: 1 },
                       borderColor: theme.palette.divider,
-                      boxShadow: 'inherit',
-                      p: 2,
+                      boxShadow: { xs: '0 14px 40px rgba(15, 23, 42, 0.10)', md: 'inherit' },
+                      p: { xs: 2, md: 2 },
                       width: '100%'
                     }}
                   >