feat: Space out components on detour list page

mbta · Sep 4, 2024 · c60cf3a · c60cf3a
1 parent 876d529
commit c60cf3a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/assets/css/_detour_list_page.scss b/assets/css/_detour_list_page.scss
@@ -0,0 +1,5 @@
+.c-detour-list-page {
+  .c-detour-list-page__button {
+    margin-bottom: 2.25rem;
+  }
+}
diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -39,6 +39,7 @@ $vpp-location-padding: 1rem;
 @import "crowding";
 @import "cutout_overlay";
 @import "data_status_banner";
+@import "detour_list_page";
 @import "detours/detour_map";
 @import "detours/detour_modal";
 @import "detours/detour_table";

diff --git a/assets/src/components/detourListPage.tsx b/assets/src/components/detourListPage.tsx
@@ -83,9 +83,12 @@ export const DetourListPage = () => {
   const [showDetourModal, setShowDetourModal] = useState(false)
 
   return (
-    <div className="h-100 overflow-y-auto">
+    <div className="c-detour-list-page h-100 overflow-y-auto p-4 bg-white">
       {userInTestGroup(TestGroups.DetoursPilot) && (
-        <Button className="icon-link" onClick={() => setShowDetourModal(true)}>
+        <Button
+          className="c-detour-list-page__button icon-link fw-light px-3 py-2"
+          onClick={() => setShowDetourModal(true)}
+        >
           <PlusSquare />
           Add detour
         </Button>

diff --git a/assets/tests/components/__snapshots__/detourListPage.test.tsx.snap b/assets/tests/components/__snapshots__/detourListPage.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`DetourListPage renders detour list page with dummy data 1`] = `
 <div
-  className="h-100 overflow-y-auto"
+  className="c-detour-list-page h-100 overflow-y-auto p-4 bg-white"
 >
   <table
     className="c-detours-table table table-hover"