Merge pull request #956 from NSUWAL123/fix-refine-mbtiles-modal-design

Fix refine mbtiles modal design
hotosm · Nov 2, 2023 · ebf2536 · ebf2536
2 parents 42d77d6 + 16a6888
commit ebf2536
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 19 deletions.
diff --git a/src/frontend/src/components/GenerateBasemap.jsx b/src/frontend/src/components/GenerateBasemap.jsx
@@ -18,10 +18,11 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
 
   const modalStyle = (theme) => ({
     width: '90vw', // Responsive modal width using vw
-    height: '95vh',
+    // height: '90vh',
     bgcolor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
     border: '1px solid ',
     padding: '16px 32px 24px 32px',
+    maxWidth: '1000px',
   });
   const downloadBasemap = (tileId) => {
     dispatch(DownloadTile(`${import.meta.env.VITE_API_URL}/projects/download_tiles/?tile_id=${tileId}`, projectInfo));
@@ -203,36 +204,70 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
 
         {/* Table Content */}
         <CoreModules.Grid item xs={12}>
-          <CoreModules.TableContainer component={CoreModules.Paper} sx={{ maxHeight: '50vh', overflowY: 'auto' }}>
+          <CoreModules.TableContainer
+            component={CoreModules.Paper}
+            className="scrollbar fmtm-overflow-y-auto fmtm-max-h-[38vh] lg:fmtm-max-h-[45vh] sm:fmtm-mb-5"
+          >
             <CoreModules.Table sx={{ minWidth: 650 }} aria-label="simple table">
               <CoreModules.TableHead>
                 <CoreModules.TableRow>
-                  <CoreModules.TableCell>Id</CoreModules.TableCell>
-                  <CoreModules.TableCell align="right">Source</CoreModules.TableCell>
-                  <CoreModules.TableCell align="right">Status</CoreModules.TableCell>
-                  <CoreModules.TableCell align="right"></CoreModules.TableCell>
+                  {/* <CoreModules.TableCell>Id</CoreModules.TableCell> */}
+                  <CoreModules.TableCell>S.N.</CoreModules.TableCell>
+                  <CoreModules.TableCell align="center">Source</CoreModules.TableCell>
+                  <CoreModules.TableCell align="center">Status</CoreModules.TableCell>
+                  <CoreModules.TableCell align="center"></CoreModules.TableCell>
                 </CoreModules.TableRow>
               </CoreModules.TableHead>
               <CoreModules.TableBody>
-                {tilesList.map((list) => (
+                {tilesList.map((list, i) => (
                   <CoreModules.TableRow key={list.name}>
-                    <CoreModules.TableCell component="th" scope="row">
+                    {/* <CoreModules.TableCell component="th" scope="row">
                       {list.id}
+                    </CoreModules.TableCell> */}
+                    <CoreModules.TableCell component="th" scope="row">
+                      {i + 1}
                     </CoreModules.TableCell>
-                    <CoreModules.TableCell align="right">{list.tile_source}</CoreModules.TableCell>
-                    <CoreModules.TableCell align="right" sx={{ color: environment.statusColors[list.status] }}>
-                      {list.status === 'SUCCESS' ? 'COMPLETED' : list.status}
+                    <CoreModules.TableCell align="center">
+                      <div className="fmtm-text-primaryRed fmtm-border-primaryRed fmtm-border-[1px] fmtm-rounded-full fmtm-px-4 fmtm-py-1 fmtm-w-fit fmtm-mx-auto">
+                        {list.tile_source}
+                      </div>
                     </CoreModules.TableCell>
-                    <CoreModules.TableCell align="right">
+                    <CoreModules.TableCell align="center" sx={{ color: environment.statusColors[list.status] }}>
+                      {/* {list.status === 'SUCCESS' ? 'COMPLETED' : list.status} */}
                       {list.status === 'SUCCESS' ? (
-                        <AssetModules.FileDownloadIcon
-                          sx={{ cursor: 'pointer' }}
-                          onClick={() => downloadBasemap(list.id)}
-                        ></AssetModules.FileDownloadIcon>
+                        <div className="fmtm-bg-green-50 fmtm-text-green-700 fmtm-border-green-700 fmtm-border-[1px] fmtm-rounded-full fmtm-px-4 fmtm-py-1 fmtm-w-fit fmtm-mx-auto">
+                          COMPLETED
+                        </div>
                       ) : (
-                        <></>
+                        <div
+                          className={`${
+                            list.status === 'PENDING'
+                              ? 'fmtm-bg-yellow-50 fmtm-text-yellow-500 fmtm-border-yellow-500'
+                              : 'fmtm-bg-red-50 fmtm-text-red-500 fmtm-border-red-500'
+                          }  fmtm-border-[1px] fmtm-rounded-full fmtm-px-4 fmtm-py-1 fmtm-w-fit fmtm-mx-auto`}
+                        >
+                          {list.status}
+                        </div>
                       )}
                     </CoreModules.TableCell>
+                    <CoreModules.TableCell align="center">
+                      <div className="fmtm-flex fmtm-gap-4 fmtm-float-right">
+                        {list.status === 'SUCCESS' ? (
+                          <AssetModules.FileDownloadIcon
+                            sx={{ cursor: 'pointer', fontSize: '22px' }}
+                            onClick={() => downloadBasemap(list.id)}
+                            className="fmtm-text-gray-500 hover:fmtm-text-blue-500"
+                          ></AssetModules.FileDownloadIcon>
+                        ) : (
+                          <></>
+                        )}
+                        <AssetModules.DeleteIcon
+                          sx={{ cursor: 'pointer', fontSize: '22px' }}
+                          onClick={() => {}}
+                          className="fmtm-text-red-500 hover:fmtm-text-red-700"
+                        ></AssetModules.DeleteIcon>
+                      </div>
+                    </CoreModules.TableCell>
                   </CoreModules.TableRow>
                 ))}
               </CoreModules.TableBody>

diff --git a/src/frontend/src/components/ProjectDetails/MobileFooter.tsx b/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
@@ -91,7 +91,8 @@ const MobileFooter = () => {
     );
   };
   return (
-    <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px] fmtm-z-[10001]">
+    <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px] fmtm-z-[1200]">
+      {/* fmtm-z-[10001] */}
       <div
         className={`fmtm-w-full fmtm-grid fmtm-grid-cols-5 fmtm-bg-white  fmtm-pb-16 fmtm-pt-2 fmtm-gap-5 fmtm-px-2`}
       >

diff --git a/src/frontend/src/components/common/BottomSheet.tsx b/src/frontend/src/components/common/BottomSheet.tsx
@@ -71,7 +71,7 @@ const BottomSheet = ({ body, onClose }) => {
   }, [currSheetHeight]);
 
   return (
-    <div className="fmtm-absolute fmtm-bottom-[200px] fmtm-bg-white sm:fmtm-hidden fmtm-z-[10000]">
+    <div className="fmtm-absolute fmtm-bottom-[200px] fmtm-bg-white sm:fmtm-hidden fmtm-z-[1199]">
       <div
         className={`bottom-sheet fmtm-fixed fmtm-w-full fmtm-left-0 fmtm-bottom-0 fmtm-flex fmtm-items-center fmtm-flex-col fmtm-justify-end fmtm-duration-100 fmtm-ease-linear ${
           !show ? 'fmtm-opacity-0 fmtm-pointer-events-none' : 'fmtm-opacity-100 fmtm-pointer-events-auto'

diff --git a/src/frontend/src/shared/AssetModules.js b/src/frontend/src/shared/AssetModules.js
@@ -48,6 +48,7 @@ import {
   LocationOn as LocationOnIcon,
   CropFree as CropFreeIcon,
   LegendToggle as LegendToggleIcon,
+  Delete as DeleteIcon,
 } from '@mui/icons-material';
 import LockPng from '../assets/images/lock.png';
 import RedLockPng from '../assets/images/red-lock.png';
@@ -106,4 +107,5 @@ export default {
   LocationOnIcon,
   CropFreeIcon,
   LegendToggleIcon,
+  DeleteIcon,
 };