fix: QA issues on new input (#290)

artsy · Nov 21, 2024 · a8adafc · a8adafc
1 parent 4cf3e92
commit a8adafc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 23 deletions.
diff --git a/src/elements/SearchInput/RoundSearchInput.tsx b/src/elements/SearchInput/RoundSearchInput.tsx
@@ -1,7 +1,8 @@
 import isArray from "lodash/isArray"
 import isString from "lodash/isString"
-import { useCallback, useRef, useState } from "react"
-import { TextInput, TextInputProps } from "react-native"
+import { useCallback, useMemo, useRef, useState } from "react"
+import { Platform, StyleProp, TextInput, TextInputProps, TextStyle } from "react-native"
+import { backgroundColor } from "styled-system"
 import { DEFAULT_HIT_SLOP } from "../../constants"
 import { ArrowLeftIcon, MagnifyingGlassIcon } from "../../svgs"
 import { useColor, useTheme } from "../../utils/hooks"
@@ -75,12 +76,15 @@ export const RoundSearchInput: React.FC<RoundSearchInputProps> = ({
     throw new Error("Avoid controlled inputs and use the defaultValue prop instead")
   }
 
-  const inputStyles = {
-    flex: 1,
-    height: SEARCH_INPUT_CONTAINER_HEIGHT,
-    fontFamily: theme.theme.fonts.sans.regular,
-    fontSize: 16,
-  }
+  const inputStyles: StyleProp<TextStyle> = useMemo(() => {
+    return {
+      flex: 1,
+      height: SEARCH_INPUT_CONTAINER_HEIGHT,
+      fontFamily: theme.theme.fonts.sans.regular,
+      fontSize: 16,
+      lineHeight: 20,
+    }
+  }, [])
 
   const renderAndroidPlaceholderMeasuringHack = useCallback(() => {
     if (!isArray(placeholder)) {
@@ -170,18 +174,7 @@ export const RoundSearchInput: React.FC<RoundSearchInputProps> = ({
           haptic="impactLight"
         >
           {!isFocused ? (
-            <MagnifyingGlassIcon
-              fill="black60"
-              width={ICON_SIZE}
-              height={ICON_SIZE}
-              style={{
-                transform: [
-                  {
-                    scaleX: -1,
-                  },
-                ],
-              }}
-            />
+            <MagnifyingGlassIcon fill="black60" width={ICON_SIZE} height={ICON_SIZE} />
           ) : (
             <ArrowLeftIcon long fill="black60" width={ICON_SIZE} height={ICON_SIZE} />
           )}

diff --git a/src/svgs/MagnifyingGlassIcon.tsx b/src/svgs/MagnifyingGlassIcon.tsx
@@ -4,11 +4,12 @@ import { useColor } from "../utils/hooks"
 export const MagnifyingGlassIcon = ({ fill, ...restProps }: IconProps) => {
   const color = useColor()
   return (
-    <Icon {...restProps} viewBox="0 0 18 18">
+    <Icon {...restProps} viewBox="0 0 24 24">
       <Path
-        d="M11.5 3a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7zm0-1A4.5 4.5 0 1 0 16 6.5 4.49 4.49 0 0 0 11.5 2zM9.442 9.525l-.88-.88L2.06 15.06l.88.88 6.502-6.415z"
+        fillRule="evenodd"
+        clipRule="evenodd"
         fill={color(fill ?? "onBackgroundHigh")}
-        fillRule="nonzero"
+        d="M19.6 21L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L21 19.6L19.6 21ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z"
       />
     </Icon>
   )