Merge pull request #5105 from OneCommunityGlobal/venkataramanan_fix_edit_suggest_delete_alignment

Venkataramanan fix: edit, suggest, delete button alignments in single task

Author: one-community

src/components/Projects/WBS/SingleTask/SingleTask.jsx

@@ -5,6 +5,7 @@ import { connect, useSelector } from 'react-redux';
 import ReactTooltip from 'react-tooltip';
 import axios from 'axios';
 import { NavItem, Button, Modal, ModalBody } from 'reactstrap';
+import styles from './SingleTask.module.css';
 
 import { Editor } from '@tinymce/tinymce-react';
 import { Link, useHistory } from 'react-router-dom';
@@ -150,45 +151,46 @@ function SingleTask(props) {
               </thead>
               <tbody className={darkMode ? 'bg-yinmn-blue' : ''}>
                 <tr style={{ textAlign: 'center', verticalAlign: 'middle' }}>
-                  <th scope="row">
-                    <div className="d-flex flex-column align-items-center">
-                      <EditTaskModal
-                        key={`editTask_${task._id}`}
-                        parentNum={task.num}
-                        taskId={task._id}
-                        wbsId={task.wbsId}
-                        parentId1={task.parentId1}
-                        parentId2={task.parentId2}
-                        parentId3={task.parentId3}
-                        mother={task.mother}
-                        level={task.level}
-                        setTask={setTask}
-                      />
-                      {canDeleteTask && (
-                        <>
-                          <Button
-                            type="button"
-                            size="sm"
-                            className="btn btn-danger mt-1 ml-2"
-                            onClick={() => showUpDeleteModal()}
-                          >
-                            Delete
-                          </Button>
-                          <ModalDelete
-                            isOpen={modalDelete}
-                            closeModal={() => setModalDelete(false)}
-                            confirmModal={() => deleteTask(task._id, task.mother)}
-                            modalMessage={
-                              props.popupEditor.currPopup.popupContent || 'DELETE THIS TASK ?'
-                            }
-                            modalTitle={Message.CONFIRM_DELETION}
-                            darkMode={darkMode}
-                          />
-                        </>
-                      )}
-                    </div>
-                  </th>
+                <th scope="row">
+                  <div className={styles.actionButtonsContainer}>
+                    <EditTaskModal
+                      key={`editTask_${task._id}`}
+                      parentNum={task.num}
+                      taskId={task._id}
+                      wbsId={task.wbsId}
+                      parentId1={task.parentId1}
+                      parentId2={task.parentId2}
+                      parentId3={task.parentId3}
+                      mother={task.mother}
+                      level={task.level}
+                      setTask={setTask}
+                    />
+
+                    {canDeleteTask && (
+                      <>
+                        <Button
+                          type="button"
+                          size="sm"
+                          className={`btn btn-danger ${styles.actionButton}`}
+                          onClick={() => showUpDeleteModal()}
+                        >
+                          Delete
+                        </Button>
 
+                        <ModalDelete
+                          isOpen={modalDelete}
+                          closeModal={() => setModalDelete(false)}
+                          confirmModal={() => deleteTask(task._id, task.mother)}
+                          modalMessage={
+                            props.popupEditor.currPopup.popupContent || 'DELETE THIS TASK ?'
+                          }
+                          modalTitle={Message.CONFIRM_DELETION}
+                          darkMode={darkMode}
+                        />
+                      </>
+                    )}
+                  </div>
+                </th>
                   <td style={{ textAlign: 'center', verticalAlign: 'middle' }}>
                     {task.num}
                   </td>

src/components/Projects/WBS/SingleTask/SingleTask.module.css

@@ -0,0 +1,14 @@
+.actionButtonsContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.actionButton {
+  width: 90px;
+  margin: 0 !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx

@@ -1085,39 +1085,43 @@ function EditTaskModal(props) {
         ) : null}
       </Modal>
       <div className="task-action-buttons d-flex" />
-      {canUpdateTask && (
-        <Button
-          className="mx-2 controlBtn"
-          color="primary"
-          size="sm"
-          onClick={e => handleModalShow('Edit')}
-          style={darkMode ? boxStyleDark : boxStyle}
-        >
-          Edit
-        </Button>
-      )}
-      {canSuggestTask && (
-        <Button
-          className="mr-2 controlBtn"
-          color="primary"
-          size="sm"
-          onClick={e => handleModalShow('Suggest')}
-          style={darkMode ? boxStyleDark : boxStyle}
-        >
-          Suggest
-        </Button>
-      )}
-      {!canUpdateTask && !canSuggestTask && (
-        <Button
-          className="mr-2 controlBtn"
-          color="primary"
-          size="sm"
-          onClick={e => handleModalShow('View')}
-          style={darkMode ? boxStyleDark : boxStyle}
-        >
-          View
-        </Button>
-      )}
+        <div className={styles.taskTopActionButtons}>
+          {canUpdateTask && (
+            <Button
+              className={styles.taskActionButton}
+              color="primary"
+              size="sm"
+              onClick={() => handleModalShow('Edit')}
+              style={darkMode ? boxStyleDark : boxStyle}
+            >
+              Edit
+            </Button>
+          )}
+
+          {canSuggestTask && (
+            <Button
+              className={styles.taskActionButton}
+              color="primary"
+              size="sm"
+              onClick={() => handleModalShow('Suggest')}
+              style={darkMode ? boxStyleDark : boxStyle}
+            >
+              Suggest
+            </Button>
+          )}
+
+          {!canUpdateTask && !canSuggestTask && (
+            <Button
+              className={styles.taskActionButton}
+              color="primary"
+              size="sm"
+              onClick={() => handleModalShow('View')}
+              style={darkMode ? boxStyleDark : boxStyle}
+            >
+              View
+            </Button>
+          )}
+        </div>
     </div>
   );
 }

src/components/Projects/WBS/WBSDetail/wbs.module.css

@@ -347,4 +347,20 @@
   .button-group button {
     margin-bottom: 10px;
   }
+}
+
+.taskTopActionButtons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
+.taskActionButton {
+  width: 90px;
+  margin: 0 !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }