fix: create & edit project UI fixes (#1078)

* fix (projectDetails): projectOptions - hide edit project button * feat (createNewProject): projectDetailsStep - link added * fix (createNewProject): selectFormStep - added css on the a tag * fix (createNewProject): selectFormStep - UI enhancements
hotosm · Jan 3, 2024 · 1940d1b · 1940d1b
1 parent 04bc3ed
commit 1940d1b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx b/src/frontend/src/components/ProjectDetails/ProjectOptions.tsx
@@ -140,7 +140,7 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
           >
             Generate MbTiles
           </CoreModules.Button>
-          <CoreModules.Link
+          {/* <CoreModules.Link
             to={`/edit-project/project-details/${encodedId}`}
             style={{
               display: 'flex',
@@ -154,7 +154,7 @@ const ProjectOptions = ({ setToggleGenerateModal }) => {
             <CoreModules.Button variant="outlined" color="error" className="fmtm-truncate">
               Edit Project
             </CoreModules.Button>
-          </CoreModules.Link>
+          </CoreModules.Link> */}
         </div>
       </div>
     </div>

diff --git a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
@@ -76,6 +76,7 @@ const ProjectDetailsForm = ({ flag }) => {
     handleChange(e);
     dispatch(CreateProjectActions.SetIsUnsavedChanges(true));
   };
+
   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">
@@ -86,9 +87,18 @@ const ProjectDetailsForm = ({ flag }) => {
             information about your project.
           </span>
           <span>To complete the first step, you will need the login credentials of ODK Central Server.</span>{' '}
-          <span>
-            Here are the instructions for setting up a Central ODK Server on Digital Ocean, if you haven’t already.
-          </span>
+          <div className="fmtm-flex fmtm-flex-col">
+            <span>
+              Here are the instructions for setting up a Central ODK Server on Digital Ocean, if you haven’t already.
+            </span>
+            <a
+              href="https://docs.getodk.org/central-install-digital-ocean/"
+              className="fmtm-text-blue-600 hover:fmtm-text-blue-700 fmtm-cursor-pointer fmtm-underline"
+              target="_"
+            >
+              https://docs.getodk.org/central-install-digital-ocean/
+            </a>
+          </div>
         </p>
       </div>
       <form

diff --git a/src/frontend/src/components/createnewproject/SelectForm.tsx b/src/frontend/src/components/createnewproject/SelectForm.tsx
@@ -14,7 +14,7 @@ import { FormCategoryService, ValidateCustomForm } from '../../api/CreateProject
 import NewDefineAreaMap from '../../views/NewDefineAreaMap';
 
 const osmFeatureTypeOptions = [
-  { name: 'form_ways', value: 'existing_form', label: 'Use Existing Category' },
+  { name: 'form_ways', value: 'existing_form', label: 'Use Existing Form' },
   { name: 'form_ways', value: 'custom_form', label: 'Upload a Custom Form' },
 ];
 // @ts-ignore
@@ -78,7 +78,11 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
           <span>
             {' '}
             You may learn more about XLSforms{' '}
-            <a href="https://hotosm.github.io/osm-fieldwork/about/xlsforms/" target="_">
+            <a
+              href="https://hotosm.github.io/osm-fieldwork/about/xlsforms/"
+              target="_"
+              className="fmtm-text-blue-600 hover:fmtm-text-blue-700 fmtm-cursor-pointer fmtm-underline"
+            >
               here
             </a>
             .
@@ -89,10 +93,10 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
         <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">
-              <div className="fmtm-w-[13.35rem]">
+              <div className="">
                 <CustomSelect
-                  title="Select form category"
-                  placeholder="Select form category"
+                  title="Select the most suitable category that defines your survey"
+                  placeholder="Form category"
                   data={formCategoryList}
                   dataKey="id"
                   valueKey="title"
@@ -102,7 +106,19 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
                     handleCustomChange('formCategorySelection', value);
                   }}
                   errorMsg={errors.formCategorySelection}
+                  className="fmtm-max-w-[13.5rem]"
                 />
+                <p className="fmtm-text-base fmtm-mt-2">
+                  You will view the OSM data extracts of{' '}
+                  <a
+                    href="https://wiki.openstreetmap.org/wiki/Tags"
+                    target="_"
+                    className="fmtm-text-blue-600 hover:fmtm-text-blue-700 fmtm-cursor-pointer fmtm-underline"
+                  >
+                    tags
+                  </a>{' '}
+                  that match the selected category in OSM database, if you don't choose to upload custom data extract.
+                </p>
               </div>
               <RadioButton
                 topic="You may choose to use existing category or upload your own xlsx form"