adaPushan

package-lock.json

@@ -4430,6 +4430,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
+      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -18044,6 +18049,7 @@
           "version": "2.3.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
           "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "optional": true,
           "requires": {
             "arr-flatten": "^1.1.0",
             "array-unique": "^0.3.2",
@@ -18081,6 +18087,7 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "optional": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -18089,6 +18096,7 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
           "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "optional": true,
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -18136,6 +18144,7 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           }
@@ -18144,6 +18153,7 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "optional": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -18217,6 +18227,7 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
           "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+          "optional": true,
           "requires": {
             "is-number": "^3.0.0",
             "repeat-string": "^1.6.1"

package.json

@@ -27,6 +27,7 @@
     "@types/react-router-dom": "^5.1.5",
     "@types/redux-logger": "^3.0.8",
     "babel-core": "^7.0.0-bridge.0",
+    "bootstrap": "^4.5.0",
     "immer": "^6.0.9",
     "jscpd": "^3.3.1",
     "prettier": "^2.0.5",

src/assets/dropdown-white.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0H23.977V24H0z" transform="rotate(90 13.5 2.5)"/>
+        <path fill="#4B4B4B" d="M8.998 10.02L15.002 8.998 13.975 14.998z" transform="rotate(90 13.5 2.5) rotate(45 12 11.998)"/>
+    </g>
+</svg>

src/index.tsx

 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
+import "bootstrap/dist/css/bootstrap.min.css"
 import * as Sentry from "@sentry/browser";
 import { Provider } from "react-redux";
 import App from "./App";

src/pages/Home.tsx

@@ -104,9 +104,9 @@ export default function MiniDrawer() {
           [classes.appBarShift]: open,
         })}
       >
-        <Toolbar>
+        <Toolbar style={{ flex: 1, backgroundColor: 'white' }}>
           <IconButton
-            color="inherit"
+            color="default"
             aria-label="open drawer"
             onClick={handleDrawerOpen}
             edge="start"
@@ -116,9 +116,20 @@ export default function MiniDrawer() {
           >
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" noWrap>
-            Mini variant drawer
-          </Typography>
+          <div style={{ backgroundColor: 'white', height: '70px', display: 'flex', flex: 1, placeContent: 'flex-end' }}>
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20 }}>
+              <div style={{ width: 44, height: 44, backgroundColor: '#354960', borderRadius: 30, marginRight: 10 }} />
+              <Typography style={{ color: 'black' }}>Tommy</Typography>
+              <img src={require('../assets/dropdown-white.svg')} alt="React Logo" style={{ marginLeft: 15 }} />
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 10, paddingLeft: 10, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
+              <img src={require('../assets/search.png')} alt="React Logo" style={{ height: 18, width: 18 }} />
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: 20, paddingLeft: 20, borderLeftColor: '#c2c2c2', borderLeftWidth: .2, borderLeftStyle: 'solid' }}>
+              <img src={require('../assets/flagEnglish.png')} alt="React Logo" style={{ height: 32, width: 32 }} />
+              <Typography style={{ color: 'black' }}>EN</Typography>
+            </div>
+          </div>
         </Toolbar>
       </AppBar>
       <Drawer