chore: Fix input's icon

ApeSwapFinance · Nov 16, 2022 · f84478a · f84478a
1 parent e25ef47
commit f84478a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 15 deletions.
diff --git a/src/__tests__/components/input.test.tsx b/src/__tests__/components/input.test.tsx
@@ -9,10 +9,10 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="css-r8xm40"
+        class="css-1vb0zbs-Input"
       >
         <input
-          class="css-1spk4n4"
+          class="css-a0y6z0-Input"
           type="text"
           value="input"
         />

diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx
@@ -642,10 +642,10 @@ it("renders correctly", () => {
                       />
                     </svg>
                     <div
-                      class="css-r8xm40"
+                      class="css-1vb0zbs-Input"
                     >
                       <input
-                        class="input css-y01sy6-NewsletterForm"
+                        class="input css-wrmpc0-NewsletterForm"
                         name="EMAIL"
                         placeholder="[email protected]"
                         value=""

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -1,15 +1,12 @@
+/** @jsxImportSource theme-ui */
 import React from "react";
-import { Input as ThemeUIInput, Box } from "theme-ui";
+import { Input as ThemeUIInput, Box, Flex } from "theme-ui";
 import { InputProps, sizes, iconSizes } from "./types";
 import { Svg } from "../Svg";
 
 const Input: React.FC<InputProps> = ({ size = sizes.MD, icon, width, ...props }) => {
   return (
-    <Box
-      sx={{
-        width: "fit-content",
-      }}
-    >
+    <Flex sx={{ width }}>
       <ThemeUIInput
         {...props}
         sx={{
@@ -24,16 +21,14 @@ const Input: React.FC<InputProps> = ({ size = sizes.MD, icon, width, ...props })
       {icon && (
         <Box
           sx={{
-            position: "absolute",
-            top: "50%",
-            transform: "translateY(-50%)",
-            right: "15px",
+            transform: "translateX(-25px)",
+            display: "flex",
           }}
         >
           <Svg icon={icon} width={iconSizes[size]} />
         </Box>
       )}
-    </Box>
+    </Flex>
   );
 };