Merge pull request #4980 from OneCommunityGlobal/Diya_Fix_TaskUI

Diya fix(UI): Fixed Task Page UI

Author: one-community

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

@@ -94,64 +94,64 @@ function SingleTask(props) {
             <table className={`table table-bordered ${darkMode ? 'dark-mode text-light' : ''}`}>
               <thead className={darkMode ? 'bg-space-cadet' : ''}>
                 <tr>
-                  <th scope="col" data-tip="Action" colSpan="1">
+                  <th scope="col" data-tip="Action" colSpan="1" style={{ textAlign: 'center' }}>
                     Action
                   </th>
-                  <th scope="col" data-tip="task-num" colSpan="1">
+                  <th scope="col" data-tip="task-num" colSpan="1" style={{ textAlign: 'center' }}>
                     #
                   </th>
-                  <th scope="col" data-tip="Task Name" style={{ minWidth: '200px' }}>
+                  <th scope="col" data-tip="Task Name" style={{ minWidth: '200px' }} >
                     Task Name
                   </th>
-                  <th scope="col" data-tip="Priority">
+                  <th scope="col" data-tip="Priority" style={{ textAlign: 'center' }}>
                     <i className="fa fa-star" aria-hidden="true" />
                   </th>
-                  <th scope="col" data-tip="Resources">
+                  <th scope="col" data-tip="Resources" style={{ textAlign: 'center' }}>
                     <i className="fa fa-users" aria-hidden="true" />
                   </th>
-                  <th scope="col" data-tip="Assigned">
+                  <th scope="col" data-tip="Assigned" style={{ textAlign: 'center' }}>
                     <i className="fa fa-user-circle-o" aria-hidden="true" />
                   </th>
-                  <th scope="col" data-tip="Status">
+                  <th scope="col" data-tip="Status" style={{ textAlign: 'center' }}>
                     <i className="fa fa-tasks" aria-hidden="true" />
                   </th>
-                  <th scope="col" data-tip="Hours-Best">
+                  <th scope="col" data-tip="Hours-Best" style={{ textAlign: 'center' }}>
                     <i className="fa fa-hourglass-start" aria-hidden="true" />
                   </th>
-                  <th scope="col" data-tip="Hours-Worst">
+                  <th scope="col" data-tip="Hours-Worst" style={{ textAlign: 'center' }}>
                     <i className="fa fa-hourglass" aria-hidden="true" />
                   </th>
-                  <th scope="col" data-tip="Hours-Most">
+                  <th scope="col" data-tip="Hours-Most" style={{ textAlign: 'center' }}>
                     <i className="fa fa-hourglass-half" aria-hidden="true" />
                   </th>
-                  <th scope="col" data-tip="Estimated Hours">
+                  <th scope="col" data-tip="Estimated Hours" style={{ textAlign: 'center' }}>
                     <i className="fa fa-clock-o" aria-hidden="true" />
                   </th>
-                  <th scope="col" data-tip="Hours-Logged">
+                  <th scope="col" data-tip="Hours-Logged" style={{ textAlign: 'center' }}>
                     <i className="fa fa-hourglass-end" aria-hidden="true" />
                   </th>
-                  <th scope="col" data-tip="Start Date">
+                  <th scope="col" data-tip="Start Date" style={{ textAlign: 'center' }}>
                     <i className="fa fa-calendar-check-o" aria-hidden="true" />
                     {' '}
                     Start
                   </th>
-                  <th scope="col" data-tip="Due Date">
+                  <th scope="col" data-tip="Due Date" style={{ textAlign: 'center' }}>
                     <i className="fa fa-calendar-times-o" aria-hidden="true" />
                     {' '}
                     End
                   </th>
-                  <th scope="col" data-tip="Links">
+                  <th scope="col" data-tip="Links" style={{ textAlign: 'center' }}>
                     <i className="fa fa-link" aria-hidden="true" />
                   </th>
-                  <th scope="col" data-tip="Details">
+                  <th scope="col" data-tip="Details" style={{ textAlign: 'center' }}>
                     <i className="fa fa-question" aria-hidden="true" />
                   </th>
                 </tr>
               </thead>
               <tbody className={darkMode ? 'bg-yinmn-blue' : ''}>
                 <tr>
                   <th scope="row">
-                    <div className="d-flex flex-column align-items-start">
+                    <div className="d-flex flex-column align-items-center">
                       <EditTaskModal
                         key={`editTask_${task._id}`}
                         parentNum={task.num}
@@ -188,7 +188,7 @@ function SingleTask(props) {
                       )}
                     </div>
                   </th>
-                  <th scope="row">{task.num}</th>
+                  <th scope="row" style={{ textAlign: 'center', verticalAlign: 'middle' }}>{task.num}</th>
                   <td>{task.taskName}</td>
                   <td>{task.priority}</td>
                   <td>