feat: Add cell borders and colors for active detour table (#2788)

mbta · Sep 24, 2024 · 1154994 · 1154994
1 parent c3c4052
commit 1154994
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 2 deletions.
diff --git a/assets/css/bootstrap/_map_overrides.scss b/assets/css/bootstrap/_map_overrides.scss
@@ -10,8 +10,11 @@ $theme-colors: (
   "light": new_tokens.$gray-50,
   "dark": new_tokens.$gray-900,
   "missed-stop": semantic.$missed-stop,
+  "active-detour": semantic.$active-detour,
 );
 
+$table-variants: $theme-colors;
+
 $utilities: (
   // Shorthand for specifying utility classes `top-0 start-0 bottom-0 end-0`
   "inset":

diff --git a/assets/css/color/_definitions.scss b/assets/css/color/_definitions.scss
@@ -33,6 +33,7 @@ $active-detour: new_tokens.$lemon-100;
   --color-service-alert: #{$service-alert};
   --color-light: #{$light};
   --color-dark: #{$dark};
+  --color-active-detour: #{$active-detour};
 }
 // #endregion Theme Colors
 

diff --git a/assets/src/components/detoursTable.tsx b/assets/src/components/detoursTable.tsx
@@ -42,6 +42,7 @@ export const DetoursTable = ({
   <Table
     hover={!!data}
     className={joinClasses([...classNames, "c-detours-table"])}
+    variant={status === DetourStatus.Active ? "active-detour" : ""}
   >
     <thead className="u-hide-for-mobile">
       <tr>

diff --git a/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`DetourListPage renders detour list page 1`] = `
         </span>
       </div>
       <table
-        class="mb-5 c-detours-table table table-hover"
+        class="mb-5 c-detours-table table table-active-detour table-hover"
       >
         <thead
           class="u-hide-for-mobile"

diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
         </span>
       </div>
       <table
-        class="mb-5 c-detours-table table table-hover"
+        class="mb-5 c-detours-table table table-active-detour table-hover"
       >
         <thead
           class="u-hide-for-mobile"