Simplify and standardize dialogs

canopeum_frontend/src/assets/styles/muiCustomTheme.ts

@@ -21,6 +21,22 @@ const muiCustomTheme = createTheme({
       paper: variables.cardBackground,
     },
   },
+  components: {
+    MuiDialogActions: {
+      styleOverrides: {
+        spacing: {
+          justifyContent: 'space-around',
+        },
+      },
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          textAlign: 'center',
+        },
+      },
+    },
+  },
 })
 
 export default muiCustomTheme

canopeum_frontend/src/components/analytics/AnalyticsSiteHeader.tsx

@@ -59,10 +59,7 @@
           </div>
         </div>
 
-        <div
-          className='row justify-content-between mt-4 row-gap-3'
-          style={{ maxWidth: '880px' }}
-        >
+        <div className='row mt-4 row-gap-3'>
           <SiteCountBadge
             count={siteSummary.plantCount}
             icon='sitePlantedIcon'
@@ -87,7 +84,7 @@
 
         <div
           className='d-flex align-items-center fw-bold overflow-x-auto pb-2 mt-4'
-          style={{ maxWidth: '800px' }}
+          style={{ maxWidth: '800px' }} // TODO: Magic number
         >
           <span className='material-symbols-outlined'>group</span>
           <span className='ms-1 me-2'>{translate('analyticsSite.sponsors')}:</span>

canopeum_frontend/src/components/analytics/BatchActions.tsx

