Task/FP-204: My Allocations Usage Info By User

client/src/components/Allocations/Allocations.scss

@@ -135,7 +135,7 @@
         }
     }
     .alloc-badge {
-        font-size: 11px;
+        font-size: 14px;
     }
 }
 #pending {
@@ -153,65 +153,11 @@
 .allocations-request-body {
     color: #484848;
 }
-.team-view-modal-wrapper {
-    .table-hover {
-        tbody {
-            /* FP-457: Will fix this *//* stylelint-disable no-descending-specificity */
-            tr {
-                height: 35px;
-                cursor: pointer;
-                color: #484848;
-                td {
-                    font-weight: 500;
-                    font-size: 14px;
-                    vertical-align: middle;
-                }
-            }
-            /* stylelint-enable no-descending-specificity */
-            tr:hover {
-                background-color: #dfdaf5;
-            }
-        }
-    }
-    .modal-body {
-        overflow-y: initial !important;
-    }
-    .modal-left {
-        height: 50vh;
-        max-width: 230px;
-        overflow-y: scroll;
-        padding-left: 0;
-        padding-right: 0;
-        border-right: 1px solid rgba(112, 112, 112, 0.25);
-    }
-    .modal-right {
-        display: flex;
-        padding: 1em;
-        max-width: 500px;
-        overflow: auto;
-        .contact-card {
-            display: flex;
-            flex-direction: column;
-            font: 16px Roboto, sans-serif;
-            height: 100%;
-            overflow: auto;
-            div {
-                padding: 0.25rem;
-                text-overflow: ellipsis;
-                overflow: auto;
-            }
-        }
-    }
-    .user-name {
-        margin-left: 1.5rem;
-    }
-    .active-user {
-        background-color: #dfdaf5;
-    }
-}
-
 /* HACK: The loading icon should not need height set, but it fixes Safari here */
 /* FP-426: Do not use `height: 100%` or isolate usage pending solution to bigger problem */
 #allocations-wrapper .loading-icon {
     height: auto;
 }
+.system-cell {
+    width: 120px;
+}

client/src/components/Allocations/AllocationsCells.js

@@ -3,7 +3,7 @@ import { object, shape, array, number, string } from 'prop-types';
 import { Button, Badge } from 'reactstrap';
 import { useDispatch } from 'react-redux';
 import { v4 as uuidv4 } from 'uuid';
-import { TeamView } from './AllocationsModals';
+import { AllocationsTeamViewModal } from './AllocationsModals';
 
 const CELL_PROPTYPES = {
   cell: shape({
@@ -31,7 +31,7 @@ export const Team = ({ cell: { value } }) => {
       >
         View Team
       </Button>
-      <TeamView
+      <AllocationsTeamViewModal
         isOpen={openModal}
         pid={projectId}
         toggle={() => setOpenModal(!openModal)}

client/src/components/Allocations/AllocationsLayout.js

@@ -7,7 +7,7 @@ import { faClipboard, faDesktop } from '@fortawesome/free-solid-svg-icons';
 import { string } from 'prop-types';
 import { LoadingSpinner } from '_common';
 import { AllocationsTable } from './AllocationsTables';
-import { NewAllocReq } from './AllocationsModals';
+import { AllocationsRequestModal } from './AllocationsModals';
 import * as ROUTES from '../../constants/routes';
 
 export const Header = ({ page }) => {
@@ -23,7 +23,7 @@ export const Header = ({ page }) => {
         Manage Allocations
       </Button>
       {openModal && (
-        <NewAllocReq
+        <AllocationsRequestModal
           isOpen={openModal}
           toggle={() => setOpenModal(!openModal)}
         />