Refactor: Replace old button with new button components

src/frontend/src/api/task.ts

@@ -1,6 +1,7 @@
 import { AppDispatch } from '@/store/Store';
 import CoreModules from '@/shared/CoreModules';
 import { TaskActions } from '@/store/slices/TaskSlice';
+import { CommonActions } from '@/store/slices/CommonSlice';
 
 export const DownloadProjectSubmission = (
   url: string,
@@ -24,6 +25,11 @@ export const DownloadProjectSubmission = (
         a.download = `${projectName}.${params.file_type === 'csv' ? 'zip' : params.file_type}`;
         a.click();
       } catch (error) {
+        dispatch(
+          CommonActions.SetSnackBar({
+            message: JSON.parse(await error?.response?.data?.text())?.detail || 'Failed to download submissions',
+          }),
+        );
       } finally {
         dispatch(
           TaskActions.DownloadProjectSubmissionLoading({

src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx

@@ -135,23 +135,21 @@ const OrganizationForm = () => {
       </div>
       <div className="fmtm-flex fmtm-items-center fmtm-justify-center fmtm-gap-6 fmtm-mt-8 lg:fmtm-mt-16">
         <Button
-          btnText="Reject"
-          btnType="other"
-          className="fmtm-font-bold"
+          variant="secondary-red"
           onClick={rejectOrganization}
           isLoading={organizationRejecting}
-          loadingText="Rejecting..."
           disabled={organizationApproving}
-        />
+        >
+          Reject
+        </Button>
         <Button
-          btnText="Verify"
-          btnType="primary"
-          className="fmtm-font-bold"
+          variant="primary-red"
           onClick={approveOrganization}
           isLoading={organizationApproving}
-          loadingText="Verifying..."
           disabled={organizationRejecting}
-        />
+        >
+          Verify
+        </Button>
       </div>
     </div>
   );

src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx

@@ -83,13 +83,12 @@ const ConsentDetailsForm = () => {
         </div>
 
         <div className="fmtm-flex fmtm-items-center fmtm-justify-center fmtm-gap-6 fmtm-mt-8 lg:fmtm-mt-16">
-          <Button
-            btnText="Cancel"
-            btnType="other"
-            className="fmtm-font-bold"
-            onClick={() => navigate('/manage/organization')}
-          />
-          <Button btnText="NEXT" btnType="primary" className="fmtm-font-bold" onClick={handleSubmit} />
+          <Button variant="secondary-red" onClick={() => navigate('/manage/organization')}>
+            Cancel
+          </Button>
+          <Button variant="primary-red" onClick={handleSubmit}>
+            Next
+          </Button>
         </div>
       </div>
     </div>

src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx

@@ -247,21 +247,14 @@ const CreateEditOrganizationForm = ({ organizationId }: { organizationId: string
 
         <div className="fmtm-flex fmtm-items-center fmtm-justify-center fmtm-gap-6 fmtm-mt-8 lg:fmtm-mt-16">
           {!organizationId && (
-            <Button
-              btnText="Back"
-              btnType="other"
-              className="fmtm-font-bold"
-              onClick={() => dispatch(OrganisationAction.SetConsentApproval(false))}
-            />
+            <Button variant="secondary-red" onClick={() => dispatch(OrganisationAction.SetConsentApproval(false))}>
+              Back
+            </Button>
           )}
-          <Button
-            isLoading={postOrganisationDataLoading}
-            loadingText={!organizationId ? 'Submitting' : 'Updating'}
-            btnText={!organizationId ? 'Submit' : 'Update'}
-            btnType="primary"
-            className="fmtm-font-bold"
-            onClick={handleSubmit}
-          />
+
+          <Button variant="primary-red" onClick={handleSubmit} isLoading={postOrganisationDataLoading}>
+            {!organizationId ? 'Submit' : 'Update'}
+          </Button>
         </div>
       </div>
     </div>

src/frontend/src/components/DataConflation/ConflationMap/index.tsx

@@ -55,13 +55,9 @@ const ConflationMap = () => {
           <MapLegend />
         </div>
         <div className="fmtm-absolute fmtm-bottom-20 sm:fmtm-top-3 fmtm-right-3 fmtm-z-50 fmtm-rounded-lg fmtm-h-fit">
-          <Button
-            btnText="Upload to OSM"
-            type="button"
-            btnType="primary"
-            onClick={() => {}}
-            disabled={submissionConflationGeojsonLoading}
-          />
+          <Button variant="primary-red" onClick={() => {}} isLoading={submissionConflationGeojsonLoading}>
+            Upload to OSM
+          </Button>
         </div>
       </MapComponent>
     </>

src/frontend/src/components/DataConflation/SubmissionConflation/MergeAttributes.tsx

@@ -122,15 +122,9 @@ const MergeAttributes = ({
               </Table>
             </div>
             <div className="fmtm-flex fmtm-gap-[0.625rem] fmtm-justify-center fmtm-mt-5">
-              <Button
-                btnText="Save"
-                btnType="primary"
-                onClick={() => {
-                  setSelectedConflateMethod('');
-                }}
-                type="button"
-                className="!fmtm-rounded fmtm-text-sm !fmtm-py-2 fmtm-font-bold"
-              />
+              <Button variant="primary-red" onClick={() => setSelectedConflateMethod('')}>
+                Save
+              </Button>
             </div>
           </div>
         }

src/frontend/src/components/DataConflation/SubmissionConflation/index.tsx

@@ -70,7 +70,8 @@ const SubmissionConflation = () => {
                 <></>
               )}
             </div>
-            <Button
+            {/* TODO: update & fix button on feature development */}
+            {/* <Button
               btnText="Accept Submission Feature"
               btnType="other"
               type="button"
@@ -85,7 +86,7 @@ const SubmissionConflation = () => {
                 )
               }
               onClick={() => setSelectedConflateMethod('submission_feature')}
-            />
+            /> */}
           </div>
 
           <div className="fmtm-flex fmtm-flex-col fmtm-gap-2 fmtm-max-h-[40vh] md:fmtm-max-h-[40%]">
@@ -103,7 +104,8 @@ const SubmissionConflation = () => {
                 <></>
               )}
             </div>
-            <Button
+            {/* TODO: update & fix button on feature development */}
+            {/* <Button
               btnText="Accept OSM Features"
               btnType="other"
               type="button"
@@ -114,11 +116,12 @@ const SubmissionConflation = () => {
               } fmtm-py-2 fmtm-px-4 fmtm-text-sm fmtm-mx-auto fmtm-border-none !fmtm-rounded`}
               icon={selectedConflateMethod !== 'osm_feature' && <AssetModules.DoneIcon style={{ fontSize: '16px' }} />}
               onClick={() => setSelectedConflateMethod('osm_feature')}
-            />
+            /> */}
           </div>
 
           <div className="md:fmtm-absolute md:fmtm-bottom-0 fmtm-w-full">
-            <Button
+            {/* TODO: update & fix button on feature development */}
+            {/* <Button
               btnText="Merge Attributes"
               btnType="other"
               type="button"
@@ -128,7 +131,7 @@ const SubmissionConflation = () => {
                   : ''
               } fmtm-py-2 fmtm-px-4 fmtm-text-sm fmtm-w-full fmtm-justify-center !fmtm-rounded`}
               onClick={() => setSelectedConflateMethod('merge_attributes')}
-            />
+            /> */}
           </div>
         </div>
       </div>

src/frontend/src/components/DataConflation/TaskInfo.tsx

@@ -86,22 +86,12 @@ const TaskInfo = () => {
         </div>
 
         <div className="fmtm-flex fmtm-flex-col fmtm-gap-3 fmtm-justify-end">
-          <Button
-            btnText="Submit Task"
-            type="button"
-            btnType="primary"
-            onClick={() => {}}
-            className="fmtm-text-sm !fmtm-rounded fmtm-w-full fmtm-justify-center"
-            disabled={submissionConflationGeojsonLoading}
-          />
-          <Button
-            btnText="Request Additional Mapping"
-            type="button"
-            btnType="other"
-            onClick={() => {}}
-            className="fmtm-text-sm !fmtm-rounded fmtm-w-full fmtm-justify-center"
-            disabled={submissionConflationGeojsonLoading}
-          />
+          <Button variant="primary-red" disabled={submissionConflationGeojsonLoading}>
+            Submit Task
+          </Button>
+          <Button variant="secondary-red" disabled={submissionConflationGeojsonLoading}>
+            Request Additional Mapping
+          </Button>
         </div>
       </div>
     </div>

src/frontend/src/components/DialogTaskActions.tsx

@@ -20,7 +20,7 @@ type dialogPropType = {
 type taskListStateType = {
   value: string;
   key: string;
-  btnBG: string;
+  btnType: 'primary-red' | 'primary-grey' | 'link-red' | 'secondary-red';
 };
 
 export default function Dialog({ taskId, feature }: dialogPropType) {
@@ -150,25 +150,24 @@ export default function Dialog({ taskId, feature }: dialogPropType) {
             </div>
             <div className="fmtm-flex fmtm-gap-4 fmtm-items-center fmtm-justify-end">
               <Button
-                btnText="CONTINUE MAPPING"
-                btnType="primary"
-                type="submit"
-                className="fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center"
+                variant="primary-red"
                 onClick={() => {
                   setToggleMappedConfirmationModal(false);
                 }}
-              />
+              >
+                CONTINUE MAPPING
+              </Button>
               <Button
                 btnId="FINISH"
+                variant="primary-grey"
                 onClick={(e) => {
                   handleOnClick(e);
                   setToggleMappedConfirmationModal(false);
                 }}
                 disabled={loading}
-                btnText="MARK AS FULLY MAPPED"
-                btnType="other"
-                className={`fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center !fmtm-bg-[#4C4C4C] hover:!fmtm-bg-[#5f5f5f] fmtm-text-white hover:!fmtm-text-white !fmtm-border-none`}
-              />
+              >
+                MARK AS FULLY MAPPED
+              </Button>
             </div>
           </div>
         }
@@ -177,15 +176,16 @@ export default function Dialog({ taskId, feature }: dialogPropType) {
       {list_of_task_actions?.length > 0 && (
         <div
           className={`empty:fmtm-hidden fmtm-grid fmtm-border-t-[1px] fmtm-p-2 sm:fmtm-p-5 ${
-            list_of_task_actions?.length === 1 ? 'fmtm-grid-cols-1' : 'fmtm-grid-cols-2'
+            list_of_task_actions?.length === 1 ? 'fmtm-grid-cols-1' : 'fmtm-grid-cols-2 fmtm-gap-2'
           }`}
         >
           {list_of_task_actions?.map((data, index) => {
             return checkIfTaskAssignedOrNot(data.value) ? (
               <Button
+                key={index}
+                variant={data.btnType}
                 btnId={data.value}
                 btnTestId="StartMapping"
-                key={index}
                 onClick={(e) => {
                   if (
                     data.key === 'Mark as fully mapped' &&
@@ -197,39 +197,29 @@ export default function Dialog({ taskId, feature }: dialogPropType) {
                     handleOnClick(e);
                   }
                 }}
-                disabled={loading}
-                btnText={data.key.toUpperCase()}
-                btnType={data.btnBG === 'red' ? 'primary' : 'other'}
-                className={`fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center ${
-                  data.btnBG === 'gray'
-                    ? '!fmtm-bg-[#4C4C4C] hover:!fmtm-bg-[#5f5f5f] fmtm-text-white hover:!fmtm-text-white !fmtm-border-none'
-                    : data.btnBG === 'transparent'
-                      ? '!fmtm-bg-transparent !fmtm-text-primaryRed !fmtm-border-none !fmtm-w-fit fmtm-mx-auto hover:!fmtm-text-red-700'
-                      : ''
-                }`}
-              />
+                className="!fmtm-w-full"
+              >
+                {data.key.toUpperCase()}
+              </Button>
             ) : null;
           })}
         </div>
       )}
       {task_state !== taskStateEnum.UNLOCKED_TO_MAP && task_state !== taskStateEnum.LOCKED_FOR_MAPPING && (
         <div className="fmtm-p-2 sm:fmtm-p-5 fmtm-border-t">
           <Button
-            btnText="GO TO TASK SUBMISSION"
-            btnType="primary"
-            type="submit"
-            className="fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center"
+            variant="primary-red"
             onClick={() => navigate(`/project-submissions/${params.id}?tab=table&task_id=${taskId}`)}
-          />
+            className="!fmtm-w-full"
+          >
+            GO TO TASK SUBMISSION
+          </Button>
         </div>
       )}
       {task_state === taskStateEnum.LOCKED_FOR_MAPPING && (
         <div className="fmtm-p-2 sm:fmtm-p-5 fmtm-border-t">
           <Button
-            btnText="GO TO ODK"
-            btnType="primary"
-            type="submit"
-            className="fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center"
+            variant="primary-red"
             onClick={() => {
               const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
                 navigator.userAgent,
@@ -246,7 +236,10 @@ export default function Dialog({ taskId, feature }: dialogPropType) {
                 );
               }
             }}
-          />
+            className="!fmtm-w-full"
+          >
+            GO TO ODK
+          </Button>
         </div>
       )}
     </div>

src/frontend/src/components/ManageProject/DeleteTab/ProjectDeleteTab.tsx

@@ -36,18 +36,24 @@ const FormUpdateTab = ({ projectId, projectName }) => {
   return (
     <div className="fmtm-flex fmtm-flex-col fmtm-items-center fmtm-gap-10">
       <div className="fmtm-flex fmtm-justify-left">
-        <Button onClick={onDelete} btnText="DELETE PROJECT" btnType="primary" className="fmtm-rounded-md" />
+        <Button variant="primary-red" onClick={onDelete}>
+          DELETE PROJECT
+        </Button>
       </div>
       <Modal
         className="fmtm-w-[700px]"
         description={
           <div className="text-center">
-            <h2>Are you sure?</h2>
+            <h5>Are you sure?</h5>
             <p>Please confirm the project name to proceed:</p>
             <input type="text" value={confirmProjectName} onChange={handleConfirmChange} />
             <div className="fmtm-flex fmtm-justify-center fmtm-gap-4">
-              <Button onClick={onSave} btnText="Confirm" btnType="primary" disabled={!confirmEnabled} />
-              <Button onClick={closeModal} btnText="Cancel" btnType="secondary" />
+              <Button variant="primary-red" onClick={onSave} disabled={!confirmEnabled}>
+                Confirm
+              </Button>
+              <Button variant="secondary-red" onClick={closeModal}>
+                Cancel
+              </Button>
             </div>
           </div>
         }

src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx

@@ -104,14 +104,9 @@ const FormUpdateTab = ({ projectId }) => {
         {formError && <p className="fmtm-text-primaryRed fmtm-text-sm fmtm-pt-1">Please upload a form</p>}
       </div>
       <div className="fmtm-flex fmtm-justify-center">
-        <Button
-          isLoading={formUpdateLoading}
-          loadingText="UPDATE"
-          onClick={onSave}
-          btnText="UPDATE"
-          btnType="primary"
-          className="fmtm-rounded-md"
-        />
+        <Button variant="primary-red" onClick={onSave} isLoading={formUpdateLoading}>
+          UPDATE
+        </Button>
       </div>
     </div>
   );