[Starts #171648121] Feature page displays user profile and support updating user info

Author: devel605

package.json

@@ -80,6 +80,7 @@
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "simple-flexbox": "^2.3.1"
   }
 }

src/Assets/DashboardAssets/edit_icon.svg

@@ -0,0 +1,24 @@
+import React from "react";
+
+export default () => (
+  <svg
+    width="18"
+    height="19"
+    viewBox="0 0 18 19"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.99999 19C9.10374 19 9.99905 18.1047 9.99905 17H6.00093C6.00093 18.1047 6.89624 19 7.99999 19ZM14.7309 14.3216C14.1272 13.6728 12.9975 12.6969 12.9975 9.5C12.9975 7.07188 11.295 5.12812 8.99937 4.65125V4C8.99937 3.44781 8.55187 3 7.99999 3C7.44812 3 7.00062 3.44781 7.00062 4V4.65125C4.70499 5.12812 3.00249 7.07188 3.00249 9.5C3.00249 12.6969 1.8728 13.6728 1.26905 14.3216C1.08155 14.5231 0.998429 14.7641 0.999991 15C1.00343 15.5125 1.40562 16 2.00312 16H13.9969C14.5944 16 14.9969 15.5125 15 15C15.0016 14.7641 14.9184 14.5228 14.7309 14.3216Z"
+      fill="#C5C7CD"
+    />
+    <circle
+      cx="13"
+      cy="5"
+      r="3.75"
+      fill="#3751FF"
+      stroke="#F7F8FC"
+      strokeWidth="1.5"
+    />
+  </svg>
+);

src/Assets/DashboardAssets/home_icon.svg

@@ -0,0 +1,19 @@
+import React from "react";
+
+export default () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="6.5" cy="6.5" r="5.75" stroke="#C5C7CD" strokeWidth="1.5" />
+    <path
+      d="M11 11L15 15"
+      stroke="#C5C7CD"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+);

src/Assets/DashboardAssets/icon-bell-new.js

@@ -7,6 +7,8 @@ import "react-toastify/dist/ReactToastify.css";
 import "./App.scss";
 import store from "../Redux/store";
 import Home from "./Home/Home.jsx";
+import Profile from "./Profile/Profile.jsx";
+import Users from "./Users/Users.jsx";
 import SignUpComponent from "./Auth/SignUp/SignUp.jsx";
 import SignInComponent from "./Auth/SignIn/SignIn.jsx";
 import Protected from "./Shared/ProtectedRoute/ProtectedRoute.jsx";
@@ -27,6 +29,8 @@ const App = () => (
             component={EmailVerificationResponse}
           />
           <Protected exact path="/home" component={Home} />
+          <Route exact path="/profile" component={Profile} />
+          <Route exact path="/users" component={Users} />
           <Route exact path="/signup" component={SignUpComponent} />
         </Switch>
       </Router>

src/Assets/DashboardAssets/icon-search.js

@@ -1,20 +1,20 @@
 $font-stack: 14px "Roboto", Nunito, Arial, sans-serif;
 $primary-color: #4d4d4d;
-$background-color: #f5f5f5;
+$background-color: #f7f7f7;
 
 html,
 body {
   font: 100% $font-stack;
   color: $primary-color;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
 }
 
 body {
   line-height: 1.4em;
   background: $background-color;
-  min-width: 230px;
-  max-width: 550px;
   margin: 0 auto;
 }
 

src/Assets/DashboardAssets/notification_icon.svg

@@ -1,12 +1,16 @@
-import React, { Fragment } from "react";
+import React from "react";
+import Sidebar from "../Shared/Dashboard/Sidebar/Sidebar.jsx";
+import Header from "../Shared/Dashboard/Header/Header.jsx";
+import "../Shared/Dashboard/Dashboard.scss";
 
 const Home = () => (
-  <Fragment>
-    <section className="main">
-      <h2>Home Page</h2>
-      <p>Welcome to the dashboard page</p>
-    </section>
-  </Fragment>
+  <div className="App">
+    <div className="grid-container">
+      <Header className="header" />
+      <Sidebar className="grid-sidebar" />
+      <div className="content">Home</div>
+    </div>
+  </div>
 );
 
 export default Home;