From b9153b8866e728b648c9ac57611324ad00b5dbf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 31 Oct 2021 21:51:56 +0100
Subject: [PATCH] Improve search input on aliases/list editor pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/aliases/components/search.js     |  3 +--
 app/soapbox/features/list_editor/components/search.js |  3 +--
 app/styles/components/aliases.scss                    | 11 ++++-------
 app/styles/components/list-forms.scss                 |  4 ++--
 app/styles/components/search.scss                     |  4 ++--
 5 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/app/soapbox/features/aliases/components/search.js b/app/soapbox/features/aliases/components/search.js
index 1416b0390..423063944 100644
--- a/app/soapbox/features/aliases/components/search.js
+++ b/app/soapbox/features/aliases/components/search.js
@@ -72,8 +72,7 @@ class Search extends React.PureComponent {
         </label>
 
         <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
-          <Icon id='search' className={classNames({ active: !hasValue })} />
-          <Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
+          <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
         </div>
         <Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
       </div>
diff --git a/app/soapbox/features/list_editor/components/search.js b/app/soapbox/features/list_editor/components/search.js
index 0f300a6e3..c3d883745 100644
--- a/app/soapbox/features/list_editor/components/search.js
+++ b/app/soapbox/features/list_editor/components/search.js
@@ -72,8 +72,7 @@ class Search extends React.PureComponent {
         </label>
 
         <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
-          <Icon id='search' className={classNames({ active: !hasValue })} />
-          <Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
+          <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
         </div>
         <Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
       </div>
diff --git a/app/styles/components/aliases.scss b/app/styles/components/aliases.scss
index a9888a85b..b5906289d 100644
--- a/app/styles/components/aliases.scss
+++ b/app/styles/components/aliases.scss
@@ -18,24 +18,21 @@
     }
   }
 
-  &_search {
+  &_search.search {
     display: flex;
+    align-items: center;
     flex-direction: row;
-    margin: 10px;
+    border-bottom: none;
 
     .search__input {
       padding: 7px 30px 6px 10px;
+      background: none;
     }
 
     > label {
       flex: 1 1;
     }
 
-    > .search__icon .fa {
-      top: 8px;
-      right: 102px !important;
-    }
-
     > .button {
       width: 80px;
       margin-left: 10px;
diff --git a/app/styles/components/list-forms.scss b/app/styles/components/list-forms.scss
index 0212ebd1f..bc784fd31 100644
--- a/app/styles/components/list-forms.scss
+++ b/app/styles/components/list-forms.scss
@@ -39,8 +39,8 @@
       flex: 1 1;
     }
 
-    > .search__icon .fa {
-      right: 102px !important;
+    > .search__icon {
+      position: relative;
     }
 
     > .button {
diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss
index d7f728257..57b8eb363 100644
--- a/app/styles/components/search.scss
+++ b/app/styles/components/search.scss
@@ -183,8 +183,8 @@
     padding: 12px 36px 12px 16px;
   }
 
-  .search__icon .svg-icon {
-    right: 24px;
+  .search__icon {
+    position: relative;
   }
 }