fix: homepage height, split on square disable button (#1046)

* fix (homePage): UI - UI height issue solved * fix (createNewProject): splitTasks - button disabled issue on divideOnSquare type chosen issue solved * fix (homePage): primaryAppBar - dark/light mode toggle hide * fix (manageOrganizations):createOrganization - UI enhancement
hotosm · Dec 15, 2023 · b98c745 · b98c745
1 parent 5e4fd9a
commit b98c745
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 18 deletions.
diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -381,7 +381,12 @@ const SplitTasks = ({
                           onClick={generateTaskBasedOnSelection}
                           className=""
                           icon={<AssetModules.SettingsIcon className="fmtm-text-white" />}
-                          disabled={formValues?.average_buildings_per_task ? false : true}
+                          disabled={
+                            splitTasksSelection === task_split_type['task_splitting_algorithm'] &&
+                            !formValues?.average_buildings_per_task
+                              ? true
+                              : false
+                          }
                         />
                         {/* <Button
                         btnText="Stop generating"

diff --git a/src/frontend/src/components/home/ProjectListMap.tsx b/src/frontend/src/components/home/ProjectListMap.tsx
@@ -93,7 +93,7 @@ const ProjectListMap = () => {
   };
 
   return (
-    <div className="lg:fmtm-order-last lg:fmtm-w-[50%] fmtm-h-[33rem] fmtm-bg-gray-300 fmtm-mx-4 fmtm-mb-2">
+    <div className="lg:fmtm-order-last lg:fmtm-w-[50%] fmtm-h-[33rem] lg:fmtm-h-full fmtm-bg-gray-300 fmtm-mx-4 fmtm-mb-2">
       <div className="map-container" style={{ height: '100%' }}>
         <MapComponent
           ref={mapRef}

diff --git a/src/frontend/src/utilities/PrimaryAppBar.tsx b/src/frontend/src/utilities/PrimaryAppBar.tsx
@@ -151,7 +151,7 @@ export default function PrimaryAppBar() {
 
           <CoreModules.Stack sx={{ flexGrow: 1 }} />
 
-          <CoreModules.Stack>
+          {/* <CoreModules.Stack>
             <CoreModules.IconButton
               size="large"
               aria-label="show more"
@@ -161,7 +161,7 @@ export default function PrimaryAppBar() {
             >
               {brightness != true ? <AssetModules.LightModeIcon /> : <AssetModules.DarkModeIcon />}
             </CoreModules.IconButton>
-          </CoreModules.Stack>
+          </CoreModules.Stack> */}
 
           <CoreModules.Stack direction={'row'} sx={{ display: { md: 'flex', xs: 'none' } }}>
             {token != null ? (

diff --git a/src/frontend/src/views/CreateOrganization.tsx b/src/frontend/src/views/CreateOrganization.tsx
@@ -48,25 +48,18 @@ const CreateOrganizationForm = () => {
 
   return (
     <CoreModules.Box
-      sx={{ display: 'flex', flexDirection: 'column', alignItems: 'start', background: '#f0efef', flex: 1, gap: 3 }}
+      sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', background: '#f0efef', flex: 1, gap: 3 }}
     >
-      <CoreModules.Box
-        sx={{
-          paddingTop: '2%',
-          justifyContent: 'flex-start',
-          marginLeft: '7.5%',
-        }}
-      >
-        <CoreModules.Typography variant="condensed">CREATE NEW ORGANIZATION</CoreModules.Typography>
-      </CoreModules.Box>
+      <div className="fmtm-pt-[5%] sm:fmtm-pt-[2%] fmtm-w-full fmtm-flex fmtm-justify-center">
+        <h1 className="fmtm-text-xl sm:fmtm-text-2xl md:fmtm-text-4xl fmtm-font-bold">CREATE NEW ORGANIZATION</h1>
+      </div>
       <CoreModules.Box
         sx={{
           width: '85%',
           maxWidth: 600,
           padding: 3,
           cursor: 'pointer',
           background: '#ffff',
-          marginLeft: '7.5%',
           borderRadius: 2,
         }}
       >

diff --git a/src/frontend/src/views/Home.jsx b/src/frontend/src/views/Home.jsx
@@ -80,14 +80,14 @@ const Home = () => {
       style={{ padding: 7, flex: 1, background: '#F5F5F5' }}
       className="fmtm-flex fmtm-flex-col fmtm-justify-between"
     >
-      <div>
+      <div className="fmtm-h-full">
         <HomePageFilters
           onSearch={handleSearch}
           filteredProjectCount={filteredProjectCards?.length}
           totalProjectCount={stateHome.homeProjectSummary.length}
         />
         {stateHome.homeProjectLoading == false ? (
-          <div className="fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-5">
+          <div style={{ height: 'calc(100% - 174px)' }} className="fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-5">
             <div className={`fmtm-w-full ${showMapStatus ? 'lg:fmtm-w-[50%]' : ''} `}>
               {filteredProjectCards.length > 0 ? (
                 <div>
@@ -96,7 +96,7 @@ const Home = () => {
                       className={`fmtm-px-[1rem] 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-[33rem] lg:fmtm-overflow-y-scroll lg:scrollbar'
+                          : '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'
                       }`}
                     >
                       {filteredProjectCards.map((value, index) => (