From f60fc288ce606bb217d3912a09fff083f0a816e8 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Wed, 21 Mar 2018 15:44:39 +0100
Subject: Migrate Search styles

---
 src/client/react/components/container/Search.js   | 10 +++---
 src/client/react/components/container/Search.scss | 42 +++++++++++++++++++++++
 2 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/client/react/components/container/Search.scss

(limited to 'src/client')

diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index c968957..edaf72c 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -33,6 +33,8 @@ import Menu from './Menu';
 import Results from './Results';
 import IconFromUserType from '../presentational/IconFromUserType';
 
+import styles from './Search.scss';
+
 class Search extends React.Component {
   static propTypes = {
     results: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -143,10 +145,10 @@ class Search extends React.Component {
       searchText === users.byId[urlUser].value;
 
     return (
-      <div className="search">
-        <div className={classnames('search-overflow', { 'search--has-focus': hasFocus })}>
-          <div className="search__input-wrapper">
-            <div className="search__icon-wrapper">
+      <div className={styles.Search}>
+        <div className={classnames(styles.overflow, { [styles.hasFocus]: hasFocus })}>
+          <div className={styles.inputWrapper}>
+            <div className={styles.iconWrapper}>
               <IconFromUserType
                 userType={isExactMatch ? users.byId[urlUser].type : null}
                 defaultIcon={<SearchIcon />}
diff --git a/src/client/react/components/container/Search.scss b/src/client/react/components/container/Search.scss
new file mode 100644
index 0000000..ef629c2
--- /dev/null
+++ b/src/client/react/components/container/Search.scss
@@ -0,0 +1,42 @@
+.Search {
+  height: 54px;
+  position: relative;
+
+  .overflow {
+    border-radius: 2px;
+    background-color: white;
+    position: absolute;
+    width: 100%;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
+
+    &.hasFocus {
+      box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
+    }
+
+    .inputWrapper {
+      display: flex;
+      height: 54px;
+
+      .iconWrapper {
+        height: 54px;
+        padding: 15px;
+
+        svg {
+          height: 24px;
+          width: 24px;
+        }
+      }
+
+      input {
+        border: 0;
+        background-color: transparent;
+        flex-grow: 1;
+        height: inherit;
+        padding: 16px;
+        padding-left: 0px;
+        font-size: 16px;
+        outline: none;
+      }
+    }
+  }
+}
-- 
cgit v1.1