Add basic styling to user page

2 files changed, 24 insertions, 18 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>
   );