more tweaks

bluesky-social · Oct 8, 2024 · a1c439e · a1c439e
1 parent 7dfc761
commit a1c439e
Showing 1 changed file with 28 additions and 16 deletions.
diff --git a/src/components/forms/SearchInput.tsx b/src/components/forms/SearchInput.tsx
@@ -1,12 +1,11 @@
 import React from 'react'
-import {TextInput, View} from 'react-native'
+import {Pressable, 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, useTheme} from '#/alf'
-import {Button, ButtonIcon} from '#/components/Button'
+import {atoms as a, native, useTheme, web} from '#/alf'
 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'
@@ -44,19 +43,32 @@ export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
             {...rest}
           />
           {value && value.length > 0 && (
-            <View style={[a.z_10, a.justify_center]}>
-              <Button
-                testID="searchTextInputClearBtn"
-                onPress={onClearText}
-                label={_(msg`Clear search query`)}
-                hitSlop={HITSLOP_10}
-                size="tiny"
-                shape="round"
-                variant="ghost"
-                color="secondary">
-                <ButtonIcon icon={X} size="xs" />
-              </Button>
-            </View>
+            <Pressable
+              testID="searchTextInputClearBtn"
+              onPress={onClearText}
+              accessibilityLabel={_(msg`Clear search query`)}
+              accessibilityHint={undefined}
+              hitSlop={HITSLOP_10}
+              style={[
+                a.rounded_full,
+                a.align_center,
+                a.justify_center,
+                native(a.ml_xs),
+                web(a.ml_sm),
+                a.z_20,
+                {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>
       </View>