@@ -69,10 +69,7 @@ const BatchActions = ({ onEdit, onDelete, batchDetail }: Props) => {
           className='bg-lightgreen text-center rounded-circle unstyled-button'
           type='button'
         >
-          <span
-            className='material-symbols-outlined text-primary align-middle'
-            style={{ fontSize: 24 }}
-          >
+          <span className='material-symbols-outlined text-primary align-middle'>
             more_horiz
           </span>
         </button>

canopeum_frontend/src/components/analytics/batch-modal/CreateBatchModal.tsx

@@ -89,13 +89,9 @@ const CreateBatchModal = ({ open, site, handleClose }: Props) => {
 
   return (
     <Dialog fullWidth maxWidth='sm' onClose={handleCancel} open={open}>
-      <DialogTitle>
-        <div className='fs-5 text-capitalize m-auto text-center'>
-          {t('analyticsSite.batch-modal.create-title')}
-        </div>
-      </DialogTitle>
+      <DialogTitle>{t('analyticsSite.batch-modal.create-title')}</DialogTitle>
 
-      <DialogContent className='pb-5'>
+      <DialogContent>
         <BatchForm handleBatchChange={handleBatchChange} />
       </DialogContent>
 

canopeum_frontend/src/components/analytics/batch-modal/EditBatchModal.tsx

@@ -82,13 +82,9 @@ const BatchModal = ({ batchToEdit, handleClose }: Props) => {
 
   return (
     <Dialog fullWidth maxWidth='sm' onClose={onCancel} open={!!batchToEdit}>
-      <DialogTitle>
-        <div className='fs-5 text-capitalize m-auto text-center'>
-          {t('analyticsSite.batch-modal.edit-title')}
-        </div>
-      </DialogTitle>
+      <DialogTitle>{t('analyticsSite.batch-modal.edit-title')}</DialogTitle>
 
-      <DialogContent className='pb-5'>
+      <DialogContent>
         <BatchForm
           handleBatchChange={handleBatchChange}
           initialBatch={batchToEdit}

canopeum_frontend/src/components/analytics/site-modal/SiteModal.tsx

@@ -106,16 +106,14 @@ const SiteModal = ({ open, handleClose, siteId }: Props) => {
   return (
     <Dialog fullWidth maxWidth='sm' onClose={(_, reason) => handleClose(reason)} open={open}>
       <DialogTitle>
-        <div className='fs-5 text-capitalize m-auto text-center'>
-          {t(
-            siteId
-              ? 'analytics.edit-site-info'
-              : 'analytics.create-site',
-          )}
-        </div>
+        {t(
+          siteId
+            ? 'analytics.edit-site-info'
+            : 'analytics.create-site',
+        )}
       </DialogTitle>
 
-      <DialogContent className='pb-5'>
+      <DialogContent>
         <form>
           <div className='mb-3'>
             <label className='form-label text-capitalize' htmlFor='site-name'>

canopeum_frontend/src/components/dialogs/ConfirmationDialog.tsx

@@ -59,7 +59,7 @@ const ConfirmationDialog = ({ actions, children, onClose, open, title }: Props)
   return (
     <Dialog fullWidth maxWidth='xs' onClose={() => onClose(false)} open={open}>
       <DialogTitle>{title}</DialogTitle>
-      <DialogContent className='pb-5'>
+      <DialogContent>
         {children}
       </DialogContent>
       <DialogActions>

canopeum_frontend/src/components/settings/AdminInvitationDialog.tsx

@@ -1,4 +1,4 @@
-import { Dialog, DialogContent, DialogTitle } from '@mui/material'
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'
 import { useCallback, useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -100,10 +100,10 @@ const AdminInvitationDialog = ({ open, handleClose }: Props) => {
     handleClose()
   }
 
-  const renderInvitationContent = () => {
-    if (invitationLink) {
-      return (
-        <div className='d-flex flex-column gap-4'>
+  const renderInvitationContent = () =>
+    invitationLink
+      ? (
+        <div className='d-flex flex-column gap-3'>
           <span className='text-primary text-decoration-underline'>{invitationLink}</span>
 
           <div>
@@ -112,11 +112,8 @@ const AdminInvitationDialog = ({ open, handleClose }: Props) => {
           </div>
         </div>
       )
-    }
-
-    return (
-      <div className='w-100'>
-        <div className='w-100'>
+      : (
+        <>
           <label htmlFor='email-input'>{translate('auth.email-label')}</label>
           <input
             aria-describedby='email'
@@ -140,27 +137,25 @@ const AdminInvitationDialog = ({ open, handleClose }: Props) => {
               {translate('auth.email-error-format')}
             </span>
           )}
-        </div>
 
-        <MultipleSelectChip
-          classes='mt-4'
-          label={`${translate('settings.manage-admins.assign-to-label')}*`}
-          onChange={ids => setSiteIds(ids)}
-          options={siteOptions}
-        />
+          <MultipleSelectChip
+            classes='mt-4'
+            label={`${translate('settings.manage-admins.assign-to-label')}*`}
+            onChange={ids => setSiteIds(ids)}
+            options={siteOptions}
+          />
 
-        {generateLinkError && (
-          <div className='mt-3'>
-            <span className='help-block text-danger'>{generateLinkError}</span>
-          </div>
-        )}
-      </div>
-    )
-  }
+          {generateLinkError && (
+            <div className='mt-3'>
+              <span className='help-block text-danger'>{generateLinkError}</span>
+            </div>
+          )}
+        </>
+      )
 
-  const renderActionButton = () => {
-    if (invitationLink) {
-      return (
+  const renderActionButton = () =>
+    invitationLink
+      ? (
         <button
           className='btn btn-primary'
           onClick={handleCopyLinkClick}
@@ -169,41 +164,31 @@ const AdminInvitationDialog = ({ open, handleClose }: Props) => {
           {translate('settings.manage-admins.copy-link')}
         </button>
       )
-    }
-
-    return (
-      <button
-        className='btn btn-primary'
-        onClick={handleGenerateLinkClick}
-        type='button'
-      >
-        {translate('settings.manage-admins.generate-link')}
-      </button>
-    )
-  }
+      : (
+        <button
+          className='btn btn-primary'
+          onClick={handleGenerateLinkClick}
+          type='button'
+        >
+          {translate('settings.manage-admins.generate-link')}
+        </button>
+      )
 
   return (
     <Dialog fullWidth maxWidth='sm' onClose={onCloseModal} open={open}>
-      <DialogTitle className='text-center'>
-        {translate('settings.manage-admins.invite-admin')}
-      </DialogTitle>
-      <DialogContent>
-        <div className='d-flex flex-column justify-content-between m-auto' style={{ width: '80%' }}>
-          {renderInvitationContent()}
-
-          <div className='mt-5 d-flex justify-content-between align-items-center'>
-            <button
-              className='btn btn-outline-primary'
-              onClick={onCloseModal}
-              type='button'
-            >
-              {translate('generic.cancel')}
-            </button>
-
-            {renderActionButton()}
-          </div>
-        </div>
-      </DialogContent>
+      <DialogTitle>{translate('settings.manage-admins.invite-admin')}</DialogTitle>
+      <DialogContent>{renderInvitationContent()}</DialogContent>
+      <DialogActions>
+        <button
+          className='btn btn-outline-primary'
+          onClick={onCloseModal}
+          type='button'
+        >
+          {translate('generic.cancel')}
+        </button>
+
+        {renderActionButton()}
+      </DialogActions>
     </Dialog>
   )
 }

canopeum_frontend/src/components/social/PostCommentsDialog.tsx

@@ -136,7 +136,7 @@ const PostCommentsDialog = ({ open, postId, siteId, handleClose }: Props) => {
   return (
     <>
       <Dialog fullWidth maxWidth='sm' onClose={handleClose} open={open}>
-        <DialogContent className='pb-5'>
+        <DialogContent>
           {currentUser && (
             <div className='mb-5'>
               <div className='d-flex justify-content-between align-items-center pb-1'>

canopeum_frontend/src/components/social/SharePostDialog.tsx

@@ -34,7 +34,7 @@ const SharePostDialog = ({ onClose, open, post }: Props) => {
   return (
     <Dialog fullWidth maxWidth='sm' onClose={onClose} open={open}>
       <DialogTitle>{translate('social.share-dialog.title')}</DialogTitle>
-      <DialogContent className='pb-5'>
+      <DialogContent>
         <div>
           <div>
             <span>{translate('social.share-dialog.message')}</span>

canopeum_frontend/src/components/social/WidgetDialog.tsx

@@ -29,7 +29,7 @@ const WidgetDialog = ({ handleClose, open }: Props) => {
       onClose={(_, reason) => handleClose(reason)}
       open={open[0]}
     >
-      <DialogContent className='pb-5'>
+      <DialogContent>
         <form>
           <div className='mb-3'>
             <label className='form-label text-capitalize' htmlFor='widget-title'>

canopeum_frontend/src/components/social/site-modal/SiteAnnouncementModal.tsx

@@ -50,7 +50,7 @@ const SiteAnnouncementModal = ({ announcement, isOpen, handleClose }: Props) =>
   return (
     <Dialog fullWidth maxWidth='sm' onClose={() => handleClose(null)} open={isOpen}>
       <DialogTitle>{t('social.announcement.title')}</DialogTitle>
-      <DialogContent className='pb-5'>
+      <DialogContent>
         <form className='d-flex flex-column'>
           <div className='d-flex flex-column gap-4'>
             <div>

canopeum_frontend/src/components/social/site-modal/SiteContactModal.tsx

@@ -55,7 +55,7 @@ const SiteContactModal = ({ contact, isOpen, handleClose }: Props) => {
   return (
     <Dialog fullWidth maxWidth='sm' onClose={() => handleClose(null)} open={isOpen}>
       <DialogTitle>{t('social.contact.title')}</DialogTitle>
-      <DialogContent className='pb-5'>
+      <DialogContent>
         <form className='d-flex flex-column'>
           <div className='d-flex flex-column gap-4'>
             <div>