fix: make close button a svg (#214)

* make button a svg * update test * appease prettier * use opacity hover styling * update .gitignore * remove unnecessary fill * remove DS_Store
mbta · Jan 3, 2025 · f628001 · f628001
1 parent 73640e3
commit f628001
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,4 @@ npm-debug.log
 /node_modules/
 
 *storybook.log
-config/dev.secret.exs
+config/dev.secret.exs
diff --git a/js/components/modal.tsx b/js/components/modal.tsx
@@ -27,7 +27,11 @@ export const Modal = ({
       <div className='grid grid-cols-[1fr_max-content] grid-rows-[max-content_1fr] [grid-template-areas:"title_close"_"contents_contents"] overflow-scroll'>
         <div className="[grid-area:title]">{title}</div>
         <button className="[grid-area:close]" onClick={onClose}>
-          [x]
+          <img
+            src="/images/close.svg"
+            alt="Close"
+            className="w-4 hover:opacity-50"
+          />
         </button>
         <div className="[grid-area:contents]">{children}</div>
       </div>

diff --git a/js/test/components/operatorSignIn/operatorSignInModal.test.tsx b/js/test/components/operatorSignIn/operatorSignInModal.test.tsx
@@ -68,7 +68,7 @@ describe("OperatorSignInModal", () => {
       <OperatorSignInModal show={true} onComplete={jest.fn()} close={close} />,
     );
 
-    await userEvent.click(view.getByRole("button", { name: "[x]" }));
+    await userEvent.click(view.getByRole("button", { name: "Close" }));
     expect(close).toHaveBeenCalled();
     view.rerender(
       <OperatorSignInModal show={false} onComplete={jest.fn()} close={close} />,

diff --git a/priv/static/images/close.svg b/priv/static/images/close.svg