fix: MET-182: add icon clear search in search bar of staking lifecycl…

…e page
cardano-foundation · Nov 16, 2023 · 5a10c8d · 5a10c8d
1 parent 2c5bc1b
commit 5a10c8d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/components/StakingLifeCycleSearch/index.tsx b/src/components/StakingLifeCycleSearch/index.tsx
@@ -163,6 +163,7 @@ const StakingLifeCycleSearch = () => {
       <Box>
         <SearchContainer mx={"auto"}>
           <StyledInput
+            type="search"
             placeholder={t("slc.typeStakeOrPool")}
             onChange={(e) => {
               setValue(e.target.value.trim());

diff --git a/src/components/StakingLifeCycleSearch/styles.ts b/src/components/StakingLifeCycleSearch/styles.ts
@@ -39,6 +39,11 @@ export const StyledInput = styled("input")`
   text-overflow: ellipsis;
   background: ${({ theme }) => theme.palette.secondary[0]};
   color: ${({ theme }) => theme.palette.secondary.light};
+
+  &::-webkit-search-cancel-button {
+    filter: ${({ theme }) => (theme.mode === "dark" ? "brightness(0) invert(0.8)" : "brightness(0) invert(0.4)")};
+    cursor: pointer;
+  }
 `;
 
 export const SubmitButton = styled(Button)`