10261-story: update styling and add empty state text

ustaxcourt · Sep 24, 2024 · ae99536 · ae99536
1 parent 7623d51
commit ae99536
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/web-client/src/styles/tables.scss b/web-client/src/styles/tables.scss
@@ -296,6 +296,16 @@ table,
       display: none;
     }
 
+    .multi-filing-type-icon {
+      display: flex;
+      width: fit-content;
+      padding-right: 0;
+      padding-left: 0.5rem;
+      margin-top: 4px;
+      margin-right: 0;
+      gap: 1rem;
+    }
+
     tr.in-progress {
       td {
         background: $color-yellow;

diff --git a/web-client/src/views/Practitioners/PractitionerCases/PractitionerCaseList.tsx b/web-client/src/views/Practitioners/PractitionerCases/PractitionerCaseList.tsx
@@ -3,7 +3,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Icon } from '@web-client/ustc-ui/Icon/Icon';
 import React from 'react';
 
-const EMPTY_STATE_TEXT = 'No cases to display';
+const getEmptyStateText = (isOpen: boolean) => {
+  return `There are no ${isOpen ? 'open' : 'closed'} cases.`;
+};
 
 export function PractitionerCaseList({
   cases,
@@ -26,18 +28,18 @@ export function PractitionerCaseList({
           >
             <thead>
               <tr>
-                <th aria-hidden="true" className="icon-column" />
+                <th aria-hidden="true" />
                 <th>Docket No.</th>
                 <th>Case Title</th>
                 {showStatus && <th>Case Status</th>}
               </tr>
             </thead>
             {cases.map(item => (
               <tr key={item.pk}>
-                <td aria-hidden="true" className="filing-type-icon">
+                <td aria-hidden="true" className="multi-filing-type-icon">
                   {item.isSealed && (
                     <FontAwesomeIcon
-                      className="sealed-in-blackstone icon-sealed"
+                      className="sealed-docket-entry"
                       icon="lock"
                       size="1x"
                       title={item.sealedToTooltip}
@@ -70,7 +72,7 @@ export function PractitionerCaseList({
             ))}
           </table>
         ) : (
-          EMPTY_STATE_TEXT
+          getEmptyStateText(showStatus)
         )}
       </div>
     </>