From f476d6c78cf373c38e349f5e249da1912b2e59df Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 23:14:39 -0300
Subject: [PATCH] Change classNames "svg-icon--backspace" and "search__icon" in
 "search" component to use only Tailwind and change "search__icon" to custom
 Tailwind

---
 src/features/aliases/components/search.tsx     |  4 ++--
 src/features/list-editor/components/search.tsx |  4 ++--
 src/styles/tailwind.css                        | 11 +++++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx
index cef6a1fec..122329656 100644
--- a/src/features/aliases/components/search.tsx
+++ b/src/features/aliases/components/search.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases';
-import Icon from 'soapbox/components/icon';
 import { Button } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -53,7 +53,7 @@ const Search: React.FC = () => {
         />
 
         <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
-          <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+          <SvgIcon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('pointer-events-none absolute right-4 top-1/2 z-20 inline-block size-4.5 -translate-y-1/2 cursor-default text-[16px] text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': hasValue })} />
         </div>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
diff --git a/src/features/list-editor/components/search.tsx b/src/features/list-editor/components/search.tsx
index 71f136247..c02f08ef8 100644
--- a/src/features/list-editor/components/search.tsx
+++ b/src/features/list-editor/components/search.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'soapbox/actions/lists';
-import Icon from 'soapbox/components/icon';
 import { Button, Form, HStack, Input } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -45,7 +45,7 @@ const Search = () => {
             placeholder={intl.formatMessage(messages.search)}
           />
           <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-            <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+            <SvgIcon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('pointer-events-none absolute right-4 top-1/2 z-20 inline-block size-4.5 -translate-y-1/2 cursor-pointer text-[16px] text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': hasValue })} />
           </div>
         </label>
 
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 1d1abc969..49e73944e 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,17 @@
 @tailwind utilities;
 
 @layer utilities {
+  .search__icon {
+    &::-moz-focus-inner {
+      border: 0;
+    }
+  
+    &::-moz-focus-inner,
+    &:focus {
+      outline: 0 !important;
+    }
+  }
+
   .focusable:focus,
   .focusable-within:focus-within {
     outline: 0;