From a54b02422d69ee0453373439c61d977626037c85 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Wed, 11 Oct 2023 10:17:38 +0545
Subject: [PATCH 01/21] feat (projectDetails): map - for small screen, full
 screen map visible(only map visible)

---
 src/frontend/src/components/OpenLayersMap.jsx |  14 +-
 src/frontend/src/styles/home.scss             |   2 +-
 src/frontend/src/views/MainView.jsx           |  18 +-
 src/frontend/src/views/ProjectDetails.jsx     | 423 +++++++++---------
 4 files changed, 245 insertions(+), 212 deletions(-)

diff --git a/src/frontend/src/components/OpenLayersMap.jsx b/src/frontend/src/components/OpenLayersMap.jsx
index aad3c32eb1..bcd7641b83 100755
--- a/src/frontend/src/components/OpenLayersMap.jsx
+++ b/src/frontend/src/components/OpenLayersMap.jsx
@@ -21,6 +21,8 @@ import Button from './common/Button';
 import { ProjectActions } from '../store/slices/ProjectSlice';
 import TaskSectionModal from './ProjectDetails/TaskSectionPopup';
 import VectorLayer from 'ol/layer/Vector';
+import WindowDimension from '../hooks/WindowDimension';
+
 let currentLocationLayer = null;
 const OpenLayersMap = ({
   defaultTheme,
@@ -40,6 +42,8 @@ const OpenLayersMap = ({
   const [currentLocLayer, setCurrentLocLayer] = useState(null);
   const dispatch = CoreModules.useAppDispatch();
   const taskModalStatus = CoreModules.useAppSelector((state) => state.project.taskModalStatus);
+  const { windowSize } = WindowDimension();
+
   function elastic(t) {
     return Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1;
   }
@@ -322,13 +326,17 @@ const OpenLayersMap = ({
   }, [map, currentLocLayer]);
 
   return (
-    <CoreModules.Stack spacing={1} direction={'column'} className="fmtm-px-0 sm:fmtm-px-[1rem] fmtm-py-[1rem]">
+    <CoreModules.Stack spacing={1} direction={'column'} className="fmtm-px-0 sm:fmtm-px-[1rem] sm:fmtm-py-[1rem]">
       <CoreModules.Stack
         id="project-details-map"
         // style={{ border: `4px solid ${defaultTheme.palette.error.main}` }}
         justifyContent={'center'}
-        height={608}
-        className="fmtm-border-y-[4px] sm:fmtm-border-x-[4px] fmtm-border-primaryRed"
+        // height={608}
+        className={`${
+          windowSize.width <= 640
+            ? 'fmtm-h-[100vh]'
+            : 'fmtm-border-y-[4px] sm:fmtm-border-x-[4px] fmtm-border-primaryRed fmtm-h-[608px]'
+        }`}
       >
         <div ref={mapElement} id="map_container"></div>
         {/* <div id="popup" className="ol-popup">
diff --git a/src/frontend/src/styles/home.scss b/src/frontend/src/styles/home.scss
index 837407da91..4713afb356 100755
--- a/src/frontend/src/styles/home.scss
+++ b/src/frontend/src/styles/home.scss
@@ -9,7 +9,7 @@
   align-items: center;
   justify-content: center;
   position: absolute;
-  right: 0;
+  right: 10px;
 }
 
 .container {
diff --git a/src/frontend/src/views/MainView.jsx b/src/frontend/src/views/MainView.jsx
index 3f7f8d8b0f..aa722f3f94 100755
--- a/src/frontend/src/views/MainView.jsx
+++ b/src/frontend/src/views/MainView.jsx
@@ -46,18 +46,28 @@ const MainView = () => {
       <CoreModules.Paper>
         <CoreModules.Container disableGutters={true} maxWidth={false}>
           <CoreModules.Stack sx={{ height: '100vh' }}>
-            {popupInParams !== 'true' && (
+            {popupInParams === 'true' || (location.pathname.includes('project_details') && windowSize.width <= 640) ? (
+              <div></div>
+            ) : (
               <div>
                 <MappingHeader />
                 <PrimaryAppBar />
               </div>
             )}
             <CoreModules.Stack
-              className={`mainview fmtm-py-[1.3rem] ${
-                location.pathname.includes('project_details') ? 'fmtm-px-0 sm:fmtm-px-[1.3rem]' : 'fmtm-px-[1.3rem]'
+              className={`mainview ${
+                location.pathname.includes('project_details')
+                  ? 'fmtm-px-0 sm:fmtm-px-[1.3rem] sm:fmtm-py-[1.3rem]'
+                  : 'fmtm-px-[1.3rem] fmtm-py-[1.3rem]'
               }`}
               sx={{
-                height: popupInParams ? '100vh' : windowSize.width <= 599 ? '90vh' : '92vh',
+                height: popupInParams
+                  ? '100vh'
+                  : location.pathname.includes('project_details') && windowSize.width <= 640
+                  ? '100vh'
+                  : windowSize.width <= 599
+                  ? '90vh'
+                  : '92vh',
                 overflow: 'auto',
                 // p: '1.3rem',
               }}
diff --git a/src/frontend/src/views/ProjectDetails.jsx b/src/frontend/src/views/ProjectDetails.jsx
index b544f4918c..271deb5cac 100755
--- a/src/frontend/src/views/ProjectDetails.jsx
+++ b/src/frontend/src/views/ProjectDetails.jsx
@@ -298,209 +298,220 @@ const Home = () => {
   return (
     <CoreModules.Stack spacing={2}>
       {/* Customized Modal For Generate Tiles */}
-      <GenerateMbTiles
-        toggleGenerateModal={toggleGenerateModal}
-        setToggleGenerateModal={setToggleGenerateModal}
-        projectInfo={state.projectInfo}
-      />
+      {windowSize.width >= 640 && (
+        <div>
+          <GenerateMbTiles
+            toggleGenerateModal={toggleGenerateModal}
+            setToggleGenerateModal={setToggleGenerateModal}
+            projectInfo={state.projectInfo}
+          />
 
-      {/* Home snackbar */}
-      <CustomizedSnackbar
-        duration={stateSnackBar.duration}
-        open={stateSnackBar.open}
-        variant={stateSnackBar.variant}
-        message={stateSnackBar.message}
-        handleClose={handleClose}
-      />
+          {/* Home snackbar */}
+          <CustomizedSnackbar
+            duration={stateSnackBar.duration}
+            open={stateSnackBar.open}
+            variant={stateSnackBar.variant}
+            message={stateSnackBar.message}
+            handleClose={handleClose}
+          />
+        </div>
+      )}
 
       {/* Top project details heading medium dimension*/}
-      <CoreModules.Stack
-        sx={{ display: { md: 'flex', xs: 'none' } }}
-        direction="column"
-        justifyContent="center"
-        spacing={5}
-        alignItems={'center'}
-      >
-        <CoreModules.Stack
-          direction={'row'}
-          p={2}
-          spacing={2}
-          divider={
-            <CoreModules.Divider
-              sx={{ backgroundColor: defaultTheme.palette.grey['main'] }}
-              orientation="vertical"
-              flexItem
-            />
-          }
-        >
-          <CoreModules.Stack direction={'row'} justifyContent={'center'}>
-            <AssetModules.LocationOn color="error" style={{ fontSize: 22 }} />
-            <CoreModules.Typography variant="h1">{state.projectInfo.title}</CoreModules.Typography>
-          </CoreModules.Stack>
-
-          <CoreModules.Stack>
-            <CoreModules.Typography variant="h4" fontSize={defaultTheme.typography.fontSize}>
-              {`#${state.projectInfo.id}`}
-            </CoreModules.Typography>
-          </CoreModules.Stack>
-
-          <CoreModules.Stack mt={'5%'}>
-            <CoreModules.Typography
-              variant="h4"
-              fontSize={defaultTheme.typography.fontSize}
-              color={defaultTheme.palette.warning['main']}
+      {windowSize.width >= 640 && (
+        <div>
+          <CoreModules.Stack
+            sx={{ display: { md: 'flex', xs: 'none' } }}
+            direction="column"
+            justifyContent="center"
+            spacing={5}
+            alignItems={'center'}
+          >
+            <CoreModules.Stack
+              direction={'row'}
+              p={2}
+              spacing={2}
+              divider={
+                <CoreModules.Divider
+                  sx={{ backgroundColor: defaultTheme.palette.grey['main'] }}
+                  orientation="vertical"
+                  flexItem
+                />
+              }
             >
-              {state.projectInfo.priority_str}
-            </CoreModules.Typography>
+              <CoreModules.Stack direction={'row'} justifyContent={'center'}>
+                <AssetModules.LocationOn color="error" style={{ fontSize: 22 }} />
+                <CoreModules.Typography variant="h1">{state.projectInfo.title}</CoreModules.Typography>
+              </CoreModules.Stack>
+
+              <CoreModules.Stack>
+                <CoreModules.Typography variant="h4" fontSize={defaultTheme.typography.fontSize}>
+                  {`#${state.projectInfo.id}`}
+                </CoreModules.Typography>
+              </CoreModules.Stack>
+
+              <CoreModules.Stack mt={'5%'}>
+                <CoreModules.Typography
+                  variant="h4"
+                  fontSize={defaultTheme.typography.fontSize}
+                  color={defaultTheme.palette.warning['main']}
+                >
+                  {state.projectInfo.priority_str}
+                </CoreModules.Typography>
+              </CoreModules.Stack>
+            </CoreModules.Stack>
           </CoreModules.Stack>
-        </CoreModules.Stack>
-      </CoreModules.Stack>
-
-      {/* project Details Title */}
-      <CoreModules.Stack sx={{ display: { xs: 'flex', md: 'none' } }} spacing={2}>
-        <CoreModules.Stack direction={'row'} justifyContent={'center'}>
-          <AssetModules.LocationOn color="error" style={{ marginTop: '1.5%', fontSize: 22 }} />
-          <CoreModules.Typography variant="caption">{state.projectInfo.title}</CoreModules.Typography>
-        </CoreModules.Stack>
-
-        <CoreModules.Stack direction={'row'} justifyContent={'center'}>
-          <CoreModules.Typography variant="h1" fontSize={defaultTheme.typography.fontSize}>
-            {`#${state.projectInfo.id}`}
-          </CoreModules.Typography>
-        </CoreModules.Stack>
-
-        <CoreModules.Stack direction={'row'} justifyContent={'center'}>
-          <CoreModules.Typography
-            variant="h1"
-            fontSize={defaultTheme.typography.fontSize}
-            color={defaultTheme.palette.warning['main']}
-          >
-            {state.projectInfo.priority_str}
-          </CoreModules.Typography>
-        </CoreModules.Stack>
-      </CoreModules.Stack>
+          {/* project Details Title */}
+          <CoreModules.Stack sx={{ display: { xs: 'flex', md: 'none' } }} spacing={2}>
+            <CoreModules.Stack direction={'row'} justifyContent={'center'}>
+              <AssetModules.LocationOn color="error" style={{ marginTop: '1.5%', fontSize: 22 }} />
+              <CoreModules.Typography variant="caption">{state.projectInfo.title}</CoreModules.Typography>
+            </CoreModules.Stack>
+
+            <CoreModules.Stack direction={'row'} justifyContent={'center'}>
+              <CoreModules.Typography variant="h1" fontSize={defaultTheme.typography.fontSize}>
+                {`#${state.projectInfo.id}`}
+              </CoreModules.Typography>
+            </CoreModules.Stack>
+
+            <CoreModules.Stack direction={'row'} justifyContent={'center'}>
+              <CoreModules.Typography
+                variant="h1"
+                fontSize={defaultTheme.typography.fontSize}
+                color={defaultTheme.palette.warning['main']}
+              >
+                {state.projectInfo.priority_str}
+              </CoreModules.Typography>
+            </CoreModules.Stack>
+          </CoreModules.Stack>
+        </div>
+      )}
 
       {/* Center description and map */}
       <CoreModules.Stack direction={'column'} spacing={1}>
-        <MapDescriptionComponents defaultTheme={defaultTheme} state={state} type={type} />
-        <div>
-          <div
-            className={`fmtm-flex fmtm-gap-5 fmtm-py-4 sm:fmtm-hidden fmtm-justify-between  fmtm-items-center fmtm-mx-7 fmtm-mb-2 ${
-              toggleAction ? 'fmtm-border-b-[#929DB3] fmtm-border-b-[1px]' : ''
-            }`}
-          >
-            <p className="fmtm-text-xl fmtm-italic">Project Options</p>
+        {windowSize.width >= 640 && (
+          <div>
+            <MapDescriptionComponents defaultTheme={defaultTheme} state={state} type={type} />
+            <div>
+              <div
+                className={`fmtm-flex fmtm-gap-5 fmtm-py-4 sm:fmtm-hidden fmtm-justify-between  fmtm-items-center fmtm-mx-7 fmtm-mb-2 ${
+                  toggleAction ? 'fmtm-border-b-[#929DB3] fmtm-border-b-[1px]' : ''
+                }`}
+              >
+                <p className="fmtm-text-xl fmtm-italic">Project Options</p>
+                <div
+                  className={
+                    'fmtm-rounded-full fmtm-shadow-gray-400 fmtm-w-8 fmtm-h-8 fmtm-flex fmtm-justify-center fmtm-items-center fmtm-shadow-lg fmtm-cursor-pointer'
+                  }
+                  onClick={() => setToggleAction(!toggleAction)}
+                >
+                  <AssetModules.ArrowRightIcon
+                    color=""
+                    style={{ fontSize: 32 }}
+                    className={`${toggleAction ? 'fmtm-rotate-90' : ''}`}
+                  />
+                </div>
+              </div>
+            </div>
             <div
-              className={
-                'fmtm-rounded-full fmtm-shadow-gray-400 fmtm-w-8 fmtm-h-8 fmtm-flex fmtm-justify-center fmtm-items-center fmtm-shadow-lg fmtm-cursor-pointer'
-              }
-              onClick={() => setToggleAction(!toggleAction)}
+              className={`fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-6 lg:fmtm-gap-0 fmtm-px-3 sm:fmtm-px-0 ${
+                toggleAction ? '' : 'fmtm-hidden sm:fmtm-flex'
+              }`}
             >
-              <AssetModules.ArrowRightIcon
-                color=""
-                style={{ fontSize: 32 }}
-                className={`${toggleAction ? 'fmtm-rotate-90' : ''}`}
-              />
+              <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6 fmtm-ml-4">
+                <CoreModules.LoadingButton
+                  onClick={() => handleDownload('form')}
+                  sx={{ width: 'unset' }}
+                  loading={downloadProjectFormLoading.type === 'form' && downloadProjectFormLoading.loading}
+                  loadingPosition="end"
+                  endIcon={<AssetModules.FileDownloadIcon />}
+                  variant="contained"
+                  color="error"
+                >
+                  Form
+                </CoreModules.LoadingButton>
+                <CoreModules.LoadingButton
+                  onClick={() => handleDownload('geojson')}
+                  sx={{ width: 'unset' }}
+                  loading={downloadProjectFormLoading.type === 'geojson' && downloadProjectFormLoading.loading}
+                  loadingPosition="end"
+                  endIcon={<AssetModules.FileDownloadIcon />}
+                  variant="contained"
+                  color="error"
+                >
+                  Tasks
+                </CoreModules.LoadingButton>
+                <CoreModules.LoadingButton
+                  onClick={() => onDataExtractDownload()}
+                  sx={{ width: 'unset' }}
+                  loading={downloadDataExtractLoading}
+                  loadingPosition="end"
+                  endIcon={<AssetModules.FileDownloadIcon />}
+                  variant="contained"
+                  color="error"
+                  className="fmtm-truncate"
+                >
+                  Data Extract
+                </CoreModules.LoadingButton>
+              </div>
+              <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full fmtm-ml-4 fmtm-gap-6">
+                <CoreModules.Link
+                  to={`/projectInfo/${encodedId}`}
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    alignItems: 'flex-end',
+                    textDecoration: 'none',
+                    marginRight: '15px',
+                  }}
+                  className="fmtm-w-fit"
+                >
+                  <CoreModules.Button variant="contained" color="error">
+                    ProjectInfo
+                  </CoreModules.Button>
+                </CoreModules.Link>
+                <CoreModules.Button
+                  onClick={() => setToggleGenerateModal(true)}
+                  variant="contained"
+                  color="error"
+                  sx={{ width: '200px', mr: '15px' }}
+                  endIcon={<AssetModules.BoltIcon />}
+                  className="fmtm-truncate"
+                >
+                  Generate MbTiles
+                </CoreModules.Button>
+                <CoreModules.Link
+                  to={`/edit-project/project-details/${encodedId}`}
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    alignItems: 'flex-end',
+                    textDecoration: 'none',
+                    marginRight: '15px',
+                  }}
+                  className="fmtm-w-fit"
+                >
+                  <CoreModules.Button variant="outlined" color="error" className="fmtm-truncate">
+                    Edit Project
+                  </CoreModules.Button>
+                </CoreModules.Link>
+              </div>
+              <div className="fmtm-px-1 sm:fmtm-hidden">
+                <Accordion
+                  collapsed={true}
+                  disableHeaderClickToggle
+                  onToggle={() => {}}
+                  header={<div className="fmtm-text-[#2C3038] fmtm-font-bold fmtm-text-xl">Map Legends</div>}
+                  body={
+                    <div className="fmtm-mt-4">
+                      <MapLegends defaultTheme={defaultTheme} />
+                    </div>
+                  }
+                />
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          className={`fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-6 lg:fmtm-gap-0 fmtm-px-3 sm:fmtm-px-0 ${
-            toggleAction ? '' : 'fmtm-hidden sm:fmtm-flex'
-          }`}
-        >
-          <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6 fmtm-ml-4">
-            <CoreModules.LoadingButton
-              onClick={() => handleDownload('form')}
-              sx={{ width: 'unset' }}
-              loading={downloadProjectFormLoading.type === 'form' && downloadProjectFormLoading.loading}
-              loadingPosition="end"
-              endIcon={<AssetModules.FileDownloadIcon />}
-              variant="contained"
-              color="error"
-            >
-              Form
-            </CoreModules.LoadingButton>
-            <CoreModules.LoadingButton
-              onClick={() => handleDownload('geojson')}
-              sx={{ width: 'unset' }}
-              loading={downloadProjectFormLoading.type === 'geojson' && downloadProjectFormLoading.loading}
-              loadingPosition="end"
-              endIcon={<AssetModules.FileDownloadIcon />}
-              variant="contained"
-              color="error"
-            >
-              Tasks
-            </CoreModules.LoadingButton>
-            <CoreModules.LoadingButton
-              onClick={() => onDataExtractDownload()}
-              sx={{ width: 'unset' }}
-              loading={downloadDataExtractLoading}
-              loadingPosition="end"
-              endIcon={<AssetModules.FileDownloadIcon />}
-              variant="contained"
-              color="error"
-              className="fmtm-truncate"
-            >
-              Data Extract
-            </CoreModules.LoadingButton>
-          </div>
-          <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full fmtm-ml-4 fmtm-gap-6">
-            <CoreModules.Link
-              to={`/projectInfo/${encodedId}`}
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-end',
-                alignItems: 'flex-end',
-                textDecoration: 'none',
-                marginRight: '15px',
-              }}
-              className="fmtm-w-fit"
-            >
-              <CoreModules.Button variant="contained" color="error">
-                ProjectInfo
-              </CoreModules.Button>
-            </CoreModules.Link>
-            <CoreModules.Button
-              onClick={() => setToggleGenerateModal(true)}
-              variant="contained"
-              color="error"
-              sx={{ width: '200px', mr: '15px' }}
-              endIcon={<AssetModules.BoltIcon />}
-              className="fmtm-truncate"
-            >
-              Generate MbTiles
-            </CoreModules.Button>
-            <CoreModules.Link
-              to={`/edit-project/project-details/${encodedId}`}
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-end',
-                alignItems: 'flex-end',
-                textDecoration: 'none',
-                marginRight: '15px',
-              }}
-              className="fmtm-w-fit"
-            >
-              <CoreModules.Button variant="outlined" color="error" className="fmtm-truncate">
-                Edit Project
-              </CoreModules.Button>
-            </CoreModules.Link>
-          </div>
-          <div className="fmtm-px-1 sm:fmtm-hidden">
-            <Accordion
-              collapsed={true}
-              disableHeaderClickToggle
-              onToggle={() => {}}
-              header={<div className="fmtm-text-[#2C3038] fmtm-font-bold fmtm-text-xl">Map Legends</div>}
-              body={
-                <div className="fmtm-mt-4">
-                  <MapLegends defaultTheme={defaultTheme} />
-                </div>
-              }
-            />
-          </div>
-        </div>
+        )}
 
         {/* <ProjectMap /> */}
         {params?.id && (
@@ -522,19 +533,23 @@ const Home = () => {
         )}
       </CoreModules.Stack>
 
-      {/* project Details Tabs */}
-      <CoreModules.Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
-        {/* <BasicTabs listOfData={panelData} /> */}
-        <ActivitiesPanel
-          params={params}
-          state={state.projectTaskBoundries}
-          defaultTheme={defaultTheme}
-          map={map}
-          view={mainView}
-          mapDivPostion={y}
-          states={state}
-        />
-      </CoreModules.Stack>
+      {windowSize.width >= 640 && (
+        <div>
+          {/* project Details Tabs */}
+          <CoreModules.Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
+            {/* <BasicTabs listOfData={panelData} /> */}
+            <ActivitiesPanel
+              params={params}
+              state={state.projectTaskBoundries}
+              defaultTheme={defaultTheme}
+              map={map}
+              view={mainView}
+              mapDivPostion={y}
+              states={state}
+            />
+          </CoreModules.Stack>
+        </div>
+      )}
       {featuresLayer != undefined && (
         <TaskSectionPopup
           body={

From 7f8af1987c22de6ec2cac57368d47dcf792359bb Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Wed, 11 Oct 2023 12:54:14 +0545
Subject: [PATCH 02/21] feat (projectDetails): map - footer added to the map

---
 .../ProjectDetails/MobileFooter.tsx           | 92 +++++++++++++++++++
 src/frontend/src/shared/AssetModules.js       |  6 ++
 src/frontend/src/store/slices/ProjectSlice.ts |  4 +
 src/frontend/src/views/ProjectDetails.jsx     | 34 ++++---
 4 files changed, 121 insertions(+), 15 deletions(-)
 create mode 100644 src/frontend/src/components/ProjectDetails/MobileFooter.tsx

diff --git a/src/frontend/src/components/ProjectDetails/MobileFooter.tsx b/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
new file mode 100644
index 0000000000..dc0046f8a0
--- /dev/null
+++ b/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import AssetModules from '../../shared/AssetModules.js';
+import CoreModules from '../../shared/CoreModules';
+import { ProjectActions } from '../../store/slices/ProjectSlice';
+
+const MobileFooter = () => {
+  const dispatch = CoreModules.useAppDispatch();
+  const mobileFooterSelection = CoreModules.useAppSelector((state) => state.project.mobileFooterSelection);
+
+  console.log(mobileFooterSelection, 'mobileFooterSelection');
+
+  const footerItem = [
+    {
+      id: 'explore',
+      title: 'Explore',
+      icon: (
+        <AssetModules.LocationOnIcon
+          className={`${
+            mobileFooterSelection === 'explore' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+          } fmtm-duration-300`}
+        />
+      ),
+    },
+    {
+      id: 'projectInfo',
+      title: 'Project Info',
+      icon: (
+        <AssetModules.InfoIcon
+          className={`${
+            mobileFooterSelection === 'projectInfo' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+          } fmtm-duration-300`}
+        />
+      ),
+    },
+    {
+      id: 'activities',
+      title: 'Activities',
+      icon: (
+        <AssetModules.TaskIcon
+          className={`${
+            mobileFooterSelection === 'activities' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+          } fmtm-duration-300`}
+        />
+      ),
+    },
+    {
+      id: 'others',
+      title: 'Others',
+      icon: (
+        <AssetModules.MoreVertIcon
+          className={`${
+            mobileFooterSelection === 'others' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+          } fmtm-duration-300`}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full">
+      {/* <div className="fmtm-w-full fmtm-flex fmtm-justify-between fmtm-px-5 fmtm-bg-white fmtm-pb-4 fmtm-pt-2"> */}
+      <div className={`fmtm-w-full fmtm-grid fmtm-grid-cols-4 fmtm-bg-white fmtm-pb-4 fmtm-pt-2 fmtm-gap-5 fmtm-px-2`}>
+        {footerItem.map((item) => (
+          <div
+            key={item.id}
+            onClick={() => dispatch(ProjectActions.SetMobileFooterSelection(item.id))}
+            className="fmtm-group fmtm-cursor-pointer"
+          >
+            <div
+              className={`fmtm-w-full fmtm-flex fmtm-justify-center fmtm-py-1 fmtm-rounded-3xl fmtm-mb-1 fmtm-duration-300 ${
+                mobileFooterSelection === item.id ? 'fmtm-bg-red-100' : 'group-hover:fmtm-bg-gray-200'
+              }`}
+            >
+              <div>{item.icon}</div>
+            </div>
+            <div className="fmtm-flex fmtm-justify-center">
+              <p
+                className={`${
+                  mobileFooterSelection === item.id ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+                } fmtm-duration-300 fmtm-text-sm`}
+              >
+                {item.title}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MobileFooter;
diff --git a/src/frontend/src/shared/AssetModules.js b/src/frontend/src/shared/AssetModules.js
index 624f20cfb1..d16853f5d3 100755
--- a/src/frontend/src/shared/AssetModules.js
+++ b/src/frontend/src/shared/AssetModules.js
@@ -43,6 +43,9 @@ import {
   Settings as SettingsIcon,
   DriveFolderUpload as DriveFolderUploadIcon,
   KeyboardArrowUp as KeyboardArrowUpIcon,
+  Info as InfoIcon,
+  MoreVert as MoreVertIcon,
+  LocationOn as LocationOnIcon,
 } from '@mui/icons-material';
 import LockPng from '../assets/images/lock.png';
 import RedLockPng from '../assets/images/red-lock.png';
@@ -96,4 +99,7 @@ export default {
   SettingsIcon,
   DriveFolderUploadIcon,
   KeyboardArrowUpIcon,
+  InfoIcon,
+  MoreVertIcon,
+  LocationOnIcon,
 };
diff --git a/src/frontend/src/store/slices/ProjectSlice.ts b/src/frontend/src/store/slices/ProjectSlice.ts
index 04f80561fc..7a9f1be93f 100755
--- a/src/frontend/src/store/slices/ProjectSlice.ts
+++ b/src/frontend/src/store/slices/ProjectSlice.ts
@@ -19,6 +19,7 @@ const ProjectSlice = createSlice({
     downloadTilesLoading: false,
     downloadDataExtractLoading: false,
     taskModalStatus: false,
+    mobileFooterSelection: 'projectInfo',
   },
   reducers: {
     SetProjectTaskBoundries(state, action) {
@@ -70,6 +71,9 @@ const ProjectSlice = createSlice({
     ToggleTaskModalStatus(state, action) {
       state.taskModalStatus = action.payload;
     },
+    SetMobileFooterSelection(state, action) {
+      state.mobileFooterSelection = action.payload;
+    },
   },
 });
 
diff --git a/src/frontend/src/views/ProjectDetails.jsx b/src/frontend/src/views/ProjectDetails.jsx
index 271deb5cac..a9dbaf02fb 100755
--- a/src/frontend/src/views/ProjectDetails.jsx
+++ b/src/frontend/src/views/ProjectDetails.jsx
@@ -34,6 +34,7 @@ import MapLegends from '../components/MapLegends';
 import TaskSectionPopup from '../components/ProjectDetails/TaskSectionPopup';
 import DialogTaskActions from '../components/DialogTaskActions';
 import QrcodeComponent from '../components/QrcodeComponent';
+import MobileFooter from '../components/ProjectDetails/MobileFooter';
 
 const Home = () => {
   const dispatch = CoreModules.useAppDispatch();
@@ -515,21 +516,24 @@ const Home = () => {
 
         {/* <ProjectMap /> */}
         {params?.id && (
-          <OpenLayersMap
-            key={params.id}
-            defaultTheme={defaultTheme}
-            stateDialog={stateDialog}
-            params={params}
-            state={state}
-            taskId={taskId}
-            top={top}
-            featuresLayer={featuresLayer}
-            map={map}
-            mainView={mainView}
-            mapElement={mapElement}
-            environment={environment}
-            windowType={type}
-          />
+          <div className="fmtm-relative sm:fmtm-static">
+            <OpenLayersMap
+              key={params.id}
+              defaultTheme={defaultTheme}
+              stateDialog={stateDialog}
+              params={params}
+              state={state}
+              taskId={taskId}
+              top={top}
+              featuresLayer={featuresLayer}
+              map={map}
+              mainView={mainView}
+              mapElement={mapElement}
+              environment={environment}
+              windowType={type}
+            />
+            <MobileFooter />
+          </div>
         )}
       </CoreModules.Stack>
 

From 786cc4e5e04551450831ac3f449fecd16e1b9874 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Thu, 12 Oct 2023 13:48:42 +0545
Subject: [PATCH 03/21] fix (MobileFooter) - border top added

---
 src/frontend/src/components/ProjectDetails/MobileFooter.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/ProjectDetails/MobileFooter.tsx b/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
index dc0046f8a0..865441e783 100644
--- a/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
+++ b/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
@@ -57,9 +57,8 @@ const MobileFooter = () => {
   ];
 
   return (
-    <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full">
-      {/* <div className="fmtm-w-full fmtm-flex fmtm-justify-between fmtm-px-5 fmtm-bg-white fmtm-pb-4 fmtm-pt-2"> */}
-      <div className={`fmtm-w-full fmtm-grid fmtm-grid-cols-4 fmtm-bg-white fmtm-pb-4 fmtm-pt-2 fmtm-gap-5 fmtm-px-2`}>
+    <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px]">
+      <div className="fmtm-w-full fmtm-grid fmtm-grid-cols-4 fmtm-bg-white  fmtm-pb-4 fmtm-pt-2 fmtm-gap-5 fmtm-px-2">
         {footerItem.map((item) => (
           <div
             key={item.id}

From 651644e575bb63dcf4ab7516a75e9a34d1f37b6c Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Thu, 12 Oct 2023 13:50:11 +0545
Subject: [PATCH 04/21] feat (bottomSheet): bottomSheet component made for
 mobile device

---
 .../src/components/common/BottomSheet.tsx     | 92 +++++++++++++++++++
 src/frontend/src/index.css                    | 78 ++++++++++++++++
 2 files changed, 170 insertions(+)
 create mode 100644 src/frontend/src/components/common/BottomSheet.tsx

diff --git a/src/frontend/src/components/common/BottomSheet.tsx b/src/frontend/src/components/common/BottomSheet.tsx
new file mode 100644
index 0000000000..8035cff1c5
--- /dev/null
+++ b/src/frontend/src/components/common/BottomSheet.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const BottomSheet = ({ body, onClose }) => {
+  const sheetContentRef: any = useRef(null);
+  const bottomSheetRef: any = useRef(null);
+  const [startY, setStartY] = useState(0);
+  const [startHeight, setStartHeight] = useState(0);
+  const [currSheetHeight, setCurrSheetHeight] = useState(0);
+
+  useEffect(() => {
+    bottomSheetRef.current.classList.add('show');
+    document.body.style.overflowY = 'hidden';
+    bottomSheetRef.current.style.height = `51vh`;
+    updateSheetHeight(50);
+  }, []);
+
+  const updateSheetHeight = (height) => {
+    if (sheetContentRef.current) {
+      sheetContentRef.current.style.height = `${height}vh`;
+    }
+    bottomSheetRef.current.classList.toggle('fullscreen', height === 100);
+  };
+
+  const hideBottomSheet = () => {
+    if (bottomSheetRef.current) {
+      bottomSheetRef.current.classList.remove('show');
+    }
+    onClose();
+    document.body.style.overflowY = 'auto';
+  };
+
+  const dragStart = (e) => {
+    const pagesY = e.pageY || e.changedTouches[0].screenY;
+    setStartY(pagesY);
+    if (sheetContentRef.current) {
+      setStartHeight(parseInt(sheetContentRef.current.style.height));
+    }
+    if (bottomSheetRef.current) {
+      bottomSheetRef.current.classList.add('dragging');
+    }
+  };
+
+  const dragging = (e) => {
+    const delta = startY - (e.pageY || e.changedTouches[0].screenY);
+    const newHeight = startHeight + (delta / window.innerHeight) * 100;
+    bottomSheetRef.current.style.height = `100vh`;
+    updateSheetHeight(newHeight);
+  };
+
+  const dragStop = () => {
+    let sheetHeight;
+    bottomSheetRef.current.style.height = `${currSheetHeight + 1}vh`;
+
+    if (bottomSheetRef.current) {
+      bottomSheetRef.current.classList.remove('dragging');
+    }
+    if (sheetContentRef.current) {
+      sheetHeight = parseInt(sheetContentRef.current.style.height);
+      setCurrSheetHeight(sheetHeight);
+    }
+    sheetHeight < 25 ? hideBottomSheet() : sheetHeight > 75 ? updateSheetHeight(100) : updateSheetHeight(50);
+  };
+
+  useEffect(() => {
+    dragStop();
+  }, [currSheetHeight]);
+
+  return (
+    <div className="fmtm-absolute fmtm-bottom-[400px] fmtm-bg-white ">
+      <div className="bottom-sheet" ref={bottomSheetRef}>
+        <div ref={sheetContentRef} className="content fmtm-shadow-[30px_-10px_40px_25px_rgba(0,0,0,0.2)]">
+          <div className="header">
+            <div
+              className="drag-icon"
+              onMouseDown={dragStart}
+              onTouchStart={dragStart}
+              onMouseMove={dragging}
+              onTouchMove={dragging}
+              onMouseUp={dragStop}
+              onTouchEnd={dragStop}
+            >
+              <span></span>
+            </div>
+          </div>
+          <div className="body fmtm-overflow-y-scroll scrollbar">{body}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BottomSheet;
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index b802820e62..b28476a600 100755
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -178,3 +178,81 @@ button {
     }
   }
 }
+
+.show-modal {
+  outline: none;
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  border-radius: 6px;
+  font-size: 1.2rem;
+  padding: 15px 22px;
+  background: #4a98f7;
+  transition: 0.3s ease;
+  box-shadow: 0 10px 18px rgba(52, 87, 220, 0.18);
+}
+.show-modal:hover {
+  background: #2382f6;
+}
+.bottom-sheet {
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  opacity: 0;
+  pointer-events: none;
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-end;
+  transition: 0.1s linear;
+}
+.bottom-sheet.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+.bottom-sheet .content {
+  width: 100%;
+  position: relative;
+  background: #fff;
+  max-height: 100vh;
+  height: 50vh;
+  max-width: 1150px;
+  padding: 25px 15px;
+  transform: translateY(100%);
+  border-radius: 12px 12px 0 0;
+  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03); */
+  transition: 0.3s ease;
+  overflow: hidden;
+}
+.bottom-sheet.show .content {
+  transform: translateY(0%);
+}
+.bottom-sheet.dragging .content {
+  transition: none;
+}
+.bottom-sheet.fullscreen .content {
+  border-radius: 0;
+}
+.bottom-sheet .header {
+  display: flex;
+  justify-content: center;
+}
+.header .drag-icon {
+  cursor: grab;
+  user-select: none;
+  padding: 15px;
+  margin-top: -15px;
+  z-index: 9999px;
+}
+.header .drag-icon span {
+  height: 4px;
+  width: 40px;
+  display: block;
+  background: #c7d0e1;
+  border-radius: 50px;
+}
+.bottom-sheet .body {
+  height: 100%;
+  padding: 1px;
+}

From 70f1dc30ef91779e7820cea8e0b2d7ad5a365c3b Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Thu, 12 Oct 2023 13:53:17 +0545
Subject: [PATCH 05/21] feat (projectDetails): activities - bottomSheet made
 for activities

---
 .../MobileActivitiesContents.tsx              | 27 +++++++++++++++++++
 src/frontend/src/store/slices/ProjectSlice.ts |  2 +-
 src/frontend/src/views/ProjectDetails.jsx     | 16 +++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx

diff --git a/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx b/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx
new file mode 100644
index 0000000000..0dc1683b2c
--- /dev/null
+++ b/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import ActivitiesPanel from '../ActivitiesPanel';
+import CoreModules from '../../shared/CoreModules';
+
+const MobileActivitiesContents = ({ map, mainView, mapDivPostion }) => {
+  const params = CoreModules.useParams();
+  const state = CoreModules.useAppSelector((state) => state.project);
+  const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
+
+  return (
+    <div className="fmtm-w-full fmtm-bg-white fmtm-mb-[10vh]">
+      <CoreModules.Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
+        <ActivitiesPanel
+          params={params}
+          state={state.projectTaskBoundries}
+          defaultTheme={defaultTheme}
+          map={map}
+          view={mainView}
+          mapDivPostion={mapDivPostion}
+          states={state}
+        />
+      </CoreModules.Stack>
+    </div>
+  );
+};
+
+export default MobileActivitiesContents;
diff --git a/src/frontend/src/store/slices/ProjectSlice.ts b/src/frontend/src/store/slices/ProjectSlice.ts
index 7a9f1be93f..f853fc5296 100755
--- a/src/frontend/src/store/slices/ProjectSlice.ts
+++ b/src/frontend/src/store/slices/ProjectSlice.ts
@@ -19,7 +19,7 @@ const ProjectSlice = createSlice({
     downloadTilesLoading: false,
     downloadDataExtractLoading: false,
     taskModalStatus: false,
-    mobileFooterSelection: 'projectInfo',
+    mobileFooterSelection: 'explore',
   },
   reducers: {
     SetProjectTaskBoundries(state, action) {
diff --git a/src/frontend/src/views/ProjectDetails.jsx b/src/frontend/src/views/ProjectDetails.jsx
index a9dbaf02fb..5343d435c7 100755
--- a/src/frontend/src/views/ProjectDetails.jsx
+++ b/src/frontend/src/views/ProjectDetails.jsx
@@ -35,6 +35,9 @@ import TaskSectionPopup from '../components/ProjectDetails/TaskSectionPopup';
 import DialogTaskActions from '../components/DialogTaskActions';
 import QrcodeComponent from '../components/QrcodeComponent';
 import MobileFooter from '../components/ProjectDetails/MobileFooter';
+import MobileActivitiesContents from '../components/ProjectDetails/MobileActivitiesContents';
+import BottomSheet from '../components/common/BottomSheet';
+import MobileProjectInfoContent from '../components/ProjectDetails/MobileProjectInfoContent';
 
 const Home = () => {
   const dispatch = CoreModules.useAppDispatch();
@@ -61,6 +64,7 @@ const Home = () => {
   const downloadProjectFormLoading = CoreModules.useAppSelector((state) => state.project.downloadProjectFormLoading);
   const downloadDataExtractLoading = CoreModules.useAppSelector((state) => state.project.downloadDataExtractLoading);
   const projectBuildingGeojson = CoreModules.useAppSelector((state) => state.project.projectBuildingGeojson);
+  const mobileFooterSelection = CoreModules.useAppSelector((state) => state.project.mobileFooterSelection);
   const [toggleAction, setToggleAction] = useState(false);
 
   //snackbar handle close funtion
@@ -532,6 +536,18 @@ const Home = () => {
               environment={environment}
               windowType={type}
             />
+            {mobileFooterSelection === 'projectInfo' && (
+              <BottomSheet
+                body={<MobileProjectInfoContent projectInfo={state.projectInfo} />}
+                onClose={() => dispatch(ProjectActions.SetMobileFooterSelection('explore'))}
+              />
+            )}
+            {mobileFooterSelection === 'activities' && (
+              <BottomSheet
+                body={<MobileActivitiesContents map={map} view={mainView} mapDivPostion={y} />}
+                onClose={() => dispatch(ProjectActions.SetMobileFooterSelection('explore'))}
+              />
+            )}
             <MobileFooter />
           </div>
         )}

From f54542992a3f4634b03bb1f0f7fb0b7d457cbf7e Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Thu, 12 Oct 2023 14:15:21 +0545
Subject: [PATCH 06/21] feat (projectDetails): project info - added bottom
 sheet for project information for small screen

---
 src/frontend/src/api/Project.js               |  1 +
 .../MobileProjectInfoContent.tsx              | 31 +++++++++++++++++++
 .../src/components/common/BottomSheet.tsx     |  2 +-
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx

diff --git a/src/frontend/src/api/Project.js b/src/frontend/src/api/Project.js
index e0e5288e90..66a21d6c87 100755
--- a/src/frontend/src/api/Project.js
+++ b/src/frontend/src/api/Project.js
@@ -44,6 +44,7 @@ export const ProjectById = (url, existingProjectList, projectId) => {
             title: resp.project_info?.[0]?.name,
             location_str: resp.location_str,
             description: resp.project_info[0]?.description,
+            short_description: resp.project_info[0]?.short_description,
             num_contributors: resp.num_contributors,
             total_tasks: resp.total_tasks,
             tasks_mapped: resp.tasks_mapped,
diff --git a/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx b/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx
new file mode 100644
index 0000000000..52972813f5
--- /dev/null
+++ b/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import AssetModules from '../../shared/AssetModules';
+
+const MobileProjectInfoContent = ({ projectInfo }) => {
+  console.log('projectInfo', projectInfo);
+  return (
+    <div className="fmtm-flex fmtm-flex-col fmtm-gap-3 fmtm-mb-[10vh]">
+      <div className="fmtm-flex fmtm-gap-3 fmtm-border-b-[1px] fmtm-pb-2">
+        <AssetModules.InfoIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} />
+        <p className="fmtm-text-2xl">Project Information</p>
+      </div>
+      <div className="fmtm-flex fmtm-gap-3">
+        <p className="fmtm-text-2xl fmtm-text-primaryRed">#{projectInfo?.id}</p>
+      </div>
+      <div className="fmtm-flex fmtm-gap-3">
+        <p className="fmtm-text-xl">Name: </p>
+        <p className="fmtm-text-xl">{projectInfo?.title}</p>
+      </div>
+      <div className="fmtm-flex fmtm-flex-col">
+        <p className="fmtm-text-xl">Short Description:</p>
+        <p className="fmtm-text-lg fmtm-text-grey-700">{projectInfo?.short_description}</p>
+      </div>
+      <div className="fmtm-flex fmtm-flex-col">
+        <p className="fmtm-text-xl">Description:</p>
+        <p className="fmtm-text-lg fmtm-text-grey-700">{projectInfo?.description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default MobileProjectInfoContent;
diff --git a/src/frontend/src/components/common/BottomSheet.tsx b/src/frontend/src/components/common/BottomSheet.tsx
index 8035cff1c5..1e44b51d21 100644
--- a/src/frontend/src/components/common/BottomSheet.tsx
+++ b/src/frontend/src/components/common/BottomSheet.tsx
@@ -66,7 +66,7 @@ const BottomSheet = ({ body, onClose }) => {
   }, [currSheetHeight]);
 
   return (
-    <div className="fmtm-absolute fmtm-bottom-[400px] fmtm-bg-white ">
+    <div className="fmtm-absolute fmtm-bottom-[400px] fmtm-bg-white sm:fmtm-hidden">
       <div className="bottom-sheet" ref={bottomSheetRef}>
         <div ref={sheetContentRef} className="content fmtm-shadow-[30px_-10px_40px_25px_rgba(0,0,0,0.2)]">
           <div className="header">

From e8008f7f1f189b07161088204c816be20d825b4a Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Thu, 12 Oct 2023 14:44:08 +0545
Subject: [PATCH 07/21] feat (projectDetails) - fmtm logo and back button added
 for small screen

---
 src/frontend/src/views/ProjectDetails.jsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/frontend/src/views/ProjectDetails.jsx b/src/frontend/src/views/ProjectDetails.jsx
index 5343d435c7..521f1ceba6 100755
--- a/src/frontend/src/views/ProjectDetails.jsx
+++ b/src/frontend/src/views/ProjectDetails.jsx
@@ -22,6 +22,7 @@ import { HomeActions } from '../store/slices/HomeSlice';
 import CoreModules from '../shared/CoreModules';
 import AssetModules from '../shared/AssetModules';
 import GeoJSON from 'ol/format/GeoJSON';
+import FmtmLogo from '../assets/images/hotLog.png';
 
 import Overlay from 'ol/Overlay';
 import GenerateMbTiles from '../components/GenerateMbTiles';
@@ -38,10 +39,12 @@ import MobileFooter from '../components/ProjectDetails/MobileFooter';
 import MobileActivitiesContents from '../components/ProjectDetails/MobileActivitiesContents';
 import BottomSheet from '../components/common/BottomSheet';
 import MobileProjectInfoContent from '../components/ProjectDetails/MobileProjectInfoContent';
+import { useNavigate } from 'react-router-dom';
 
 const Home = () => {
   const dispatch = CoreModules.useAppDispatch();
   const params = CoreModules.useParams();
+  const navigate = useNavigate();
 
   const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
   const state = CoreModules.useAppSelector((state) => state.project);
@@ -536,6 +539,12 @@ const Home = () => {
               environment={environment}
               windowType={type}
             />
+            <div
+              className="fmtm-absolute fmtm-top-4 fmtm-left-4 fmtm-bg-white fmtm-rounded-full fmtm-p-1 hover:fmtm-bg-red-50 fmtm-duration-300 fmtm-border-[1px] sm:fmtm-hidden fmtm-cursor-pointer"
+              onClick={() => navigate('/')}
+            >
+              <AssetModules.ArrowBackIcon className="fmtm-text-grey-800" />
+            </div>
             {mobileFooterSelection === 'projectInfo' && (
               <BottomSheet
                 body={<MobileProjectInfoContent projectInfo={state.projectInfo} />}
@@ -548,6 +557,12 @@ const Home = () => {
                 onClose={() => dispatch(ProjectActions.SetMobileFooterSelection('explore'))}
               />
             )}
+            {mobileFooterSelection === 'explore' && (
+              <div className="fmtm-absolute fmtm-bottom-[5.8rem] sm:fmtm-hidden">
+                <img src={FmtmLogo} alt="Hot Fmtm Logo" className="fmtm-ml-2 fmtm-z-10 fmtm-w-[5.2rem]" />
+              </div>
+            )}
+
             <MobileFooter />
           </div>
         )}

From 36069159b297086fc85fd9974644d985eda326a0 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Thu, 12 Oct 2023 16:55:01 +0545
Subject: [PATCH 08/21] fix (Accordion): interface added to props

---
 src/frontend/src/components/common/Accordion.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/common/Accordion.tsx b/src/frontend/src/components/common/Accordion.tsx
index deadf63fad..a0e460d3bc 100644
--- a/src/frontend/src/components/common/Accordion.tsx
+++ b/src/frontend/src/components/common/Accordion.tsx
@@ -1,6 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import AssetModules from '../../shared/AssetModules';
 
+interface IAccordion {
+  collapsed?: boolean;
+  header: any;
+  body: any;
+  className?: string;
+  onToggle: any;
+  description?: string;
+  disableHeaderClickToggle?: boolean;
+}
+
 export default function Accordion({
   collapsed: isCollapsed,
   header,
@@ -9,7 +19,7 @@ export default function Accordion({
   onToggle,
   description,
   disableHeaderClickToggle,
-}) {
+}: IAccordion) {
   const [collapsed, setCollapsed] = useState(isCollapsed);
 
   useEffect(() => {

From bc65a2424e78843dade9690255944407ecae2027 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Thu, 12 Oct 2023 17:00:34 +0545
Subject: [PATCH 09/21] feat/fix (projectDetails): projectDetails component
 projectOption section  splitted to projectOption component. projectOptions
 added for others bottomSheet

---
 .../ProjectDetails/ProjectOptions.tsx         | 161 +++++++++++++++
 src/frontend/src/views/ProjectDetails.jsx     | 189 +++---------------
 2 files changed, 191 insertions(+), 159 deletions(-)
 create mode 100644 src/frontend/src/components/ProjectDetails/ProjectOptions.tsx

diff --git a/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx b/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
new file mode 100644
index 0000000000..af7ab76991
--- /dev/null
+++ b/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
@@ -0,0 +1,161 @@
+import Accordion from '../../components/common/Accordion';
+import React, { useState } from 'react';
+import CoreModules from '../../shared/CoreModules';
+import AssetModules from '../../shared/AssetModules';
+import environment from '../../environment';
+import { DownloadDataExtract, DownloadProjectForm } from '../../api/Project';
+import MapLegends from '../../components/MapLegends';
+
+const ProjectOptions = ({ setToggleGenerateModal }) => {
+  const dispatch = CoreModules.useAppDispatch();
+  const params = CoreModules.useParams();
+
+  const [toggleAction, setToggleAction] = useState(false);
+  const downloadProjectFormLoading = CoreModules.useAppSelector((state) => state.project.downloadProjectFormLoading);
+  const downloadDataExtractLoading = CoreModules.useAppSelector((state) => state.project.downloadDataExtractLoading);
+  const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
+
+  const encodedId = params.id;
+  const decodedId = environment.decode(encodedId);
+
+  const handleDownload = (downloadType) => {
+    if (downloadType === 'form') {
+      dispatch(
+        DownloadProjectForm(`${import.meta.env.VITE_API_URL}/projects/download_form/${decodedId}/`, downloadType),
+      );
+    } else if (downloadType === 'geojson') {
+      dispatch(
+        DownloadProjectForm(`${import.meta.env.VITE_API_URL}/projects/${decodedId}/download_tasks`, downloadType),
+      );
+    }
+  };
+  const onDataExtractDownload = () => {
+    dispatch(
+      DownloadDataExtract(`${import.meta.env.VITE_API_URL}/projects/features/download/?project_id=${decodedId}`),
+    );
+  };
+  return (
+    <div className="fmtm-mt-4">
+      <div>
+        <div
+          className={`fmtm-flex fmtm-gap-5 fmtm-py-4 sm:fmtm-hidden fmtm-justify-between  fmtm-items-center fmtm-mx-7 fmtm-mb-2 ${
+            toggleAction ? 'fmtm-border-b-[#929DB3] fmtm-border-b-[1px]' : ''
+          }`}
+        >
+          <p className="fmtm-text-xl fmtm-italic">Project Options</p>
+          <div
+            className={
+              'fmtm-rounded-full fmtm-shadow-gray-400 fmtm-w-8 fmtm-h-8 fmtm-flex fmtm-justify-center fmtm-items-center fmtm-shadow-lg fmtm-cursor-pointer'
+            }
+            onClick={() => setToggleAction(!toggleAction)}
+          >
+            <AssetModules.ArrowRightIcon
+              color=""
+              style={{ fontSize: 32 }}
+              className={`${toggleAction ? 'fmtm-rotate-90' : ''}`}
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className={`fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-6 lg:fmtm-gap-0 fmtm-px-3 sm:fmtm-px-0 ${
+          toggleAction ? '' : 'fmtm-hidden sm:fmtm-flex'
+        }`}
+      >
+        <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6 fmtm-ml-4">
+          <CoreModules.LoadingButton
+            onClick={() => handleDownload('form')}
+            sx={{ width: 'unset' }}
+            loading={downloadProjectFormLoading.type === 'form' && downloadProjectFormLoading.loading}
+            loadingPosition="end"
+            endIcon={<AssetModules.FileDownloadIcon />}
+            variant="contained"
+            color="error"
+          >
+            Form
+          </CoreModules.LoadingButton>
+          <CoreModules.LoadingButton
+            onClick={() => handleDownload('geojson')}
+            sx={{ width: 'unset' }}
+            loading={downloadProjectFormLoading.type === 'geojson' && downloadProjectFormLoading.loading}
+            loadingPosition="end"
+            endIcon={<AssetModules.FileDownloadIcon />}
+            variant="contained"
+            color="error"
+          >
+            Tasks
+          </CoreModules.LoadingButton>
+          <CoreModules.LoadingButton
+            onClick={() => onDataExtractDownload()}
+            sx={{ width: 'unset' }}
+            loading={downloadDataExtractLoading}
+            loadingPosition="end"
+            endIcon={<AssetModules.FileDownloadIcon />}
+            variant="contained"
+            color="error"
+            className="fmtm-truncate"
+          >
+            Data Extract
+          </CoreModules.LoadingButton>
+        </div>
+        <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full fmtm-ml-4 fmtm-gap-6">
+          <CoreModules.Link
+            to={`/projectInfo/${encodedId}`}
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              alignItems: 'flex-end',
+              textDecoration: 'none',
+              marginRight: '15px',
+            }}
+            className="fmtm-w-fit"
+          >
+            <CoreModules.Button variant="contained" color="error">
+              ProjectInfo
+            </CoreModules.Button>
+          </CoreModules.Link>
+          <CoreModules.Button
+            onClick={() => setToggleGenerateModal(true)}
+            variant="contained"
+            color="error"
+            sx={{ width: '200px', mr: '15px' }}
+            endIcon={<AssetModules.BoltIcon />}
+            className="fmtm-truncate"
+          >
+            Generate MbTiles
+          </CoreModules.Button>
+          <CoreModules.Link
+            to={`/edit-project/project-details/${encodedId}`}
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              alignItems: 'flex-end',
+              textDecoration: 'none',
+              marginRight: '15px',
+            }}
+            className="fmtm-w-fit"
+          >
+            <CoreModules.Button variant="outlined" color="error" className="fmtm-truncate">
+              Edit Project
+            </CoreModules.Button>
+          </CoreModules.Link>
+        </div>
+        <div className="fmtm-px-1 sm:fmtm-hidden">
+          <Accordion
+            collapsed={true}
+            disableHeaderClickToggle
+            onToggle={() => {}}
+            header={<div className="fmtm-text-[#2C3038] fmtm-font-bold fmtm-text-xl">Map Legends</div>}
+            body={
+              <div className="fmtm-mt-4">
+                <MapLegends defaultTheme={defaultTheme} />
+              </div>
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectOptions;
diff --git a/src/frontend/src/views/ProjectDetails.jsx b/src/frontend/src/views/ProjectDetails.jsx
index 521f1ceba6..6276baea7e 100755
--- a/src/frontend/src/views/ProjectDetails.jsx
+++ b/src/frontend/src/views/ProjectDetails.jsx
@@ -6,7 +6,7 @@ import MapDescriptionComponents from '../components/MapDescriptionComponents';
 import ActivitiesPanel from '../components/ActivitiesPanel';
 import OpenLayersMap from '../components/OpenLayersMap';
 import environment from '../environment';
-import { DownloadDataExtract, DownloadProjectForm, ProjectById } from '../api/Project';
+import { ProjectById } from '../api/Project';
 import { ProjectActions } from '../store/slices/ProjectSlice';
 import CustomizedSnackbar from '../utilities/CustomizedSnackbar';
 import { defaults } from 'ol/control/defaults';
@@ -29,8 +29,6 @@ import GenerateMbTiles from '../components/GenerateMbTiles';
 import { ProjectBuildingGeojsonService } from '../api/SubmissionService';
 import { get } from 'ol/proj';
 import { buildingStyle, basicGeojsonTemplate } from '../utilities/mapUtils';
-import Button from '../../src/components/common/Button';
-import Accordion from '../../src/components/common/Accordion';
 import MapLegends from '../components/MapLegends';
 import TaskSectionPopup from '../components/ProjectDetails/TaskSectionPopup';
 import DialogTaskActions from '../components/DialogTaskActions';
@@ -40,6 +38,7 @@ import MobileActivitiesContents from '../components/ProjectDetails/MobileActivit
 import BottomSheet from '../components/common/BottomSheet';
 import MobileProjectInfoContent from '../components/ProjectDetails/MobileProjectInfoContent';
 import { useNavigate } from 'react-router-dom';
+import ProjectOptions from '../components/ProjectDetails/ProjectOptions';
 
 const Home = () => {
   const dispatch = CoreModules.useAppDispatch();
@@ -64,8 +63,6 @@ const Home = () => {
   const decodedId = environment.decode(encodedId);
   const { windowSize, type } = WindowDimension();
   const { y } = OnScroll(map, windowSize.width);
-  const downloadProjectFormLoading = CoreModules.useAppSelector((state) => state.project.downloadProjectFormLoading);
-  const downloadDataExtractLoading = CoreModules.useAppSelector((state) => state.project.downloadDataExtractLoading);
   const projectBuildingGeojson = CoreModules.useAppSelector((state) => state.project.projectBuildingGeojson);
   const mobileFooterSelection = CoreModules.useAppSelector((state) => state.project.mobileFooterSelection);
   const [toggleAction, setToggleAction] = useState(false);
@@ -286,44 +283,25 @@ const Home = () => {
 
   TasksLayer(map, mainView, featuresLayer);
 
-  const handleDownload = (downloadType) => {
-    if (downloadType === 'form') {
-      dispatch(
-        DownloadProjectForm(`${import.meta.env.VITE_API_URL}/projects/download_form/${decodedId}/`, downloadType),
-      );
-    } else if (downloadType === 'geojson') {
-      dispatch(
-        DownloadProjectForm(`${import.meta.env.VITE_API_URL}/projects/${decodedId}/download_tasks`, downloadType),
-      );
-    }
-  };
-  const onDataExtractDownload = () => {
-    dispatch(
-      DownloadDataExtract(`${import.meta.env.VITE_API_URL}/projects/features/download/?project_id=${decodedId}`),
-    );
-  };
-
   return (
-    <CoreModules.Stack spacing={2}>
+    <div>
       {/* Customized Modal For Generate Tiles */}
-      {windowSize.width >= 640 && (
-        <div>
-          <GenerateMbTiles
-            toggleGenerateModal={toggleGenerateModal}
-            setToggleGenerateModal={setToggleGenerateModal}
-            projectInfo={state.projectInfo}
-          />
+      <div>
+        <GenerateMbTiles
+          toggleGenerateModal={toggleGenerateModal}
+          setToggleGenerateModal={setToggleGenerateModal}
+          projectInfo={state.projectInfo}
+        />
 
-          {/* Home snackbar */}
-          <CustomizedSnackbar
-            duration={stateSnackBar.duration}
-            open={stateSnackBar.open}
-            variant={stateSnackBar.variant}
-            message={stateSnackBar.message}
-            handleClose={handleClose}
-          />
-        </div>
-      )}
+        {/* Home snackbar */}
+        <CustomizedSnackbar
+          duration={stateSnackBar.duration}
+          open={stateSnackBar.open}
+          variant={stateSnackBar.variant}
+          message={stateSnackBar.message}
+          handleClose={handleClose}
+        />
+      </div>
 
       {/* Top project details heading medium dimension*/}
       {windowSize.width >= 640 && (
@@ -400,124 +378,7 @@ const Home = () => {
         {windowSize.width >= 640 && (
           <div>
             <MapDescriptionComponents defaultTheme={defaultTheme} state={state} type={type} />
-            <div>
-              <div
-                className={`fmtm-flex fmtm-gap-5 fmtm-py-4 sm:fmtm-hidden fmtm-justify-between  fmtm-items-center fmtm-mx-7 fmtm-mb-2 ${
-                  toggleAction ? 'fmtm-border-b-[#929DB3] fmtm-border-b-[1px]' : ''
-                }`}
-              >
-                <p className="fmtm-text-xl fmtm-italic">Project Options</p>
-                <div
-                  className={
-                    'fmtm-rounded-full fmtm-shadow-gray-400 fmtm-w-8 fmtm-h-8 fmtm-flex fmtm-justify-center fmtm-items-center fmtm-shadow-lg fmtm-cursor-pointer'
-                  }
-                  onClick={() => setToggleAction(!toggleAction)}
-                >
-                  <AssetModules.ArrowRightIcon
-                    color=""
-                    style={{ fontSize: 32 }}
-                    className={`${toggleAction ? 'fmtm-rotate-90' : ''}`}
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className={`fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-6 lg:fmtm-gap-0 fmtm-px-3 sm:fmtm-px-0 ${
-                toggleAction ? '' : 'fmtm-hidden sm:fmtm-flex'
-              }`}
-            >
-              <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6 fmtm-ml-4">
-                <CoreModules.LoadingButton
-                  onClick={() => handleDownload('form')}
-                  sx={{ width: 'unset' }}
-                  loading={downloadProjectFormLoading.type === 'form' && downloadProjectFormLoading.loading}
-                  loadingPosition="end"
-                  endIcon={<AssetModules.FileDownloadIcon />}
-                  variant="contained"
-                  color="error"
-                >
-                  Form
-                </CoreModules.LoadingButton>
-                <CoreModules.LoadingButton
-                  onClick={() => handleDownload('geojson')}
-                  sx={{ width: 'unset' }}
-                  loading={downloadProjectFormLoading.type === 'geojson' && downloadProjectFormLoading.loading}
-                  loadingPosition="end"
-                  endIcon={<AssetModules.FileDownloadIcon />}
-                  variant="contained"
-                  color="error"
-                >
-                  Tasks
-                </CoreModules.LoadingButton>
-                <CoreModules.LoadingButton
-                  onClick={() => onDataExtractDownload()}
-                  sx={{ width: 'unset' }}
-                  loading={downloadDataExtractLoading}
-                  loadingPosition="end"
-                  endIcon={<AssetModules.FileDownloadIcon />}
-                  variant="contained"
-                  color="error"
-                  className="fmtm-truncate"
-                >
-                  Data Extract
-                </CoreModules.LoadingButton>
-              </div>
-              <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full fmtm-ml-4 fmtm-gap-6">
-                <CoreModules.Link
-                  to={`/projectInfo/${encodedId}`}
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    alignItems: 'flex-end',
-                    textDecoration: 'none',
-                    marginRight: '15px',
-                  }}
-                  className="fmtm-w-fit"
-                >
-                  <CoreModules.Button variant="contained" color="error">
-                    ProjectInfo
-                  </CoreModules.Button>
-                </CoreModules.Link>
-                <CoreModules.Button
-                  onClick={() => setToggleGenerateModal(true)}
-                  variant="contained"
-                  color="error"
-                  sx={{ width: '200px', mr: '15px' }}
-                  endIcon={<AssetModules.BoltIcon />}
-                  className="fmtm-truncate"
-                >
-                  Generate MbTiles
-                </CoreModules.Button>
-                <CoreModules.Link
-                  to={`/edit-project/project-details/${encodedId}`}
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    alignItems: 'flex-end',
-                    textDecoration: 'none',
-                    marginRight: '15px',
-                  }}
-                  className="fmtm-w-fit"
-                >
-                  <CoreModules.Button variant="outlined" color="error" className="fmtm-truncate">
-                    Edit Project
-                  </CoreModules.Button>
-                </CoreModules.Link>
-              </div>
-              <div className="fmtm-px-1 sm:fmtm-hidden">
-                <Accordion
-                  collapsed={true}
-                  disableHeaderClickToggle
-                  onToggle={() => {}}
-                  header={<div className="fmtm-text-[#2C3038] fmtm-font-bold fmtm-text-xl">Map Legends</div>}
-                  body={
-                    <div className="fmtm-mt-4">
-                      <MapLegends defaultTheme={defaultTheme} />
-                    </div>
-                  }
-                />
-              </div>
-            </div>
+            <ProjectOptions setToggleGenerateModal={setToggleGenerateModal} />
           </div>
         )}
 
@@ -562,6 +423,16 @@ const Home = () => {
                 <img src={FmtmLogo} alt="Hot Fmtm Logo" className="fmtm-ml-2 fmtm-z-10 fmtm-w-[5.2rem]" />
               </div>
             )}
+            {mobileFooterSelection === 'others' && (
+              <BottomSheet
+                body={
+                  <div className="fmtm-mb-[10vh]">
+                    <ProjectOptions setToggleGenerateModal={setToggleGenerateModal} />
+                  </div>
+                }
+                onClose={() => dispatch(ProjectActions.SetMobileFooterSelection('explore'))}
+              />
+            )}
 
             <MobileFooter />
           </div>
@@ -595,7 +466,7 @@ const Home = () => {
           }
         />
       )}
-    </CoreModules.Stack>
+    </div>
   );
 };
 

From c17cb6d2515bf62b7a09042a7bf1fa183509d703 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Fri, 13 Oct 2023 09:26:10 +0545
Subject: [PATCH 10/21] fix (projectDetails): bottomSheet - converted css to
 tailwind css, converted dom manipulation to react states

---
 .../src/components/common/BottomSheet.tsx     | 58 ++++++++------
 src/frontend/src/index.css                    | 78 -------------------
 2 files changed, 34 insertions(+), 102 deletions(-)

diff --git a/src/frontend/src/components/common/BottomSheet.tsx b/src/frontend/src/components/common/BottomSheet.tsx
index 1e44b51d21..b59ec29cd8 100644
--- a/src/frontend/src/components/common/BottomSheet.tsx
+++ b/src/frontend/src/components/common/BottomSheet.tsx
@@ -6,9 +6,12 @@ const BottomSheet = ({ body, onClose }) => {
   const [startY, setStartY] = useState(0);
   const [startHeight, setStartHeight] = useState(0);
   const [currSheetHeight, setCurrSheetHeight] = useState(0);
+  const [show, setShow] = useState(true);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isFullScreen, setIsFullScreen] = useState(false);
 
   useEffect(() => {
-    bottomSheetRef.current.classList.add('show');
+    setShow(true);
     document.body.style.overflowY = 'hidden';
     bottomSheetRef.current.style.height = `51vh`;
     updateSheetHeight(50);
@@ -18,13 +21,16 @@ const BottomSheet = ({ body, onClose }) => {
     if (sheetContentRef.current) {
       sheetContentRef.current.style.height = `${height}vh`;
     }
-    bottomSheetRef.current.classList.toggle('fullscreen', height === 100);
+    if (height === 100) {
+      setIsFullScreen(true);
+    } else {
+      setIsFullScreen(false);
+    }
   };
 
   const hideBottomSheet = () => {
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.classList.remove('show');
-    }
+    setShow(false);
+
     onClose();
     document.body.style.overflowY = 'auto';
   };
@@ -32,12 +38,9 @@ const BottomSheet = ({ body, onClose }) => {
   const dragStart = (e) => {
     const pagesY = e.pageY || e.changedTouches[0].screenY;
     setStartY(pagesY);
-    if (sheetContentRef.current) {
-      setStartHeight(parseInt(sheetContentRef.current.style.height));
-    }
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.classList.add('dragging');
-    }
+    setStartHeight(parseInt(sheetContentRef.current.style.height));
+
+    setIsDragging(true);
   };
 
   const dragging = (e) => {
@@ -51,13 +54,10 @@ const BottomSheet = ({ body, onClose }) => {
     let sheetHeight;
     bottomSheetRef.current.style.height = `${currSheetHeight + 1}vh`;
 
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.classList.remove('dragging');
-    }
-    if (sheetContentRef.current) {
-      sheetHeight = parseInt(sheetContentRef.current.style.height);
-      setCurrSheetHeight(sheetHeight);
-    }
+    setIsDragging(false);
+    sheetHeight = parseInt(sheetContentRef.current.style.height);
+    setCurrSheetHeight(sheetHeight);
+
     sheetHeight < 25 ? hideBottomSheet() : sheetHeight > 75 ? updateSheetHeight(100) : updateSheetHeight(50);
   };
 
@@ -67,11 +67,21 @@ const BottomSheet = ({ body, onClose }) => {
 
   return (
     <div className="fmtm-absolute fmtm-bottom-[400px] fmtm-bg-white sm:fmtm-hidden">
-      <div className="bottom-sheet" ref={bottomSheetRef}>
-        <div ref={sheetContentRef} className="content fmtm-shadow-[30px_-10px_40px_25px_rgba(0,0,0,0.2)]">
-          <div className="header">
+      <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'
+        }`}
+        ref={bottomSheetRef}
+      >
+        <div
+          ref={sheetContentRef}
+          className={`bottom-sheet-content fmtm-shadow-[30px_-10px_40px_25px_rgba(0,0,0,0.2)] fmtm-w-full fmtm-relative fmtm-bg-white fmtm-max-h-[100vh] fmtm-h-[50vh] fmtm-max-w-[1150px] fmtm-py-6 fmtm-px-4 fmtm-duration-300 fmtm-ease-in-out fmtm-overflow-hidden ${
+            !show ? 'fmtm-translate-y-[100%]' : 'fmtm-translate-y-[0%]'
+          } ${isDragging ? 'fmtm-transition-none' : ''} ${isFullScreen ? 'fmtm-rounded-none' : 'fmtm-rounded-t-2xl'}`}
+        >
+          <div className="header fmtm-flex fmtm-justify-center">
             <div
-              className="drag-icon"
+              className="drag-icon fmtm-cursor-grab fmtm-select-none fmtm-p-4 -fmtm-mt-4 fmtm-z-[9999]"
               onMouseDown={dragStart}
               onTouchStart={dragStart}
               onMouseMove={dragging}
@@ -79,10 +89,10 @@ const BottomSheet = ({ body, onClose }) => {
               onMouseUp={dragStop}
               onTouchEnd={dragStop}
             >
-              <span></span>
+              <span className="fmtm-h-1 fmtm-w-[2.5rem] fmtm-block fmtm-bg-[#c7d0e1] fmtm-rounded-full"></span>
             </div>
           </div>
-          <div className="body fmtm-overflow-y-scroll scrollbar">{body}</div>
+          <div className="body fmtm-overflow-y-scroll scrollbar fmtm-h-full fmtm-p-[1px]">{body}</div>
         </div>
       </div>
     </div>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index b28476a600..b802820e62 100755
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -178,81 +178,3 @@ button {
     }
   }
 }
-
-.show-modal {
-  outline: none;
-  border: none;
-  cursor: pointer;
-  color: #fff;
-  border-radius: 6px;
-  font-size: 1.2rem;
-  padding: 15px 22px;
-  background: #4a98f7;
-  transition: 0.3s ease;
-  box-shadow: 0 10px 18px rgba(52, 87, 220, 0.18);
-}
-.show-modal:hover {
-  background: #2382f6;
-}
-.bottom-sheet {
-  position: fixed;
-  width: 100%;
-  left: 0;
-  bottom: 0;
-  display: flex;
-  opacity: 0;
-  pointer-events: none;
-  align-items: center;
-  flex-direction: column;
-  justify-content: flex-end;
-  transition: 0.1s linear;
-}
-.bottom-sheet.show {
-  opacity: 1;
-  pointer-events: auto;
-}
-.bottom-sheet .content {
-  width: 100%;
-  position: relative;
-  background: #fff;
-  max-height: 100vh;
-  height: 50vh;
-  max-width: 1150px;
-  padding: 25px 15px;
-  transform: translateY(100%);
-  border-radius: 12px 12px 0 0;
-  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03); */
-  transition: 0.3s ease;
-  overflow: hidden;
-}
-.bottom-sheet.show .content {
-  transform: translateY(0%);
-}
-.bottom-sheet.dragging .content {
-  transition: none;
-}
-.bottom-sheet.fullscreen .content {
-  border-radius: 0;
-}
-.bottom-sheet .header {
-  display: flex;
-  justify-content: center;
-}
-.header .drag-icon {
-  cursor: grab;
-  user-select: none;
-  padding: 15px;
-  margin-top: -15px;
-  z-index: 9999px;
-}
-.header .drag-icon span {
-  height: 4px;
-  width: 40px;
-  display: block;
-  background: #c7d0e1;
-  border-radius: 50px;
-}
-.bottom-sheet .body {
-  height: 100%;
-  padding: 1px;
-}

From 807627ccd906da920cc7c825683ad0a37490c89e Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Fri, 13 Oct 2023 11:46:12 +0545
Subject: [PATCH 11/21] fix (projectDetails): map - mapcontrols button gap
 reduced for small screens

---
 src/frontend/src/components/OpenLayersMap.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/OpenLayersMap.jsx b/src/frontend/src/components/OpenLayersMap.jsx
index bcd7641b83..55cf0f65dd 100755
--- a/src/frontend/src/components/OpenLayersMap.jsx
+++ b/src/frontend/src/components/OpenLayersMap.jsx
@@ -181,7 +181,9 @@ const OpenLayersMap = ({
         btnDiv.className = 'ol-unselectable ol-control';
         index == 0
           ? (btnDiv.style.top = `${(btnsPosition = btnsPosition + 2)}%`)
-          : (btnDiv.style.top = `${(btnsPosition = btnsPosition + 9)}%`);
+          : windowSize.width >= 640
+          ? (btnDiv.style.top = `${(btnsPosition = btnsPosition + 9)}%`)
+          : (btnDiv.style.top = `${(btnsPosition = btnsPosition + 6)}%`);
         btnDiv.appendChild(btn);
         var control = new Control({
           element: btnDiv,

From d7b59b84946fb0977c26471eed93d45d69487ab5 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Fri, 13 Oct 2023 11:48:17 +0545
Subject: [PATCH 12/21] fix (bottomSheet): fmtm logo move bottom sheet
 expand/contract

---
 src/frontend/src/components/common/BottomSheet.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/common/BottomSheet.tsx b/src/frontend/src/components/common/BottomSheet.tsx
index b59ec29cd8..536a1a369f 100644
--- a/src/frontend/src/components/common/BottomSheet.tsx
+++ b/src/frontend/src/components/common/BottomSheet.tsx
@@ -1,8 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
+import FmtmLogo from '../../assets/images/hotLog.png';
 
 const BottomSheet = ({ body, onClose }) => {
   const sheetContentRef: any = useRef(null);
   const bottomSheetRef: any = useRef(null);
+  const logoRef: any = useRef(null);
   const [startY, setStartY] = useState(0);
   const [startHeight, setStartHeight] = useState(0);
   const [currSheetHeight, setCurrSheetHeight] = useState(0);
@@ -20,6 +22,9 @@ const BottomSheet = ({ body, onClose }) => {
   const updateSheetHeight = (height) => {
     if (sheetContentRef.current) {
       sheetContentRef.current.style.height = `${height}vh`;
+      const top = sheetContentRef.current.getBoundingClientRect().top;
+      const logoHeight = logoRef.current.getBoundingClientRect().height;
+      logoRef.current.style.top = `${top - logoHeight}px`;
     }
     if (height === 100) {
       setIsFullScreen(true);
@@ -66,16 +71,19 @@ const BottomSheet = ({ body, onClose }) => {
   }, [currSheetHeight]);
 
   return (
-    <div className="fmtm-absolute fmtm-bottom-[400px] fmtm-bg-white sm:fmtm-hidden">
+    <div className="fmtm-absolute fmtm-bottom-[200px] fmtm-bg-white sm:fmtm-hidden">
       <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'
         }`}
         ref={bottomSheetRef}
       >
+        <div className={`fmtm-fixed fmtm-left-0`} ref={logoRef}>
+          <img src={FmtmLogo} alt="Hot Fmtm Logo" className="fmtm-ml-2 fmtm-z-10 fmtm-w-[5.2rem]  fmtm-mb-4" />
+        </div>
         <div
           ref={sheetContentRef}
-          className={`bottom-sheet-content fmtm-shadow-[30px_-10px_40px_25px_rgba(0,0,0,0.2)] fmtm-w-full fmtm-relative fmtm-bg-white fmtm-max-h-[100vh] fmtm-h-[50vh] fmtm-max-w-[1150px] fmtm-py-6 fmtm-px-4 fmtm-duration-300 fmtm-ease-in-out fmtm-overflow-hidden ${
+          className={`bottom-sheet-content fmtm-shadow-[30px_-10px_10px_5px_rgba(0,0,0,0.1)] fmtm-w-full fmtm-relative fmtm-bg-white fmtm-max-h-[100vh] fmtm-h-[50vh] fmtm-max-w-[1150px] fmtm-py-6 fmtm-px-4 fmtm-duration-300 fmtm-ease-in-out fmtm-overflow-hidden ${
             !show ? 'fmtm-translate-y-[100%]' : 'fmtm-translate-y-[0%]'
           } ${isDragging ? 'fmtm-transition-none' : ''} ${isFullScreen ? 'fmtm-rounded-none' : 'fmtm-rounded-t-2xl'}`}
         >
@@ -89,7 +97,7 @@ const BottomSheet = ({ body, onClose }) => {
               onMouseUp={dragStop}
               onTouchEnd={dragStop}
             >
-              <span className="fmtm-h-1 fmtm-w-[2.5rem] fmtm-block fmtm-bg-[#c7d0e1] fmtm-rounded-full"></span>
+              <span className="fmtm-h-1 fmtm-w-[2.5rem] fmtm-block fmtm-bg-[#c7d0e1] fmtm-rounded-full hover:fmtm-bg-primaryRed"></span>
             </div>
           </div>
           <div className="body fmtm-overflow-y-scroll scrollbar fmtm-h-full fmtm-p-[1px]">{body}</div>

From 9577d4cf1af2fff6e75e9894e091dc94c09caa71 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Fri, 13 Oct 2023 11:59:35 +0545
Subject: [PATCH 13/21] fix (projectDetails): margins/paddings updated for
 mobile view

---
 src/frontend/src/components/ActivitiesPanel.jsx             | 2 +-
 .../src/components/ProjectDetails/ProjectOptions.tsx        | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/ActivitiesPanel.jsx b/src/frontend/src/components/ActivitiesPanel.jsx
index f85cdfd6d7..f2ab3d369a 100755
--- a/src/frontend/src/components/ActivitiesPanel.jsx
+++ b/src/frontend/src/components/ActivitiesPanel.jsx
@@ -114,7 +114,7 @@ const ActivitiesPanel = ({ defaultTheme, state, params, map, view, mapDivPostion
   }, [taskDisplay, state, searchText]);
 
   return (
-    <CoreModules.Stack p={2.5} width={'100%'} spacing={2}>
+    <CoreModules.Stack width={'100%'} spacing={2} className="sm:fmtm-p-4">
       <CoreModules.Typography
         variant="h1"
         fontSize={defaultTheme.typography.htmlFontSize}
diff --git a/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx b/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
index af7ab76991..70814f7e25 100644
--- a/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
+++ b/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
@@ -38,7 +38,7 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
     <div className="fmtm-mt-4">
       <div>
         <div
-          className={`fmtm-flex fmtm-gap-5 fmtm-py-4 sm:fmtm-hidden fmtm-justify-between  fmtm-items-center fmtm-mx-7 fmtm-mb-2 ${
+          className={`fmtm-flex fmtm-gap-5 fmtm-py-4 sm:fmtm-hidden fmtm-justify-between  fmtm-items-center fmtm-mx-4 sm:fmtm-mx-7 fmtm-mb-2 ${
             toggleAction ? 'fmtm-border-b-[#929DB3] fmtm-border-b-[1px]' : ''
           }`}
         >
@@ -62,7 +62,7 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
           toggleAction ? '' : 'fmtm-hidden sm:fmtm-flex'
         }`}
       >
-        <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6 fmtm-ml-4">
+        <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6 fmtm-ml-2 sm:fmtm-ml-4">
           <CoreModules.LoadingButton
             onClick={() => handleDownload('form')}
             sx={{ width: 'unset' }}
@@ -98,7 +98,7 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
             Data Extract
           </CoreModules.LoadingButton>
         </div>
-        <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full fmtm-ml-4 fmtm-gap-6">
+        <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full fmtm-ml-2 sm:fmtm-ml-4 fmtm-gap-6">
           <CoreModules.Link
             to={`/projectInfo/${encodedId}`}
             style={{

From 9c9418ec95b6690af5ff6adfe8ba008f801db733 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Fri, 13 Oct 2023 07:38:42 +0000
Subject: [PATCH 14/21] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 CONTRIBUTING.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2eb27e340d..322f93b478 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -17,6 +17,7 @@ Right now, we are in the process of building the prototype. We warmly welcome yo
 Create pull requests (PRs) for changes that you think are needed. We would really appreciate your help!
 
 Skills with the following would be beneficial:
+
 - Python
 - FastAPI
 - Javascript

From c1e4c1e7aea2bb535c6967e972e43d244b9bb56c Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Tue, 17 Oct 2023 11:24:48 +0545
Subject: [PATCH 15/21] fix (Icons): new icon added

---
 src/frontend/src/shared/AssetModules.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/frontend/src/shared/AssetModules.js b/src/frontend/src/shared/AssetModules.js
index d16853f5d3..1c42f19b05 100755
--- a/src/frontend/src/shared/AssetModules.js
+++ b/src/frontend/src/shared/AssetModules.js
@@ -46,6 +46,7 @@ import {
   Info as InfoIcon,
   MoreVert as MoreVertIcon,
   LocationOn as LocationOnIcon,
+  LegendToggle as LegendToggleIcon,
 } from '@mui/icons-material';
 import LockPng from '../assets/images/lock.png';
 import RedLockPng from '../assets/images/red-lock.png';
@@ -102,4 +103,5 @@ export default {
   InfoIcon,
   MoreVertIcon,
   LocationOnIcon,
+  LegendToggleIcon,
 };

From 17276c72415afcddc07450615c5f28956818aa01 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Tue, 17 Oct 2023 11:28:21 +0545
Subject: [PATCH 16/21] fix (projectDetails): accordion for projectOptions for
 small screen removed, mapLegend removed from projectOptions

---
 .../ProjectDetails/ProjectOptions.tsx         | 35 +++++++------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx b/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
index 70814f7e25..d5c5d546a1 100644
--- a/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
+++ b/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
@@ -1,10 +1,8 @@
-import Accordion from '../../components/common/Accordion';
 import React, { useState } from 'react';
 import CoreModules from '../../shared/CoreModules';
 import AssetModules from '../../shared/AssetModules';
 import environment from '../../environment';
 import { DownloadDataExtract, DownloadProjectForm } from '../../api/Project';
-import MapLegends from '../../components/MapLegends';
 
 const ProjectOptions = ({ setToggleGenerateModal }) => {
   const dispatch = CoreModules.useAppDispatch();
@@ -13,7 +11,6 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
   const [toggleAction, setToggleAction] = useState(false);
   const downloadProjectFormLoading = CoreModules.useAppSelector((state) => state.project.downloadProjectFormLoading);
   const downloadDataExtractLoading = CoreModules.useAppSelector((state) => state.project.downloadDataExtractLoading);
-  const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
 
   const encodedId = params.id;
   const decodedId = environment.decode(encodedId);
@@ -35,8 +32,8 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
     );
   };
   return (
-    <div className="fmtm-mt-4">
-      <div>
+    <div className="sm:fmtm-mt-4">
+      {/* <div>
         <div
           className={`fmtm-flex fmtm-gap-5 fmtm-py-4 sm:fmtm-hidden fmtm-justify-between  fmtm-items-center fmtm-mx-4 sm:fmtm-mx-7 fmtm-mb-2 ${
             toggleAction ? 'fmtm-border-b-[#929DB3] fmtm-border-b-[1px]' : ''
@@ -56,13 +53,20 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
             />
           </div>
         </div>
-      </div>
-      <div
+      </div> */}
+      {/* <div
         className={`fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-6 lg:fmtm-gap-0 fmtm-px-3 sm:fmtm-px-0 ${
           toggleAction ? '' : 'fmtm-hidden sm:fmtm-flex'
         }`}
+      > */}
+      <div className="fmtm-flex fmtm-gap-3 fmtm-border-b-[1px] fmtm-pb-2 fmtm-mb-4 sm:fmtm-hidden">
+        <AssetModules.ListViewIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} />
+        <p className="fmtm-text-2xl">Project Options</p>
+      </div>
+      <div
+        className={`fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-6 lg:fmtm-gap-0 fmtm-px-3 sm:fmtm-px-0 sm:fmtm-flex`}
       >
-        <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6 fmtm-ml-2 sm:fmtm-ml-4">
+        <div className="fmtm-w-full fmtm-flex fmtm-flex-col fmtm-items-start sm:fmtm-flex-row  sm:fmtm-justify-center lg:fmtm-justify-start sm:fmtm-items-center fmtm-gap-6  sm:fmtm-ml-4">
           <CoreModules.LoadingButton
             onClick={() => handleDownload('form')}
             sx={{ width: 'unset' }}
@@ -98,7 +102,7 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
             Data Extract
           </CoreModules.LoadingButton>
         </div>
-        <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full fmtm-ml-2 sm:fmtm-ml-4 fmtm-gap-6">
+        <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-justify-center lg:fmtm-justify-end fmtm-w-full sm:fmtm-ml-4 fmtm-gap-6">
           <CoreModules.Link
             to={`/projectInfo/${encodedId}`}
             style={{
@@ -140,19 +144,6 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
             </CoreModules.Button>
           </CoreModules.Link>
         </div>
-        <div className="fmtm-px-1 sm:fmtm-hidden">
-          <Accordion
-            collapsed={true}
-            disableHeaderClickToggle
-            onToggle={() => {}}
-            header={<div className="fmtm-text-[#2C3038] fmtm-font-bold fmtm-text-xl">Map Legends</div>}
-            body={
-              <div className="fmtm-mt-4">
-                <MapLegends defaultTheme={defaultTheme} />
-              </div>
-            }
-          />
-        </div>
       </div>
     </div>
   );

From 96b0ec5a4016652d4212d20fcc638a750dde16f4 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Tue, 17 Oct 2023 11:30:16 +0545
Subject: [PATCH 17/21] fix (projectDetails): mapLegends seperated to different
 bottomSheet for small screen view

---
 src/frontend/src/components/MapLegends.jsx | 47 ++++++++++++----------
 src/frontend/src/views/ProjectDetails.jsx  | 12 +++++-
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/components/MapLegends.jsx b/src/frontend/src/components/MapLegends.jsx
index c3d1fd506a..bf81032db9 100755
--- a/src/frontend/src/components/MapLegends.jsx
+++ b/src/frontend/src/components/MapLegends.jsx
@@ -68,28 +68,33 @@ const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatu
     //     );
     //   })}
     // </CoreModules.Stack>
-
-    <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
-      {MapDetails.map((data, index) => {
-        return (
-          <div key={index} className="fmtm-flex fmtm-items-center fmtm-gap-3">
-            <div className="fmtm-border-[1px] fmtm-border-gray-200">
-              {data.type !== 'locked' ? (
-                <CoreModules.IconButton
-                  style={{ backgroundColor: data.color, borderRadius: 0 }}
-                  {...iconBtnProps}
-                  color="primary"
-                  component="label"
-                  className="fmtm-w-10 fmtm-h-10"
-                ></CoreModules.IconButton>
-              ) : (
-                <AssetModules.LockIcon sx={{ fontSize: '40px' }} />
-              )}
+    <div>
+      <div className="fmtm-flex fmtm-gap-3 fmtm-border-b-[1px] fmtm-pb-2 fmtm-mb-4">
+        <AssetModules.LegendToggleIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} />
+        <p className="fmtm-text-2xl">Map Legend</p>
+      </div>
+      <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
+        {MapDetails.map((data, index) => {
+          return (
+            <div key={index} className="fmtm-flex fmtm-items-center fmtm-gap-3">
+              <div className="fmtm-border-[1px] fmtm-border-gray-200">
+                {data.type !== 'locked' ? (
+                  <CoreModules.IconButton
+                    style={{ backgroundColor: data.color, borderRadius: 0 }}
+                    {...iconBtnProps}
+                    color="primary"
+                    component="label"
+                    className="fmtm-w-10 fmtm-h-10"
+                  ></CoreModules.IconButton>
+                ) : (
+                  <AssetModules.LockIcon sx={{ fontSize: '40px' }} />
+                )}
+              </div>
+              <p className="fmtm-text-lg">{data.value}</p>
             </div>
-            <p className="fmtm-text-lg">{data.value}</p>
-          </div>
-        );
-      })}
+          );
+        })}
+      </div>
     </div>
   );
 };
diff --git a/src/frontend/src/views/ProjectDetails.jsx b/src/frontend/src/views/ProjectDetails.jsx
index 6276baea7e..ae2960eb34 100755
--- a/src/frontend/src/views/ProjectDetails.jsx
+++ b/src/frontend/src/views/ProjectDetails.jsx
@@ -423,10 +423,20 @@ const Home = () => {
                 <img src={FmtmLogo} alt="Hot Fmtm Logo" className="fmtm-ml-2 fmtm-z-10 fmtm-w-[5.2rem]" />
               </div>
             )}
+            {mobileFooterSelection === 'mapLegend' && (
+              <BottomSheet
+                body={
+                  <div className="fmtm-mb-[12vh]">
+                    <MapLegends defaultTheme={defaultTheme} />
+                  </div>
+                }
+                onClose={() => dispatch(ProjectActions.SetMobileFooterSelection('explore'))}
+              />
+            )}
             {mobileFooterSelection === 'others' && (
               <BottomSheet
                 body={
-                  <div className="fmtm-mb-[10vh]">
+                  <div className="fmtm-mb-[12vh]">
                     <ProjectOptions setToggleGenerateModal={setToggleGenerateModal} />
                   </div>
                 }

From 8c32f70bcdc7e4995a1c40655510958754ccb793 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Tue, 17 Oct 2023 11:32:34 +0545
Subject: [PATCH 18/21] fix (projectDetails): mapLegend added to mobile view
 footer, UI enhancements

---
 .../ProjectDetails/MobileFooter.tsx           | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/components/ProjectDetails/MobileFooter.tsx b/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
index 865441e783..26a3afce25 100644
--- a/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
+++ b/src/frontend/src/components/ProjectDetails/MobileFooter.tsx
@@ -7,8 +7,6 @@ const MobileFooter = () => {
   const dispatch = CoreModules.useAppDispatch();
   const mobileFooterSelection = CoreModules.useAppSelector((state) => state.project.mobileFooterSelection);
 
-  console.log(mobileFooterSelection, 'mobileFooterSelection');
-
   const footerItem = [
     {
       id: 'explore',
@@ -43,6 +41,18 @@ const MobileFooter = () => {
         />
       ),
     },
+    {
+      id: 'mapLegend',
+      title: 'Legend',
+      icon: (
+        <AssetModules.LegendToggleIcon
+          className={`${
+            mobileFooterSelection === 'mapLegend' ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+          } fmtm-duration-300`}
+        />
+      ),
+    },
+    ,
     {
       id: 'others',
       title: 'Others',
@@ -55,30 +65,33 @@ const MobileFooter = () => {
       ),
     },
   ];
-
   return (
     <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px]">
-      <div className="fmtm-w-full fmtm-grid fmtm-grid-cols-4 fmtm-bg-white  fmtm-pb-4 fmtm-pt-2 fmtm-gap-5 fmtm-px-2">
+      <div
+        className={`fmtm-w-full fmtm-grid fmtm-grid-cols-${
+          footerItem.length - 1
+        } fmtm-bg-white  fmtm-pb-16 fmtm-pt-2 fmtm-gap-5 fmtm-px-2`}
+      >
         {footerItem.map((item) => (
           <div
-            key={item.id}
-            onClick={() => dispatch(ProjectActions.SetMobileFooterSelection(item.id))}
+            key={item?.id}
+            onClick={() => dispatch(ProjectActions.SetMobileFooterSelection(item?.id))}
             className="fmtm-group fmtm-cursor-pointer"
           >
             <div
               className={`fmtm-w-full fmtm-flex fmtm-justify-center fmtm-py-1 fmtm-rounded-3xl fmtm-mb-1 fmtm-duration-300 ${
-                mobileFooterSelection === item.id ? 'fmtm-bg-red-100' : 'group-hover:fmtm-bg-gray-200'
+                mobileFooterSelection === item?.id ? 'fmtm-bg-red-100' : 'group-hover:fmtm-bg-gray-200'
               }`}
             >
-              <div>{item.icon}</div>
+              <div>{item?.icon}</div>
             </div>
             <div className="fmtm-flex fmtm-justify-center">
               <p
                 className={`${
-                  mobileFooterSelection === item.id ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
-                } fmtm-duration-300 fmtm-text-sm`}
+                  mobileFooterSelection === item?.id ? 'fmtm-text-primaryRed' : 'fmtm-text-gray-500'
+                } fmtm-duration-300 fmtm-text-xs fmtm-whitespace-nowrap`}
               >
-                {item.title}
+                {item?.title}
               </p>
             </div>
           </div>

From fe2268270831230079372d6bcb20f5b0dcd6922f Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Tue, 17 Oct 2023 11:33:52 +0545
Subject: [PATCH 19/21] fix (projectDetails): mobile browser view - UI
 adjustments for mobile browser view

---
 .../src/components/ProjectDetails/MobileActivitiesContents.tsx | 2 +-
 .../src/components/ProjectDetails/MobileProjectInfoContent.tsx | 3 +--
 src/frontend/src/components/common/BottomSheet.tsx             | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx b/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx
index 0dc1683b2c..d8cd5e6764 100644
--- a/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx
+++ b/src/frontend/src/components/ProjectDetails/MobileActivitiesContents.tsx
@@ -8,7 +8,7 @@ const MobileActivitiesContents = ({ map, mainView, mapDivPostion }) => {
   const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
 
   return (
-    <div className="fmtm-w-full fmtm-bg-white fmtm-mb-[10vh]">
+    <div className="fmtm-w-full fmtm-bg-white fmtm-mb-[12vh]">
       <CoreModules.Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
         <ActivitiesPanel
           params={params}
diff --git a/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx b/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx
index 52972813f5..ff15c16a12 100644
--- a/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx
+++ b/src/frontend/src/components/ProjectDetails/MobileProjectInfoContent.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import AssetModules from '../../shared/AssetModules';
 
 const MobileProjectInfoContent = ({ projectInfo }) => {
-  console.log('projectInfo', projectInfo);
   return (
-    <div className="fmtm-flex fmtm-flex-col fmtm-gap-3 fmtm-mb-[10vh]">
+    <div className="fmtm-flex fmtm-flex-col fmtm-gap-3 fmtm-mb-[12vh]">
       <div className="fmtm-flex fmtm-gap-3 fmtm-border-b-[1px] fmtm-pb-2">
         <AssetModules.InfoIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} />
         <p className="fmtm-text-2xl">Project Information</p>
diff --git a/src/frontend/src/components/common/BottomSheet.tsx b/src/frontend/src/components/common/BottomSheet.tsx
index 536a1a369f..2cb349f925 100644
--- a/src/frontend/src/components/common/BottomSheet.tsx
+++ b/src/frontend/src/components/common/BottomSheet.tsx
@@ -63,7 +63,7 @@ const BottomSheet = ({ body, onClose }) => {
     sheetHeight = parseInt(sheetContentRef.current.style.height);
     setCurrSheetHeight(sheetHeight);
 
-    sheetHeight < 25 ? hideBottomSheet() : sheetHeight > 75 ? updateSheetHeight(100) : updateSheetHeight(50);
+    sheetHeight < 25 ? hideBottomSheet() : sheetHeight > 75 ? updateSheetHeight(93) : updateSheetHeight(50);
   };
 
   useEffect(() => {

From 3f1be3f956fc66cf804eba3dadd6b68b11e039f9 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Tue, 17 Oct 2023 12:26:15 +0545
Subject: [PATCH 20/21] fix (projectDetails): mapLegend - seperated component
 for rendering legend list

---
 src/frontend/src/components/MapLegends.jsx | 50 ++++++++++++----------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/components/MapLegends.jsx b/src/frontend/src/components/MapLegends.jsx
index bf81032db9..bbcaafa2c6 100755
--- a/src/frontend/src/components/MapLegends.jsx
+++ b/src/frontend/src/components/MapLegends.jsx
@@ -46,6 +46,33 @@ const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatu
       type: 'locked',
     },
   ];
+
+  const legendListItem = () => {
+    return (
+      <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
+        {MapDetails.map((data, index) => {
+          return (
+            <div key={index} className="fmtm-flex fmtm-items-center fmtm-gap-3">
+              <div className="fmtm-border-[1px] fmtm-border-gray-200">
+                {data.type !== 'locked' ? (
+                  <CoreModules.IconButton
+                    style={{ backgroundColor: data.color, borderRadius: 0 }}
+                    {...iconBtnProps}
+                    color="primary"
+                    component="label"
+                    className="fmtm-w-10 fmtm-h-10"
+                  ></CoreModules.IconButton>
+                ) : (
+                  <AssetModules.LockIcon sx={{ fontSize: '40px' }} />
+                )}
+              </div>
+              <p className="fmtm-text-lg">{data.value}</p>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
   return (
     // <CoreModules.Stack direction={direction} spacing={spacing}>
     //   {MapDetails.map((data, index) => {
@@ -73,28 +100,7 @@ const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatu
         <AssetModules.LegendToggleIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} />
         <p className="fmtm-text-2xl">Map Legend</p>
       </div>
-      <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
-        {MapDetails.map((data, index) => {
-          return (
-            <div key={index} className="fmtm-flex fmtm-items-center fmtm-gap-3">
-              <div className="fmtm-border-[1px] fmtm-border-gray-200">
-                {data.type !== 'locked' ? (
-                  <CoreModules.IconButton
-                    style={{ backgroundColor: data.color, borderRadius: 0 }}
-                    {...iconBtnProps}
-                    color="primary"
-                    component="label"
-                    className="fmtm-w-10 fmtm-h-10"
-                  ></CoreModules.IconButton>
-                ) : (
-                  <AssetModules.LockIcon sx={{ fontSize: '40px' }} />
-                )}
-              </div>
-              <p className="fmtm-text-lg">{data.value}</p>
-            </div>
-          );
-        })}
-      </div>
+      {legendListItem()}
     </div>
   );
 };

From d43e841317894f699b3da710b30cc50d9155e7e6 Mon Sep 17 00:00:00 2001
From: NSUWAL123 <suwalnishit@gmail.com>
Date: Tue, 17 Oct 2023 13:23:38 +0545
Subject: [PATCH 21/21] fix (projectDetails): mapLegend - seperated component
 for rendering legend list

---
 src/frontend/src/components/MapLegends.jsx | 44 +++++++++++-----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/components/MapLegends.jsx b/src/frontend/src/components/MapLegends.jsx
index bbcaafa2c6..8da0e8c7f1 100755
--- a/src/frontend/src/components/MapLegends.jsx
+++ b/src/frontend/src/components/MapLegends.jsx
@@ -47,29 +47,23 @@ const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatu
     },
   ];
 
-  const legendListItem = () => {
+  const LegendListItem = ({ data }) => {
     return (
-      <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
-        {MapDetails.map((data, index) => {
-          return (
-            <div key={index} className="fmtm-flex fmtm-items-center fmtm-gap-3">
-              <div className="fmtm-border-[1px] fmtm-border-gray-200">
-                {data.type !== 'locked' ? (
-                  <CoreModules.IconButton
-                    style={{ backgroundColor: data.color, borderRadius: 0 }}
-                    {...iconBtnProps}
-                    color="primary"
-                    component="label"
-                    className="fmtm-w-10 fmtm-h-10"
-                  ></CoreModules.IconButton>
-                ) : (
-                  <AssetModules.LockIcon sx={{ fontSize: '40px' }} />
-                )}
-              </div>
-              <p className="fmtm-text-lg">{data.value}</p>
-            </div>
-          );
-        })}
+      <div className="fmtm-flex fmtm-items-center fmtm-gap-3">
+        <div className="fmtm-border-[1px] fmtm-border-gray-200">
+          {data.type !== 'locked' ? (
+            <CoreModules.IconButton
+              style={{ backgroundColor: data.color, borderRadius: 0 }}
+              {...iconBtnProps}
+              color="primary"
+              component="label"
+              className="fmtm-w-10 fmtm-h-10"
+            ></CoreModules.IconButton>
+          ) : (
+            <AssetModules.LockIcon sx={{ fontSize: '40px' }} />
+          )}
+        </div>
+        <p className="fmtm-text-lg">{data.value}</p>
       </div>
     );
   };
@@ -100,7 +94,11 @@ const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatu
         <AssetModules.LegendToggleIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} />
         <p className="fmtm-text-2xl">Map Legend</p>
       </div>
-      {legendListItem()}
+      <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
+        {MapDetails.map((data, index) => {
+          return <LegendListItem data={data} key={index} />;
+        })}
+      </div>
     </div>
   );
 };