Merge pull request #518 from trilitech/fix-address-pill-right-icon-co…

…lour Fix cross icon size and address pill right icon colour
trilitech · Oct 24, 2023 · c3e982c · c3e982c
2 parents 591dea2 + 8b52af0
commit c3e982c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/assets/icons/XMark.tsx b/src/assets/icons/XMark.tsx
@@ -2,9 +2,16 @@ import { Icon, IconProps } from "@chakra-ui/react";
 
 const XMark: React.FC<IconProps> = props => {
   return (
-    <Icon width="3.5" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <Icon
+      width="18px"
+      height="18px"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
       <path
-        d="M1.5 1.5L10.5 10.5M10.5 1.5L1.5 10.5"
+        d="M4.5 4.5L13.5 13.5M13.5 4.5L4.5 13.5"
         data-testid="xmark-icon-path"
         strokeWidth="1.2"
         strokeLinecap="round"

diff --git a/src/components/AddressAutocomplete/AddressAutocomplete.tsx b/src/components/AddressAutocomplete/AddressAutocomplete.tsx
@@ -164,7 +164,11 @@ export const AddressAutocomplete = <T extends FieldValues, U extends Path<T>>({
               bg="transparent"
               pt="8px"
             />
-            {keepValid ? <ChevronDownIcon mr="12px" data-testid="chevron-icon" /> : <CrossButton />}
+            {keepValid ? (
+              <ChevronDownIcon mr="12px" data-testid="chevron-icon" />
+            ) : (
+              <CrossButton marginRight="14px" />
+            )}
           </Center>
         </Box>
       )}
@@ -215,8 +219,6 @@ const CrossButton = (props: IconProps) => (
   <XMark
     cursor="pointer"
     data-testid="clear-input-button"
-    width="12px"
-    height="12px"
     marginRight="16px"
     stroke={colors.gray[450]}
     {...props}

diff --git a/src/components/AddressPill/AddressPill.tsx b/src/components/AddressPill/AddressPill.tsx
@@ -116,7 +116,7 @@ const AddressPill: React.FC<{ address: Address; mode?: AddressPillMode } & BoxPr
             addressKind={addressKind}
             addressPillMode={mode}
             cursor="pointer"
-            stroke={textColor}
+            stroke={colors.gray[300]}
             marginRight="4px"
           />
         )}