Fixes#3178 : Organisation Settings Page UI according to Figma

public/locales/en/translation.json

@@ -852,7 +852,7 @@
     "title": "Settings",
     "general": "General",
     "actionItemCategories": "Action Item Categories",
-    "updateOrganization": "Update Organization",
+    "updateOrganization": "Edit Organization",
     "seeRequest": "See Request",
     "noData": "No data",
     "otherSettings": "Other Settings",
@@ -861,8 +861,8 @@
     "agendaItemCategories": "Agenda Item Categories"
   },
   "deleteOrg": {
-    "deleteOrganization": "Delete Organization",
-    "deleteSampleOrganization": "Delete Sample Organization",
+    "deleteOrganization": "Delete",
+    "deleteSampleOrganization": "Delete",
     "deleteMsg": "Do you want to delete this organization?",
     "confirmDelete": "Confirm Delete",
     "longDelOrgMsg": "By clicking on Delete Organization button the organization will be permanently deleted along with its events, tags and all related data.",
@@ -910,15 +910,17 @@
     "dependentLocality": "Dependent Locality",
     "sortingCode": "Sorting code",
     "state": "State / Province",
-    "userRegistrationRequired": "User Registration Required",
+    "userRegistrationRequired": "Is Public",
     "isVisibleInSearch": "Visible in Search",
     "enterNameOrganization": "Enter Organization Name",
     "successfulUpdated": "Organization updated successfully",
+    "changesReset": "Form Reset Successfully",
     "name": "name",
     "description": "description",
     "location": "location",
     "address": "address",
     "displayImage": "displayImage",
+    "resetChanges": "resetChanges",
     "saveChanges": "saveChanges",
     "cancel": "cancel",
     "talawaApiUnavailable": "talawaApiUnavailable"

public/locales/fr/translation.json

@@ -874,6 +874,7 @@
     "isVisibleInSearch": "Visible dans la recherche",
     "enterNameOrganization": "Entrez le nom de l'organisation",
     "successfulUpdated": "Organisation mise à jour avec succès",
+    "changesReset": "Formulaire réinitialisé avec succès",
     "name": "Nom",
     "description": "Description",
     "location": "Lieu",

public/locales/hi/translation.json

@@ -874,6 +874,7 @@
     "isVisibleInSearch": "खोज में दृश्यमान",
     "enterNameOrganization": "संगठन का नाम दर्ज करें",
     "successfulUpdated": "संगठन सफलतापूर्वक अद्यतन किया गया",
+    "changesReset": "फ़ॉर्म सफलतापूर्वक रीसेट किया गया",
     "name": "नाम",
     "description": "विवरण",
     "location": "स्थान",

public/locales/sp/translation.json

@@ -882,6 +882,7 @@
     "cancel": "Cancelar",
     "enterNameOrganization": "Ingrese el nombre de la organización",
     "successfulUpdated": "Exitoso actualizado",
+    "changesReset": "Formulario restablecido con éxito",
     "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red."
   },
   "addOnRegister": {

public/locales/zh/translation.json

@@ -874,6 +874,7 @@
     "isVisibleInSearch": "在搜索中可见",
     "enterNameOrganization": "输入组织名称",
     "successfulUpdated": "组织更新成功",
+    "changesReset": "表单重置成功",
     "name": "名称",
     "description": "描述",
     "location": "位置",

src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx

@@ -171,6 +171,16 @@ const CategoryModal: FC<InterfaceActionItemCategoryModal> = ({
                 setFormState({ ...formState, name: e.target.value })
               }
               required
+              sx={{
+                '& .MuiOutlinedInput-root': {
+                  '&:hover fieldset': {
+                    borderColor: '#a8c7fa',
+                  },
+                  '&.Mui-focused fieldset': {
+                    borderColor: '#a8c7fa',
+                  },
+                },
+              }}
             />
           </FormControl>
           <Form.Group className="d-flex flex-column mb-4">

src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx

@@ -255,7 +255,7 @@ const OrgActionItemCategories: FC<InterfaceActionItemCategoryProps> = ({
           <Button
             variant="success"
             size="sm"
-            className="me-2 rounded"
+            className="me-2 rounded createSettingBtn"
             data-testid={'editCategoryBtn' + params.row.id}
             onClick={() =>
               handleOpenModal(
@@ -353,6 +353,7 @@ const OrgActionItemCategories: FC<InterfaceActionItemCategoryProps> = ({
               onClick={() => handleOpenModal(null, 'create')}
               style={{ marginTop: '11px' }}
               data-testid="createActionItemCategoryBtn"
+              className="createSettingBtn"
             >
               <i className={'fa fa-plus me-2'} />
               {tCommon('create')}

src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { Button, Card, Modal } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from '@apollo/client';
@@ -9,7 +10,7 @@ import {
   REMOVE_SAMPLE_ORGANIZATION_MUTATION,
 } from 'GraphQl/Mutations/mutations';
 import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
-import styles from './DeleteOrg.module.css';
+import styles from '../../../../style/app.module.css';
 import { useNavigate, useParams } from 'react-router-dom';
 import useLocalStorage from 'utils/useLocalstorage';
 
@@ -96,17 +97,18 @@ function deleteOrg(): JSX.Element {
     <>
       {canDelete && (
         <Card className="rounded-4 shadow-sm mb-4 border border-light-subtle">
-          <div className={styles.cardHeader}>
+          <div className={styles.deleteOrgCardHeader}>
             <div className={styles.cardTitle}>{t('deleteOrganization')}</div>
           </div>
-          <Card.Body className={styles.cardBody}>
+          <Card.Body className={styles.deleteOrgCardBody}>
             <div className={styles.textBox}>{t('longDelOrgMsg')}</div>
             <Button
               variant="danger"
               className={styles.deleteButton}
               onClick={toggleDeleteModal}
               data-testid="openDeleteModalBtn"
             >
+              <DeleteIcon style={{ fontSize: '1rem' }} />
               {data && data.isSampleOrganization
                 ? t('deleteSampleOrganization')
                 : t('deleteOrganization')}
@@ -121,7 +123,7 @@ function deleteOrg(): JSX.Element {
           onHide={toggleDeleteModal}
           data-testid="orgDeleteModal"
         >
-          <Modal.Header className="bg-primary" closeButton>
+          <Modal.Header style={{ backgroundColor: '#a8c7fa' }} closeButton>
             <h5 className="text-white fw-bold">{t('deleteOrganization')}</h5>
           </Modal.Header>
           <Modal.Body>{t('deleteMsg')}</Modal.Body>