From dd4df89f22d0e2cefa7e8b1ce1d82f66131c5b41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 19 May 2022 15:32:30 +0200
Subject: [PATCH] Search styles on aliases page
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.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
index 516a38884..8e601ccb0 100644
--- a/app/soapbox/features/aliases/components/search.tsx
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -40,23 +40,23 @@ const Search: React.FC = () => {
   const hasValue = value.length > 0;
 
   return (
-    <div className='aliases_search search'>
-      <label>
+    <div className='flex items-center gap-1'>
+      <label className='flex-grow relative'>
         <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
 
         <input
-          className='search__input'
+          className='block w-full sm:text-sm dark:bg-slate-800 dark:text-white dark:placeholder:text-gray-500 focus:ring-indigo-500 focus:border-indigo-500 rounded-full'
           type='text'
           value={value}
           onChange={handleChange}
           onKeyUp={handleKeyUp}
           placeholder={intl.formatMessage(messages.search)}
         />
-      </label>
 
-      <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
-      </div>
+        <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
+          <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
+        </div>
+      </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
     </div>
   );