Merge branch 'styles' into 'develop'

Improve search input styles on aliases/list editor pages

See merge request soapbox-pub/soapbox-fe!833

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>

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>

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;

app/styles/components/filters.scss

@@ -97,4 +97,8 @@
       }
     }
   }
+
+  .simple_form select {
+    margin-top: 0;
+  }
 }

app/styles/components/list-forms.scss

@@ -39,8 +39,8 @@
       flex: 1 1;
     }
 
-    > .search__icon .fa {
-      right: 102px !important;
+    > .search__icon {
+      position: relative;
     }
 
     > .button {

app/styles/components/search.scss

@@ -183,8 +183,8 @@
     padding: 12px 36px 12px 16px;
   }
 
-  .search__icon .svg-icon {
-    right: 24px;
+  .search__icon {
+    position: relative;
   }
 }