Merge pull request #374 from AkshataKatwal16/reassign-cohorts

Issue feat: Modify UI
tekdi · Nov 8, 2024 · 8eb3d77 · 8eb3d77
2 parents 7c2b453 + 7843acd
commit 8eb3d77
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 32 deletions.
diff --git a/src/components/FilterSelect.tsx b/src/components/FilterSelect.tsx
@@ -24,6 +24,8 @@ const FilterSelect: React.FC<FilterSelectProps> = ({
         value={selectedOption}
         onChange={handleFilterChange}
         label={label}
+        sx={{height:"50px"}}
+
       >
         {menuItems.map((item) => (
           <MenuItem key={item.value} value={item.value}>

diff --git a/src/components/ObservationCard.tsx b/src/components/ObservationCard.tsx
@@ -53,7 +53,6 @@ const ObservationCard: React.FC<ObservationCardProp> = ({
       <Card
         variant="outlined"
         sx={{
-          padding: '8px',
           boxShadow: 3,
           transition: 'transform 0.3s ease-in-out',
           '&:hover': {
@@ -65,14 +64,14 @@ const ObservationCard: React.FC<ObservationCardProp> = ({
         background: "#f8efda",
                  borderRadius: '16px',
           border: '1px solid #E0E0E0',
-          height: '220px',
+         // height: '220px',
           display: 'flex',
           flexDirection: 'column',
         }}
         onClick={remainingDays === 0 ? undefined : () => onCardClick?.(id || '')}
       >
-        <Box display="flex" justifyContent="space-between" alignItems="center" flexGrow={1}>
-          <CardContent sx={{ flexGrow: 1, padding: '16px' }}>
+        <Box display="flex"  alignItems="center" >
+          <CardContent sx={{  }}>
             {/* {remainingDays !== 0 && (
               <Chip
                 label={`${remainingDays} ${t('OBSERVATION.DAYS_LEFT')}`}
@@ -85,34 +84,16 @@ const ObservationCard: React.FC<ObservationCardProp> = ({
               />
             )} */}
 
-            {endDate &&(<Box
-              sx={{
-               // display: 'flex',
-                alignItems: 'center',
-                mb: 1,
-                mt: 1,
-                color: 'black',
-              backgroundColor: 'white',
-                borderRadius: '8px',
-                padding: '6px 10px',
-              }}
-            >
-              <Typography variant="body1" color="text.primary" sx={{ mr: 1 }}>
-                {t('OBSERVATION.DUE_DATE')}:
-              </Typography>
-              <Typography variant="body1" color="text.primary">
-                {endDate ? formatDate(endDate) : 'N/A'}
-              </Typography>
-            </Box>)}
+
 
             <Typography
-              variant="h5"
+              variant="h3"
               component="div"
               sx={{
                 fontWeight: 'bold',
                 lineHeight: 1.3,
                 color: '#333',
-                mb: 1,
+               // mb: 1,
               }}
             >
               {name}
@@ -135,6 +116,22 @@ const ObservationCard: React.FC<ObservationCardProp> = ({
                 {description}
               </Typography>
             )}
+
+{endDate &&(<Box
+              sx={{
+                alignItems: 'center',
+
+
+                borderRadius: '8px',
+              }}
+            >
+              <Typography variant="h5" color="black"  sx={{ mr: 1 }}>
+                {t('OBSERVATION.DUE_DATE')}:
+              </Typography>
+              <Typography variant="h5" color= '#555' >
+                {endDate ? formatDate(endDate) : 'N/A'}
+              </Typography>
+            </Box>)}
           </CardContent>
         </Box>
       </Card>

diff --git a/src/pages/observation/index.tsx b/src/pages/observation/index.tsx
@@ -238,13 +238,18 @@ const ObservationForms: React.FC = () => {
         placeholder={t('OBSERVATION.SEARCH_OBSERVATIONS')}
         fullWidth
       />
-       {value===0 &&(<FormControl sx={{ minWidth: 200 , marginLeft:"20px",backgroundColor:"#F0F0F0"}} variant="outlined" margin="normal">
-        <InputLabel id="days-sort-label">{t('OBSERVATION.DAYS_LEFT')}</InputLabel>
+       {value===0 &&(<FormControl sx={{ minWidth: 200 ,  marginLeft:"20px",backgroundColor:"#F0F0F0"}} variant="outlined" margin="normal">
+        <InputLabel id="days-sort-label">
+        <Typography variant="h3" >
+        {t('OBSERVATION.DAYS_LEFT')}              </Typography>
+
+         </InputLabel>
         <Select
           labelId="days-sort-label"
            value={sortOrder}
            onChange={handleSortChange}
           label={t('OBSERVATION.DAYS_LEFT')}
+          sx={{height:"50px"}}
 
         >
           <MenuItem value="lowToHigh">{t('COMMON.LOW_TO_HIGH')}</MenuItem>
@@ -270,7 +275,7 @@ const ObservationForms: React.FC = () => {
             borderRadius: 1,
           }}
         >
-          <Typography variant="h2">
+          <Typography variant="h2" color={"black"}>
             {t('OBSERVATION.OBSERVATIONS', {
               name: toPascalCase(name),
             })}
@@ -309,26 +314,26 @@ const ObservationForms: React.FC = () => {
                     </Box>
                   ))
               ) : searchInput === "" ?(
-                <Typography variant="h5" color="textSecondary">
+                <Typography variant="h4" color="textSecondary">
                 {t('OBSERVATION.NO_RESULT_FOUND', {
                   entity: toPascalCase(name),
                 })}
               </Typography>
               ):(
-                <Typography variant="h5" color="textSecondary">
+                <Typography variant="h4" color="textSecondary">
                 {t('OBSERVATION.NO_RESULT_FOUND', {
                   entity: toPascalCase(name),
                 })}
               </Typography>
               )
             ) : searchInput === "" && value === 0 ? (
-              <Typography variant="h5" color="textSecondary">
+              <Typography variant="h4" color="textSecondary">
                 {t('OBSERVATION.NO_RESULT_FOUND', {
                   entity: toPascalCase(name),
                 })}
               </Typography>
             ) : (
-              <Typography variant="h5" color="textSecondary">
+              <Typography variant="h4" color="textSecondary">
               {t('OBSERVATION.NO_RESULT_FOUND', {
                 entity: toPascalCase(name),
               })}