Semi-revert

src/components/forms/SearchInput.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import {Pressable, TextInput, View} from 'react-native'
+import {TextInput, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10} from '#/lib/constants'
 import {isNative} from '#/platform/detection'
-import {atoms as a, native, useTheme, web} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
 import * as TextField from '#/components/forms/TextField'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/components/icons/MagnifyingGlass2'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
@@ -22,6 +23,7 @@ export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
   function SearchInput({value, label, onClearText, ...rest}, ref) {
     const t = useTheme()
     const {_} = useLingui()
+    const showClear = value && value.length > 0
 
     return (
       <View style={[a.w_full, a.relative]}>
@@ -40,37 +42,41 @@ export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
             autoCorrect={false}
             autoComplete="off"
             autoCapitalize="none"
+            style={[
+              showClear
+                ? {
+                    paddingRight: 24,
+                  }
+                : {},
+            ]}
             {...rest}
           />
-          {value && value.length > 0 && (
-            <Pressable
+        </TextField.Root>
+
+        {showClear && (
+          <View
+            style={[
+              a.absolute,
+              a.z_10,
+              a.my_auto,
+              a.inset_0,
+              a.justify_center,
+              a.pr_sm,
+              {left: 'auto'},
+            ]}>
+            <Button
               testID="searchTextInputClearBtn"
               onPress={onClearText}
-              accessibilityLabel={_(msg`Clear search query`)}
-              accessibilityHint={undefined}
+              label={_(msg`Clear search query`)}
               hitSlop={HITSLOP_10}
-              style={[
-                a.z_20,
-                a.rounded_full,
-                a.align_center,
-                a.justify_center,
-                native(a.ml_xs),
-                web(a.ml_sm),
-                {width: 20, height: 20},
-                t.name === 'light'
-                  ? {backgroundColor: 'rgba(0, 0, 0, 0.1)'}
-                  : {
-                      backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                    },
-              ]}>
-              <X
-                style={[t.atoms.text_contrast_medium]}
-                width={14}
-                height={14}
-              />
-            </Pressable>
-          )}
-        </TextField.Root>
+              size="tiny"
+              shape="round"
+              variant="ghost"
+              color="secondary">
+              <ButtonIcon icon={X} size="xs" />
+            </Button>
+          </View>
+        )}
       </View>
     )
   },