Normalize scroll button styling.

samvera-labs · Nov 26, 2024 · 30e4685 · 30e4685
1 parent f68a460
commit 30e4685
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/components/Scroll/Panel/Search/Form.tsx b/src/components/Scroll/Panel/Search/Form.tsx
@@ -23,7 +23,11 @@ const SearchIcon: React.FC = () => {
 
 const CloseIcon: React.FC = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <svg
+      style={{ width: "16px", height: "16px" }}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
       <title>close</title>
       <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z" />
     </svg>

diff --git a/src/components/Scroll/Panel/Search/Search.styled.tsx b/src/components/Scroll/Panel/Search/Search.styled.tsx
@@ -74,6 +74,7 @@ const StyledSearchIcon = styled("button", {
   position: "absolute",
   zIndex: "3",
   border: "none",
+  background: "transparent",
   color: "$secondary !important",
   fill: "$secondary !important",
   stroke: "$secondary !important",
@@ -96,14 +97,19 @@ const StyledSearchIcon = styled("button", {
 
 const StyledSearchBackButton = styled("button", {
   opacity: "1",
-  display: "flex",
-  alignItems: "center",
-  width: "1.25em",
-  height: "1.25em",
   alignSelf: "center",
   margin: "0 0.25rem",
   fill: "$secondary",
   flexShrink: "0",
+  border: "none",
+  background: "transparent",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexDirection: "column",
+  borderRadius: "2rem",
+  height: "2rem",
+  width: "2rem",
 
   svg: {
     color: "inherit",