Add basic styling to user page

6 files changed, 47 insertions, 21 deletions

diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index 9a99833..8acbe99 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -89,25 +89,27 @@ class Search extends React.Component {
     } = this.state;
 
     return (
-      <div className={classnames('search', { 'search--has-focus': hasFocus })}>
-        <div className="search__input-wrapper">
-          <div className="search__icon-wrapper">
-            <IconFromUserType
-              userType={isExactMatch ? users.byId[selectedResult].type : null}
-              defaultIcon={<SearchIcon />}
+      <div className="search">
+        <div className={classnames('search-overflow', { 'search--has-focus': hasFocus })}>
+          <div className="search__input-wrapper">
+            <div className="search__icon-wrapper">
+              <IconFromUserType
+                userType={isExactMatch ? users.byId[selectedResult].type : null}
+                defaultIcon={<SearchIcon />}
+              />
+            </div>
+            <input
+              id="search__input"
+              onChange={event => dispatch(inputChange(event.target.value))}
+              onKeyDown={this.onKeyDown}
+              value={searchText}
+              placeholder="Zoeken"
+              onFocus={this.onFocus}
+              onBlur={this.onBlur}
             />
           </div>
-          <input
-            id="search__input"
-            onChange={event => dispatch(inputChange(event.target.value))}
-            onKeyDown={this.onKeyDown}
-            value={searchText}
-            placeholder="Zoeken"
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-          />
+          <Results />
         </div>
-        <Results />
       </div>
     );
   }
diff --git a/src/client/react/components/page/User.js b/src/client/react/components/page/User.js
index ea8cd10..ff304c0 100644
--- a/src/client/react/components/page/User.js
+++ b/src/client/react/components/page/User.js
@@ -14,8 +14,12 @@ const App = ({ match }) => {
   }
 
   return (
-    <div>
-      <Search urlUser={user} />
+    <div className="page-user">
+      <div className="menu">
+        <div className="menu-container">
+          <Search urlUser={user} />
+        </div>
+      </div>
       <View user={user} />
     </div>
   );
diff --git a/src/client/style/_component-search.scss b/src/client/style/_component-search.scss
index d819e6f..51d6b4a 100644
--- a/src/client/style/_component-search.scss
+++ b/src/client/style/_component-search.scss
@@ -1,6 +1,13 @@
 .search {
-  border-radius: 2px;
-  background-color: white;
+  height: 54px;
+  position: relative;
+
+  &-overflow {
+    border-radius: 2px;
+    background-color: white;
+    position: absolute;
+    width: 100%;
+  }
 
   &--has-focus {
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
diff --git a/src/client/style/_page-index.scss b/src/client/style/_page-index.scss
index 6fe7739..c09f996 100644
--- a/src/client/style/_page-index.scss
+++ b/src/client/style/_page-index.scss
@@ -6,7 +6,7 @@
   .container {
     max-width: 600px;
     margin: 0 auto;
-    padding: 20px;
+    padding: 8px;
 
     img {
       display: block;
@@ -14,6 +14,7 @@
     }
 
     .search {
+      z-index: 1; // Position search above help-box
       margin-top: 64px;
     }
   }
diff --git a/src/client/style/_page-user.scss b/src/client/style/_page-user.scss
new file mode 100644
index 0000000..395e492
--- /dev/null
+++ b/src/client/style/_page-user.scss
@@ -0,0 +1,11 @@
+.page-user {
+  .menu {
+    background-color: #F44336;
+
+    &-container {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 8px;
+    }
+  }
+}
diff --git a/src/client/style/index.scss b/src/client/style/index.scss
index d2ad825..763a329 100644
--- a/src/client/style/index.scss
+++ b/src/client/style/index.scss
@@ -8,6 +8,7 @@ body {
 }
 
 @import "page-index";
+@import "page-user";
 
 @import "component-search";
 @import "component-help-box";