Current database bound functionality moved to Profile page

client/src/App.js

@@ -4,6 +4,11 @@ import {ApolloProvider} from 'react-apollo';
 
 import Navbar from './components/Navbar'
 import { Route, BrowserRouter, Switch } from 'react-router-dom'
+
+// Components
+
+
+
 import Home from './components/Home'
 import Profile from './components/Profile'
 import Browse from './components/Browse'
@@ -12,11 +17,6 @@ import About from './components/About'
 import Contact from './components/Contact'
 import Post from './components/Post'
 
-// Components
-
-import UserList from './components/UserList';
-import AddUser from './components/AddUser';
-
 // Apollo Client Setup
 
 const client = new ApolloClient({
@@ -42,11 +42,6 @@ class App extends Component {
             </Switch>
           </div>
 
-          <div id="main">
-            <h1>Advanced Algos - Users Module</h1>
-            <UserList/>
-            <AddUser/>
-          </div>
         </ApolloProvider>
       </BrowserRouter>
     );

client/src/components/Browse.js

@@ -5,7 +5,7 @@ const Browse = () => {
     <div>
       <div className="container">
         <h4 className="center">Browse</h4>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae repudiandae repellat illo magni eligendi cupiditate voluptates eius nam voluptate. Incidunt nihil ullam quae quia officia quaerat, deserunt eligendi explicabo totam?</p>
+        <p>Here we will have the Browse functionality. we will allow end users to navigate through a directory like list of system users. We need to resolve pagination and be able to filter users by their role. </p>
       </div>
     </div>
   )

client/src/components/Profile.js

@@ -1,12 +1,13 @@
 import React from 'react'
 
+import UserList from './UserList';
+import AddUser from './AddUser';
+
 const Profile = () => {
   return (
-    <div>
-      <div className="container">
-        <h4 className="center">Profile</h4>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae repudiandae repellat illo magni eligendi cupiditate voluptates eius nam voluptate. Incidunt nihil ullam quae quia officia quaerat, deserunt eligendi explicabo totam?</p>
-      </div>
+    <div id="main">
+      <UserList/>
+      <AddUser/>
     </div>
   )
 }

client/src/index.css

@@ -73,10 +73,10 @@ form button{
 
 #user-profile{
     position: fixed;
-    top: 0;
+    bottom: 0;
     right: 0;
     width: 40%;
-    height: 100%;
+    height: 80%;
     background: #AD1457;
     padding: 30px;
     overflow: auto;