Merge pull request #422 from shreyas1434shinde/InAppNotification

Login Page simlar to admin and UI improvement
tekdi · Nov 25, 2024 · 95c8440 · 95c8440
2 parents 4b5dccb + d66344f
commit 95c8440
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 73 deletions.
diff --git a/src/components/PieChartGraph.tsx b/src/components/PieChartGraph.tsx
@@ -62,81 +62,84 @@ const PieChartGraph: React.FC<PieChartGraphProps> = ({ stagesCount }) => {
   };
 
   return (
+    <Box
+      sx={{
+        background: '#FFF8F2',
+        p: '16px',
+        mt: 2,
+        boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px',
+        borderRadius: '8px', // Optional: to make the corners rounded
+        '@media (max-width: 700px)': {
+          p: '16px 16px 0px',
+        },
+      }}
+    >
       <Box
         sx={{
-          background: '#FFF8F2',
-          p: '16px',
-          mt: 2,
-          '@media (max-width: 700px)': {
-            p: '16px 16px 0px',
-          },
+          color: theme.palette.warning['400'],
+          fontSize: '14px',
+          fontWeight: '600',
         }}
       >
-        <Box
-          sx={{
-            color: theme.palette.warning['400'],
-            fontSize: '14px',
-            fontWeight: '600',
-          }}
-        >
-          Stages and Number of Students
-        </Box>
-
-        <Box
-          sx={{
-            height: 150,
-            '@media (min-width: 400px)': {
-              height: 200,
-            },
-            '@media (min-width: 500px)': {
-              height: 300,
-            },
-            '@media (min-width: 700px)': {
-              height: 400,
-            },
-          }}
-        >
-          <ResponsiveContainer width="100%" height="100%">
-            <PieChart>
-              <Pie
-                data={data}
-                cx="50%"
-                cy="50%"
-                labelLine={false}
-                label={false}
-                outerRadius="80%"
-                fill="#8884d8"
-                dataKey="value"
-              >
-                {data.map((entry, index) => (
-                  <Cell
-                    key={`cell-${index}`}
-                    fill={COLORS[index % COLORS.length]}
-                  />
-                ))}
-              </Pie>
+        Stages and Number of Students
+      </Box>
 
-              {isMobile ? (
-                <Legend
-                  layout="vertical"
-                  align="right"
-                  verticalAlign="middle"
-                  formatter={renderLegendText}
-                  iconType="circle"
-                />
-              ) : (
-                <Legend
-                  layout="horizontal"
-                  align="center"
-                  verticalAlign="bottom"
-                  formatter={renderLegendText}
-                  iconType="circle"
+      <Box
+        sx={{
+          height: 150,
+          '@media (min-width: 400px)': {
+            height: 200,
+          },
+          '@media (min-width: 500px)': {
+            height: 300,
+          },
+          '@media (min-width: 700px)': {
+            height: 400,
+          },
+        }}
+      >
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Pie
+              data={data}
+              cx="50%"
+              cy="50%"
+              labelLine={false}
+              label={false}
+              outerRadius="80%"
+              fill="#8884d8"
+              dataKey="value"
+            >
+              {data.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={COLORS[index % COLORS.length]}
                 />
-              )}
-            </PieChart>
-          </ResponsiveContainer>
-        </Box>
+              ))}
+            </Pie>
+
+            {isMobile ? (
+              <Legend
+                layout="vertical"
+                align="right"
+                verticalAlign="middle"
+                formatter={renderLegendText}
+                iconType="circle"
+              />
+            ) : (
+              <Legend
+                layout="horizontal"
+                align="center"
+                verticalAlign="bottom"
+                formatter={renderLegendText}
+                iconType="circle"
+              />
+            )}
+          </PieChart>
+        </ResponsiveContainer>
       </Box>
+    </Box>
+
   );
 };
 

diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -359,10 +359,16 @@ const LoginPage = () => {
       : null;
   return (
     <Box sx={{ overflowY: 'auto', background: theme.palette.warning['A400'] }}>
+
       <Box
         display="flex"
         flexDirection="column"
         bgcolor={theme.palette.warning.A200}
+        borderRadius={'10px'}
+        sx={{
+          '@media (min-width: 900px)': {
+           display: 'none',
+        }}}
       >
         {loading && (
           <Loader showBackdrop={true} loadingText={t('COMMON.LOADING')} />
@@ -373,9 +379,13 @@ const LoginPage = () => {
           alignItems={'center'}
           justifyContent={'center'}
           zIndex={99}
-          sx={{ margin: '32px 0 65px' }}
+        sx={{ margin: '5px 10px 25px', }}
         >
-          <Image src={appLogo} alt="App Logo" height={100} />{' '}
+          <Box sx={{ width: '55%', '@media (max-width: 400px)': { width: '95%' } }}>
+            <Image src={appLogo} alt="App Logo" height={80}
+              layout='responsive'
+            />
+          </Box>
         </Box>
       </Box>
 
@@ -406,18 +416,19 @@ const LoginPage = () => {
           />
         </Grid>
         <Grid item xs={12} sm={12} md={6}>
+
           <form onSubmit={handleFormSubmit}>
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
               <Box
                 flexGrow={1}
-                display={'flex'}
+                // display={'flex'}
                 bgcolor={theme.palette.warning['A400']}
                 height="auto"
                 zIndex={99}
                 justifyContent={'center'}
                 p={'2rem'}
                 borderRadius={'2rem 2rem 0 0'}
-                marginTop={'-25px'}
+
                 sx={{
                   '@media (min-width: 900px)': {
                     width: '100%',
@@ -426,9 +437,44 @@ const LoginPage = () => {
                       darkMode === 'dark'
                         ? 'rgba(0, 0, 0, 0.9) 0px 2px 8px 0px'
                         : 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
+                    marginTop: '50px',
                   },
+                  '@media (max-width: 900px)': {
+                    marginTop: '-25px',
+                  }
+
                 }}
               >
+
+                <Box
+                  display="flex"
+                  flexDirection="column"
+                  bgcolor={theme.palette.warning.A200}
+                  borderRadius={'10px'}
+                  sx={{
+                    '@media (max-width: 900px)': {
+                      display: 'none',
+                    }
+                  }}
+                >
+                  {loading && (
+                    <Loader showBackdrop={true} loadingText={t('COMMON.LOADING')} />
+                  )}
+                  <Box
+                    display={'flex'}
+                    overflow="auto"
+                    alignItems={'center'}
+                    justifyContent={'center'}
+                    zIndex={99}
+                    // sx={{ margin: '5px 10px 25px', }}
+                  >
+                    <Box sx={{ width: '60%' , '@media (max-width: 700px)': {width: '95%'}}}>
+                      <Image src={appLogo} alt="App Logo" height={80}
+                        layout='responsive'
+                      />
+                    </Box>
+                  </Box>
+                </Box>
                 <Box
                   sx={{
                     width: '100%',

diff --git a/src/pages/observation/[observationId]/index.tsx b/src/pages/observation/[observationId]/index.tsx
@@ -674,6 +674,7 @@ setFilteredEntityData(result)
     flexWrap: 'wrap',
     flexDirection: 'row',
     gap: '20px',
+                  mx: "10px"
   }}
 >
   {loading ? (

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1014,7 +1014,7 @@ legend.Mui-focused {
 
 .login-img {
   /* height: 500px !important; */
-  width: 90% !important;
+  width: 100% !important;
 }
 
 .capitalize {
@@ -1195,6 +1195,17 @@ mat-radio-group.mat-mdc-radio-group {
 
 
 .btn-outline-secondary{
+  background: transparent !important;
+    border-radius: 100px !important;
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+      0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
+    color: #1E1B16 !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+}
+
+.btn-primary{
   background: #FDBE16 !important;
     border-radius: 100px !important;
     box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),