Merge branch 'lcharrier/logo-menu' into 'master'

Moving visualisation title in the menu according to Ninon's zeplin + centering

See merge request behaviors-ai/the_dashboard!4

src/Header/Header.css

@@ -3,20 +3,6 @@
   height: 110px;
 }
 
-/* Name of this piece of software */
-
-#header .title {
-  width: 10vw;
-  font-size: 35px;
-  font-weight: bold;
-  letter-spacing: 0.3px;
-  text-align: left;
-  color: #edc61b;
-  line-height: 100px;
-  float: left;
-  margin-left: 1vw;
-}
-
 /* Name of the algorithm being run */
 
 #header .algo-name {
@@ -27,7 +13,7 @@
   text-align: center;
   letter-spacing: 0.3px;
   padding-top: 25px;
-  padding-right: 8vw;
+  padding-right: 10vw;
   float:left;
 }
 
@@ -55,9 +41,9 @@
 /* Buttons to control the algorithm's lifecycle : play/pause, restart, next step, etc. */
 
 #header .controls {
-  padding-right:7vw;
-  padding-left:4vw;
-  padding-top: 20px;
+  padding-right:9vw;
+  padding-left:12vw;
+  padding-top: 24px;
   float: left;
   filter: invert(26%) sepia(0%) saturate(0%) hue-rotate(98deg) brightness(99%) contrast(91%);
 }

src/Header/index.js

@@ -17,9 +17,6 @@ export function Header(props) {
   })
   return (
   <div id="header">
-    <div className="title">
-      Lavizu
-    </div>
     <div className="controls">
       {buttons}
     </div>

src/Menu/Menu.css

 /*! react-sidenav v0.4.5 | (c) 2018 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-sidenav */
 
+/* Name of this piece of software */
+
+.title {
+  display:none;
+}
+
 /* Menu level 1 title */
 .menu-title-level1 {
   width: 100%;
@@ -13,9 +19,9 @@
   letter-spacing: 0.2px;
   color: #484848;
   background-color:#d8d8d8;
-  padding-left: 20px;
+  padding-left: 25px;
   margin: 1.2vh 0px 0.5vh 0px;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 /* Menu level 2 title */
@@ -30,14 +36,14 @@
   line-height: normal;
   letter-spacing: 0.2px;
   color: #484848;
-  padding-left: 20px;
-  margin: 1.5vh 0px 0.5vh 0px;
+  padding-left: 25px;
+  margin: 1.5vh 10px 0.5vh 0px;
 }
 
 /*Menu icons*/
 .menu-button {
   height: 25px;
-  margin: 0.9vh 0px 0px 7px;
+  margin: 1.2vh 0px 0px 5px;
   filter: invert(14%) sepia(1%) saturate(2442%) hue-rotate(316deg) brightness(98%) contrast(77%);
 }
 
@@ -51,8 +57,9 @@
 
 /* Behaviors logo */
 .logo {
-  margin: 5px 5px 1vh 5px;
-  height: 100px;
+  margin: 20px 0px 1vh 20px;
+  height: 80px;
+  display: inline-block;
 }
 
 /* Footer with About us and lock button */
@@ -64,6 +71,7 @@
 
 .footer:hover {
   filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(111%) contrast(86%);
+  cursor: pointer;
 }
 
 .lock-button {
@@ -74,6 +82,22 @@
   margin-left:30px;
 }
 
+.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .title {
+  display: inline-block;
+  float:right;
+  width: 100px;
+  height:80px;
+  font-size: 35px;
+  font-weight: bold;
+  letter-spacing: 0.3px;
+  text-align: left;
+  color: #edc61b;
+  line-height: 80px;
+  margin-right: 22px;
+  margin-top:18px;
+
+}
+
 /* Side navigation menu */
 .sidenav---sidenav---_2tBP {
   z-index: 1006;
@@ -95,7 +119,7 @@
   display: block;
 }
 .sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL {
-  min-width: 220px;
+  min-width: 240px;
 }
 .sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- .sidenav---navicon---3gCRo + .sidenav---navtext---1AE_f {
   display: inline-block;

src/Menu/index.js

@@ -13,9 +13,12 @@ export function Menu(props) {
       }}
     >
       <img className="logo"
-        src={window.location.origin + "/images/logoBehaviors.png"}
+        src={window.location.origin + "/images/logoBehaviors2.png"}
         alt="logo of the Behaviors.ai project"
         />
+      <div className="title">
+        Lavizu
+      </div>
       <br></br>
       <SideNav.Toggle />