refactor(frontend): ui padding tweak & enhancements (#1750)

* fix(style): styles update * fix(createProject): createProject flow style fix * fix(mainView): remove padding for project page small screen * fix(projectDetailsV2): height style fix * fix(primaryAppBar): cursor pointer add to logo * fix(projectInfo): style fix
hotosm · Aug 14, 2024 · 17e23cf · 17e23cf
1 parent d512d23
commit 17e23cf
Show file tree

Hide file tree

Showing 22 changed files with 171 additions and 196 deletions.
diff --git a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx
@@ -5,9 +5,9 @@ import { useNavigate } from 'react-router-dom';
 const CreateEditOrganizationHeader = ({ organizationId }: { organizationId: string }) => {
   const navigate = useNavigate();
   return (
-    <div className="fmtm-px-5 fmtm-border-b-white fmtm-border-[1px] fmtm-bg-[#F5F5F5]">
+    <div className="fmtm-border-b-white fmtm-border-b-[1px] fmtm-bg-[#F5F5F5]">
       <div className="fmtm-flex fmtm-justify-between fmtm-items-center">
-        <div className="fmtm-pt-3 fmtm-pb-1">
+        <div className="fmtm-pb-1">
           <h1 className="sm:fmtm-text-xl md:fmtm-text-2xl">
             {organizationId ? 'EDIT YOUR ORGANIZATION' : 'REGISTER YOUR ORGANIZATION'}
           </h1>

diff --git a/src/frontend/src/components/LoginPopup.tsx b/src/frontend/src/components/LoginPopup.tsx
@@ -78,7 +78,7 @@ const LoginPopup = () => {
   };
 
   return (
-    <div>
+    <>
       <Modal
         open={loginModalOpen}
         description={<LoginDescription />}
@@ -87,7 +87,7 @@ const LoginPopup = () => {
         }}
         className="!fmtm-max-w-[35rem]"
       />
-    </div>
+    </>
   );
 };
 

diff --git a/src/frontend/src/components/ProjectDetailsV2/ProjectInfo.tsx b/src/frontend/src/components/ProjectDetailsV2/ProjectInfo.tsx
@@ -35,7 +35,7 @@ const ProjectInfo: React.FC = () => {
   ).length;
 
   return (
-    <div className="fmtm-flex fmtm-flex-col fmtm-gap-5 fmtm-mt-3  fmtm-h-[50vh] fmtm-overflow-y-scroll scrollbar fmtm-pr-1">
+    <div className="fmtm-flex fmtm-flex-col fmtm-gap-5 fmtm-mt-3  fmtm-overflow-y-scroll scrollbar fmtm-pr-1">
       <div>
         <p className="fmtm-font-bold">Description</p>
         {projectDetailsLoading ? (

diff --git a/src/frontend/src/components/createnewproject/CreateProjectHeader.tsx b/src/frontend/src/components/createnewproject/CreateProjectHeader.tsx
@@ -5,9 +5,9 @@ import { useNavigate } from 'react-router-dom';
 const CreateProjectHeader = () => {
   const navigate = useNavigate();
   return (
-    <div className="fmtm-px-5 fmtm-border-b-white fmtm-border-[1px] fmtm-bg-gray-100">
+    <div className="fmtm-border-b fmtm-border-b-white">
       <div className="fmtm-flex fmtm-justify-between fmtm-items-center">
-        <div className="fmtm-pt-3 fmtm-pb-1">
+        <div className="fmtm-pb-1">
           <h1 className="sm:fmtm-text-xl md:fmtm-text-2xl">CREATE NEW PROJECT</h1>
           <p className="sm:fmtm-text-sm md:fmtm-text-lg fmtm-text-gray-500">
             Setup your field mapping project following the five comprehensive steps.

diff --git a/src/frontend/src/components/createnewproject/DataExtract.tsx b/src/frontend/src/components/createnewproject/DataExtract.tsx
@@ -222,8 +222,8 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
   }, []);
 
   return (
-    <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row">
-      <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6">
+    <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row fmtm-h-full">
+      <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6 lg:fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
         <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Map Features</h6>
         <p className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
           <span>You may either choose to use OSM data, or upload your own data for the mapping project.</span>
@@ -234,7 +234,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
           </span>{' '}
         </p>
       </div>
-      <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] lg:fmtm-h-[60vh] xl:fmtm-h-[58vh] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">
+      <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">
         <div className="fmtm-w-full fmtm-flex fmtm-gap-6 md:fmtm-gap-14 fmtm-flex-col md:fmtm-flex-row fmtm-h-full">
           <form
             onSubmit={handleSubmit}

diff --git a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
@@ -104,8 +104,8 @@ const ProjectDetailsForm = ({ flag }) => {
   }, [organisationList]);
 
   return (
-    <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row">
-      <div className="fmtm-bg-white xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6">
+    <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row fmtm-h-full">
+      <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6 lg:fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
         <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Project Details</h6>
         <div className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
           <span>
@@ -128,7 +128,7 @@ const ProjectDetailsForm = ({ flag }) => {
         </div>
       </div>
       <form
-        className="xl:fmtm-w-[83%] lg:fmtm-h-[60vh] xl:fmtm-h-[58vh] fmtm-bg-white fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar"
+        className="xl:fmtm-w-[83%] fmtm-bg-white fmtm-px-11 fmtm-h-full fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar"
         onSubmit={handleSubmit}
       >
         <div className="fmtm-flex fmtm-flex-col fmtm-gap-6 xl:fmtm-w-[50%]">

diff --git a/src/frontend/src/components/createnewproject/SelectForm.tsx b/src/frontend/src/components/createnewproject/SelectForm.tsx
@@ -82,8 +82,8 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
     }
   }, [customFormFile]);
   return (
-    <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row">
-      <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6">
+    <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row fmtm-h-full">
+      <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6 lg:fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
         <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Select Category</h6>
         <p className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
           <span>
@@ -104,7 +104,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
           </span>
         </p>
       </div>
-      <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] lg:fmtm-h-[60vh] xl:fmtm-h-[58vh] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">
+      <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
         <div className="fmtm-w-full fmtm-flex fmtm-gap-6 md:fmtm-gap-14 fmtm-flex-col md:fmtm-flex-row fmtm-h-full">
           <form onSubmit={handleSubmit} className="fmtm-flex fmtm-flex-col lg:fmtm-w-[40%] fmtm-justify-between">
             <div className="fmtm-flex fmtm-flex-col  fmtm-gap-6">

diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -233,9 +233,9 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customDataExtractUpload
   const totalSteps = dividedTaskGeojson?.features ? dividedTaskGeojson?.features?.length : parsedTaskGeojsonCount;
   return (
     <>
-      <form onSubmit={handleSubmit}>
-        <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row">
-          <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6">
+      <form onSubmit={handleSubmit} className="fmtm-h-full">
+        <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row fmtm-h-full">
+          <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6 lg:fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
             <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Split Tasks</h6>
             <p className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
               <span>You may choose how to divide an area into tasks for field mapping</span>
@@ -247,7 +247,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customDataExtractUpload
               </span>
             </p>
           </div>
-          <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] lg:fmtm-h-[60vh] xl:fmtm-h-[58vh] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">
+          <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">
             <div className="fmtm-w-full fmtm-flex fmtm-gap-6 md:fmtm-gap-14 fmtm-flex-col md:fmtm-flex-row fmtm-h-full">
               <div className="fmtm-flex fmtm-flex-col fmtm-gap-6 lg:fmtm-w-[40%] fmtm-justify-between">
                 <div>

diff --git a/src/frontend/src/components/createnewproject/UploadArea.tsx b/src/frontend/src/components/createnewproject/UploadArea.tsx
@@ -204,8 +204,8 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl
   }, [totalAreaSelection]);
 
   return (
-    <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row">
-      <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6">
+    <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row fmtm-h-full">
+      <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6 lg:fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
         <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Upload Area</h6>
         <div className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
           <span>You can choose to upload the AOI. Note: The file upload only supports .geojson format. </span>
@@ -216,7 +216,7 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl
           <span>The total area of the AOI is also calculated and displayed on the screen.</span>
         </div>
       </div>
-      <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] lg:fmtm-h-[60vh] xl:fmtm-h-[58vh] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">
+      <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] fmtm-h-full fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">
         <div className="fmtm-w-full fmtm-flex fmtm-gap-6 md:fmtm-gap-14 fmtm-flex-col md:fmtm-flex-row fmtm-h-full">
           <form
             onSubmit={(e) => {
@@ -325,7 +325,7 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl
               <Button btnText="NEXT" btnType="primary" type="submit" className="fmtm-font-bold" />
             </div>
           </form>
-          <div className="fmtm-w-full lg:fmtm-w-[60%] fmtm-flex fmtm-flex-col fmtm-gap-6 fmtm-bg-gray-300 fmtm-h-[60vh] lg:fmtm-h-full">
+          <div className="fmtm-w-full lg:fmtm-w-[60%] fmtm-flex fmtm-flex-col fmtm-gap-6 fmtm-bg-gray-300 fmtm-h-full">
             <NewDefineAreaMap
               drawToggle={drawToggle}
               uploadedOrDrawnGeojsonFile={drawnGeojson}

diff --git a/src/frontend/src/components/home/HomePageFilters.tsx b/src/frontend/src/components/home/HomePageFilters.tsx
@@ -114,7 +114,7 @@ const HomePageFilters = ({ onSearch, filteredProjectCount, totalProjectCount }:
       {/* full Searchables container in md,lg,xl size */}
 
       {/* Create New Project Button  */}
-      <div className="fmtm-px-4 fmtm-py-3 ">
+      <div>
         <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-items-center fmtm-gap-4">
           <h5 className="fmtm-text-2xl">PROJECTS</h5>
           <CoreModules.Link

diff --git a/src/frontend/src/utilities/MappingHeader.tsx b/src/frontend/src/utilities/MappingHeader.tsx
@@ -1,20 +1,17 @@
 import React from 'react';
-import CoreModules from '@/shared/CoreModules';
 
 const MappingHeader = () => {
   return (
-    <CoreModules.Box sx={{ display: 'flex', justifyContent: 'space-between', padding: '1rem', fontSize: '14px' }}>
-      <CoreModules.Typography color="error" sx={{ fontSize: '14px' }}>
-        Mapping our world together
-      </CoreModules.Typography>
-      <CoreModules.Link
-        to="https://www.hotosm.org/"
-        style={{ textDecoration: 'none', color: '#d73f3e' }}
-        target="_blank"
+    <div className="fmtm-flex fmtm-justify-between fmtm-px-[0.938rem] fmtm-py-[0.625rem]">
+      <p className="fmtm-text-[0.813rem] fmtm-text-primaryRed">Mapping our world together</p>
+      <a
+        href="https://www.hotosm.org/"
+        className="fmtm-text-[0.813rem] fmtm-text-primaryRed fmtm-cursor-pointer"
+        target="_"
       >
         hotosm.org
-      </CoreModules.Link>
-    </CoreModules.Box>
+      </a>
+    </div>
   );
 };
 

diff --git a/src/frontend/src/utilities/PrimaryAppBar.tsx b/src/frontend/src/utilities/PrimaryAppBar.tsx
@@ -8,7 +8,7 @@ import { LoginActions } from '@/store/slices/LoginSlice';
 import { ProjectActions } from '@/store/slices/ProjectSlice';
 import { revokeCookie } from '@/utilfunctions/login';
 import { useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import logo from '@/assets/images/hotLog.png';
 import LoginPopup from '@/components/LoginPopup';
 
@@ -75,46 +75,31 @@ export default function PrimaryAppBar() {
         position="static"
         sx={{ boxShadow: 0, borderBottom: '1px solid #e1e0e0', borderTop: '1px solid #e1e0e0' }}
       >
-        <CoreModules.Toolbar>
-          <img src={logo} alt="FMTM Logo" onClick={() => navigate('/')} className="fmtm-w-[5.5rem] sm:fmtm-w-28" />
-
-          {/* Tabs switch added */}
-          <CoreModules.Tabs
-            sx={{
-              marginLeft: '2%',
-              flexGrow: 20,
-              display: {
-                xs: 'none',
-                sm: 'none',
-                md: 'block',
-                lg: 'block',
-              },
-            }}
-            className="header-tabs"
-          >
-            <CoreModules.Link to={'/'} style={{ color: defaultTheme.palette.black }}>
-              <CoreModules.Tab
-                label="EXPLORE PROJECTS"
-                sx={{
-                  borderBottom: activeTab === 0 ? '2.5px solid #2c3038' : 'none',
-                  '&:hover': { backgroundColor: '#ffff' },
-                  fontSize: 16,
-                }}
-                onClick={() => setActiveTab(0)}
-              />
-            </CoreModules.Link>
-            <CoreModules.Link to={'/organisation'} style={{ color: defaultTheme.palette.black }}>
-              <CoreModules.Tab
-                label="MANAGE ORGANIZATIONS"
-                sx={{
-                  borderBottom: activeTab === 1 ? '2.5px solid #2c3038' : 'none',
-                  '&:hover': { backgroundColor: '#fff' },
-                  fontSize: 16,
-                }}
-                onClick={() => setActiveTab(1)}
-              />
-            </CoreModules.Link>
-          </CoreModules.Tabs>
+        <div className="fmtm-flex fmtm-items-center fmtm-px-4">
+          <img
+            src={logo}
+            alt="FMTM Logo"
+            onClick={() => navigate('/')}
+            className="fmtm-w-[5.188rem] fmtm-min-w-[5.188rem] fmtm-cursor-pointer"
+          />
+          <div className="fmtm-hidden lg:fmtm-flex fmtm-items-center fmtm-gap-8 fmtm-ml-8">
+            <Link
+              to="/"
+              className={`fmtm-uppercase fmtm-text-base fmtm-text-[#717171] hover:fmtm-text-[#3f3d3d] fmtm-duration-200 ${
+                activeTab === 0 ? 'fmtm-border-[#706E6E]' : 'fmtm-border-white'
+              } fmtm-pb-1 fmtm-border-b-2`}
+            >
+              Explore Projects
+            </Link>
+            <Link
+              to="/organisation"
+              className={`fmtm-uppercase fmtm-text-base fmtm-text-[#717171] hover:fmtm-text-[#3f3d3d] fmtm-duration-200 ${
+                activeTab === 1 ? 'fmtm-border-[#706E6E]' : 'fmtm-border-white'
+              } fmtm-pb-1 fmtm-border-b-2`}
+            >
+              Manage Organizations
+            </Link>
+          </div>
           <CoreModules.Stack sx={{ flexGrow: 1 }} />
 
           {/* position changed */}
@@ -176,7 +161,7 @@ export default function PrimaryAppBar() {
               <AssetModules.MenuIcon />
             </CoreModules.IconButton>
           </CoreModules.Stack>
-        </CoreModules.Toolbar>
+        </div>
       </CoreModules.AppBar>
     </CoreModules.Stack>
   );

diff --git a/src/frontend/src/views/CreateEditOrganization.tsx b/src/frontend/src/views/CreateEditOrganization.tsx
@@ -34,7 +34,7 @@ const CreateEditOrganization = () => {
   return (
     <div className="fmtm-bg-[#F5F5F5]">
       <CreateEditOrganizationHeader organizationId={organizationId} />
-      <div className="fmtm-box-border fmtm-border-[1px] fmtm-border-t-white fmtm-border-t-[0px] fmtm-px-5 fmtm-py-4">
+      <div className="fmtm-box-border fmtm-pt-4">
         {organizationId || (!organizationId && consentApproval) ? (
           <CreateEditOrganizationForm organizationId={organizationId} />
         ) : (

diff --git a/src/frontend/src/views/CreateNewProject.tsx b/src/frontend/src/views/CreateNewProject.tsx
@@ -100,17 +100,17 @@ const CreateNewProject = () => {
     }
   };
   return (
-    <div>
+    <div className="fmtm-h-full">
       <CreateProjectHeader />
       <Prompt when={isUnsavedChanges} message="Are you sure you want to leave, you have unsaved changes?" />
 
-      <div className="fmtm-min-h-[72vh] fmtm-bg-gray-100 fmtm-box-border fmtm-border-[1px] fmtm-border-t-white fmtm-border-t-[0px]">
-        <div className=" fmtm-w-full">
+      <div className="fmtm-h-[calc(100%-64px)]">
+        <div className="fmtm-w-full">
           <div>
             <StepSwitcher data={createProjectSteps} flag={'create_project'} switchSteps={canSwitchCreateProjectSteps} />
           </div>
         </div>
-        <div className="fmtm-mx-5 fmtm-mb-5">{(() => getCreateProjectContent())()}</div>
+        <div className="lg:fmtm-h-[calc(100%-108px)]">{(() => getCreateProjectContent())()}</div>
       </div>
     </div>
   );

diff --git a/src/frontend/src/views/Home.tsx b/src/frontend/src/views/Home.tsx
@@ -73,10 +73,7 @@ const Home = () => {
   }, [paginationPage, debouncedSearch]);
 
   return (
-    <div
-      style={{ padding: 7, flex: 1, background: '#F5F5F5' }}
-      className="fmtm-flex fmtm-flex-col fmtm-justify-between"
-    >
+    <div style={{ flex: 1, background: '#F5F5F5' }} className="fmtm-flex fmtm-flex-col fmtm-justify-between">
       <div className="fmtm-h-full">
         <HomePageFilters
           onSearch={handleSearch}
@@ -90,7 +87,7 @@ const Home = () => {
                 <div>
                   <div>
                     <div
-                      className={`fmtm-px-[1rem] fmtm-grid fmtm-gap-5 ${
+                      className={`fmtm-grid fmtm-gap-5 ${
                         !showMapStatus
                           ? 'fmtm-grid-cols-1 sm:fmtm-grid-cols-2 md:fmtm-grid-cols-3 lg:fmtm-grid-cols-4 xl:fmtm-grid-cols-5 2xl:fmtm-grid-cols-6'
                           : 'fmtm-grid-cols-1 sm:fmtm-grid-cols-2 md:fmtm-grid-cols-3 lg:fmtm-grid-cols-2 2xl:fmtm-grid-cols-3 lg:fmtm-h-[75vh] lg:fmtm-overflow-y-scroll lg:scrollbar'

diff --git a/src/frontend/src/views/MainView.tsx b/src/frontend/src/views/MainView.tsx
@@ -11,7 +11,7 @@ import { useAppSelector } from '@/types/reduxTypes';
 
 const MainView = () => {
   const dispatch = CoreModules.useAppDispatch();
-  const location = useLocation();
+  const { pathname } = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
   const { windowSize } = windowDimention();
   const checkTheme = useAppSelector((state) => state.theme.hotTheme);
@@ -48,7 +48,7 @@ const MainView = () => {
       <CoreModules.Paper>
         <CoreModules.Container disableGutters={true} maxWidth={false}>
           <CoreModules.Stack sx={{ height: '100vh' }}>
-            {popupInParams === 'true' || (location.pathname.includes('/project/') && windowSize.width <= 640) ? (
+            {popupInParams === 'true' || (pathname.includes('/project/') && windowSize.width <= 640) ? (
               <div></div>
             ) : (
               <div>
@@ -57,15 +57,13 @@ const MainView = () => {
               </div>
             )}
             <CoreModules.Stack
-              className={`mainview ${
-                location.pathname.includes('project/')
-                  ? 'fmtm-px-0 sm:fmtm-px-[1.3rem] sm:fmtm-py-[1.3rem]'
-                  : 'fmtm-px-[1.3rem] fmtm-py-[1.3rem]'
-              }`}
+              className={`${
+                pathname.includes('/project/') && windowSize.width < 640 ? '' : 'fmtm-p-6'
+              } fmtm-bg-[#f5f5f5]`}
               sx={{
                 height: popupInParams
                   ? '100vh'
-                  : location.pathname.includes('project/') && windowSize.width <= 640
+                  : pathname.includes('project/') && windowSize.width <= 640
                     ? '100vh'
                     : windowSize.width <= 599
                       ? '90vh'

diff --git a/src/frontend/src/views/ManageProject.tsx b/src/frontend/src/views/ManageProject.tsx
@@ -26,7 +26,7 @@ const ManageProject = () => {
   }, [projectId]);
 
   return (
-    <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row fmtm-bg-[#F5F5F5] fmtm-p-5 fmtm-gap-8 fmtm-flex-1">
+    <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row fmtm-bg-[#F5F5F5] fmtm-gap-8 fmtm-flex-1">
       <div className="sm:fmtm-w-[15%] sm:fmtm-min-w-[7.3rem] fmtm-flex sm:fmtm-flex-col fmtm-items-center sm:fmtm-items-start fmtm-gap-4 sm:fmtm-gap-0 ">
         <div
           onClick={() => navigate(`/project/${params?.id}`)}