Change search components classes and styling to match upstream

5 files changed, 34 insertions, 93 deletions

diff --git a/app/javascript/flavours/glitch/features/compose/components/search.js b/app/javascript/flavours/glitch/features/compose/components/search.js
index 1d96933ea..b25555d0f 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search.js
+++ b/app/javascript/flavours/glitch/features/compose/components/search.js
@@ -36,7 +36,7 @@ class SearchPopout extends React.PureComponent {
       <div style={{ ...style, position: 'absolute', width: 285, zIndex: 2 }}>
         <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
           {({ opacity, scaleX, scaleY }) => (
-            <div className='drawer--search--popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
+            <div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
               <h4><FormattedMessage id='search_popout.search_format' defaultMessage='Advanced search format' /></h4>
 
               <ul>
@@ -128,14 +128,14 @@ class Search extends React.PureComponent {
   render () {
     const { intl, value, submitted } = this.props;
     const { expanded } = this.state;
-    const active = value.length > 0 || submitted;
-    const computedClass = classNames('drawer--search', { active });
+    const hasValue = value.length > 0 || submitted;
 
     return (
-      <div className={computedClass}>
+      <div className='search'>
         <label>
           <span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
           <input
+            className='search__input'
             type='text'
             placeholder={intl.formatMessage(messages.placeholder)}
             value={value || ''}
@@ -145,17 +145,19 @@ class Search extends React.PureComponent {
             onBlur={this.handleBlur}
           />
         </label>
+
         <div
           aria-label={intl.formatMessage(messages.placeholder)}
-          className='icon'
+          className='search__icon'
           onClick={this.handleClear}
           role='button'
           tabIndex='0'
         >
-          <Icon icon='search' />
-          <Icon icon='times-circle' />
+          <Icon icon='search' className={hasValue ? '' : 'active'} />
+          <Icon icon='times-circle' className={hasValue ? 'active' : ''} />
         </div>
-        <Overlay show={expanded && !active} placement='bottom' target={this}>
+
+        <Overlay show={expanded && !hasValue} placement='bottom' target={this}>
           <SearchPopout />
         </Overlay>
       </div>
diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js
index 4dd27f845..1874c9355 100644
--- a/app/javascript/flavours/glitch/features/ui/index.js
+++ b/app/javascript/flavours/glitch/features/ui/index.js
@@ -317,7 +317,7 @@ export default class UI extends React.Component {
   handleHotkeySearch = e => {
     e.preventDefault();
 
-    const element = this.node.querySelector('.drawer--search input');
+    const element = this.node.querySelector('.search__input');
 
     if (element) {
       element.focus();
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index 602489abb..6184e70be 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -73,90 +73,16 @@
   }
 }
 
-.drawer--search {
+.search {
   position: relative;
   margin-bottom: 10px;
   flex: none;
 
   @include limited-single-column('screen and (max-width: 360px)') { margin-bottom: 0 }
   @include single-column('screen and (max-width: 630px)') { font-size: 16px }
-
-  input {
-    display: block;
-    box-sizing: border-box;
-    margin: 0;
-    border: none;
-    padding: 15px 30px 15px 15px;
-    width: 100%;
-    outline: 0;
-    color: $darker-text-color;
-    background: $ui-base-color;
-    font-size: 14px;
-    font-family: inherit;
-    line-height: 16px;
-
-    &:focus {
-      outline: 0;
-      background: lighten($ui-base-color, 4%);
-    }
-  }
-
-  & > .icon {
-    display: block;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    width: 18px;
-    height: 18px;
-    color: $secondary-text-color;
-    font-size: 18px;
-    line-height: 18px;
-    z-index: 2;
-
-    .fa {
-      display: inline-block;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      opacity: 0;
-      cursor: default;
-      pointer-events: none;
-      transition: all 100ms linear;
-      transition-property: color, transform, opacity;
-    }
-
-    .fa-search {
-      opacity: 0.3;
-      transform: rotate(0deg);
-    }
-
-    .fa-times-circle {
-      transform: rotate(-90deg);
-      cursor: pointer;
-
-      &:hover { color: $primary-text-color }
-    }
-  }
-
-  &.active {
-    & > .icon {
-      .fa-search {
-        opacity: 0;
-        transform: rotate(90deg);
-      }
-
-      .fa-times-circle {
-        opacity: 0.3;
-        pointer-events: auto;
-        transform: rotate(0deg);
-      }
-    }
-  }
 }
 
-.drawer--search--popout {
+.search-popout {
   @include search-popout();
 }
 
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index 3ef141133..7c5039efc 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -3,13 +3,25 @@
 }
 
 .search__input {
+  @include search-input();
+
   display: block;
-  padding: 10px;
+  padding: 15px;
   padding-right: 30px;
-  @include search-input();
+  line-height: 18px;
+  font-size: 16px;
 }
 
 .search__icon {
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &::-moz-focus-inner,
+  &:focus {
+    outline: 0 !important;
+  }
+
   .fa {
     position: absolute;
     top: 16px;
@@ -18,7 +30,7 @@
     display: inline-block;
     opacity: 0;
     transition: all 100ms linear;
-    transition-property: transform, opacity;
+    transition-property: color, transform, opacity;
     font-size: 18px;
     width: 18px;
     height: 18px;
@@ -33,17 +45,18 @@
   }
 
   .fa-search {
-    transform: rotate(90deg);
+    transform: rotate(0deg);
 
     &.active {
-      pointer-events: none;
-      transform: rotate(0deg);
+      pointer-events: auto;
+      opacity: 0.3;
     }
   }
 
   .fa-times-circle {
     top: 17px;
     transform: rotate(0deg);
+    color: $action-button-color;
     cursor: pointer;
 
     &.active {
@@ -51,7 +64,7 @@
     }
 
     &:hover {
-      color: $primary-text-color;
+      color: lighten($action-button-color, 7%);
     }
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index ca962abd2..e0f3d62a7 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -6,7 +6,7 @@
   height: calc(100% - 10px);
   overflow-y: hidden;
 
-  .drawer--search input {
+  .search__input {
     line-height: 18px;
     font-size: 16px;
     padding: 15px;