From 107f932e030a438a7dd74741bb8e55abc8ef0fd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Mon, 5 Oct 2020 21:51:45 +0200
Subject: [PATCH] fix: minur ux tweaks

---
 .../feature/form/strategy-configure.jsx          |  1 +
 .../__tests__/__snapshots__/drawer-test.jsx.snap | 16 +++++++++++++---
 frontend/src/component/menu/drawer.jsx           |  9 +++++----
 frontend/src/component/menu/header.jsx           |  6 +++---
 frontend/src/component/styles.scss               |  9 +++++++--
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/feature/form/strategy-configure.jsx b/frontend/src/component/feature/form/strategy-configure.jsx
index ce3d3d1da5..d12ba10895 100644
--- a/frontend/src/component/feature/form/strategy-configure.jsx
+++ b/frontend/src/component/feature/form/strategy-configure.jsx
@@ -134,6 +134,7 @@ class StrategyConfigure extends React.Component {
                     }
                     return (
                         <div key={name}>
+                            <br />
                             <StrategyInputPercentage
                                 name={name}
                                 onChange={this.handleConfigChange.bind(this, name)}
diff --git a/frontend/src/component/menu/__tests__/__snapshots__/drawer-test.jsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/drawer-test.jsx.snap
index 380fa40512..9ed03fafc1 100644
--- a/frontend/src/component/menu/__tests__/__snapshots__/drawer-test.jsx.snap
+++ b/frontend/src/component/menu/__tests__/__snapshots__/drawer-test.jsx.snap
@@ -2,7 +2,12 @@
 
 exports[`should render DrawerMenu 1`] = `
 <react-mdl-Drawer
-  className="mdl-color--white"
+  style={
+    Object {
+      "border": 0,
+      "boxShadow": "none",
+    }
+  }
 >
   <span
     className="drawerTitle mdl-layout-title"
@@ -111,7 +116,12 @@ exports[`should render DrawerMenu 1`] = `
 
 exports[`should render DrawerMenu with "features" selected 1`] = `
 <react-mdl-Drawer
-  className="mdl-color--white"
+  style={
+    Object {
+      "border": 0,
+      "boxShadow": "none",
+    }
+  }
 >
   <span
     className="drawerTitle mdl-layout-title"
@@ -134,7 +144,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
   >
     <a
       aria-current="page"
-      className="navigationLink mdl-color-text--grey-900 navigationLink mdl-color-text--black mdl-color--blue-grey-100"
+      className="navigationLink mdl-color-text--grey-900 navigationLink mdl-color-text--black mdl-color--blue-grey-50"
       href="/features"
       onClick={[Function]}
       style={Object {}}
diff --git a/frontend/src/component/menu/drawer.jsx b/frontend/src/component/menu/drawer.jsx
index 755303f28d..9e39c597ad 100644
--- a/frontend/src/component/menu/drawer.jsx
+++ b/frontend/src/component/menu/drawer.jsx
@@ -41,11 +41,11 @@ function renderLink(link) {
     }
 }
 
-export const DrawerMenu = ({ links = [] }) => (
-    <Drawer className="mdl-color--white">
+export const DrawerMenu = ({ links = [], title = 'Unleash' }) => (
+    <Drawer style={{ boxShadow: 'none', border: 0 }}>
         <span className={[styles.drawerTitle, 'mdl-layout-title'].join(' ')}>
             <img src="public/logo.png" width="32" height="32" className={styles.drawerTitleLogo} />
-            <span className={styles.drawerTitleText}>Unleash</span>
+            <span className={styles.drawerTitleText}>{title}</span>
         </span>
         <hr />
         <Navigation className={styles.navigation}>
@@ -54,7 +54,7 @@ export const DrawerMenu = ({ links = [] }) => (
                     key={item.path}
                     to={item.path}
                     className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}
-                    activeClassName={[styles.navigationLink, 'mdl-color-text--black', 'mdl-color--blue-grey-100'].join(
+                    activeClassName={[styles.navigationLink, 'mdl-color-text--black', 'mdl-color--blue-grey-50'].join(
                         ' '
                     )}
                 >
@@ -69,4 +69,5 @@ export const DrawerMenu = ({ links = [] }) => (
 
 DrawerMenu.propTypes = {
     links: PropTypes.array,
+    title: PropTypes.string,
 };
diff --git a/frontend/src/component/menu/header.jsx b/frontend/src/component/menu/header.jsx
index b61eee69a7..366bb498f6 100644
--- a/frontend/src/component/menu/header.jsx
+++ b/frontend/src/component/menu/header.jsx
@@ -35,16 +35,16 @@ class HeaderComponent extends PureComponent {
     }
 
     render() {
-        const { headerBackground, links } = this.props.uiConfig;
+        const { headerBackground, links, name } = this.props.uiConfig;
         const style = headerBackground ? { background: headerBackground } : {};
         return (
             <React.Fragment>
-                <Header title={<Route path="/:path" component={Breadcrum} />} style={style}>
+                <Header scroll seamed title={<Route path="/:path" component={Breadcrum} />} style={style}>
                     <Navigation>
                         <ShowUserContainer />
                     </Navigation>
                 </Header>
-                <DrawerMenu links={links} />
+                <DrawerMenu links={links} title={name} />
             </React.Fragment>
         );
     }
diff --git a/frontend/src/component/styles.scss b/frontend/src/component/styles.scss
index 95e6e390d0..71274a24b6 100644
--- a/frontend/src/component/styles.scss
+++ b/frontend/src/component/styles.scss
@@ -10,7 +10,7 @@
 }
 
 .content {
-    width: 1200px;
+    width: 1100px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 16px;
@@ -25,6 +25,8 @@
 @media (max-width: 1024px) {
     .content {
         width: 100%;
+        margin-left: 0;
+        margin-right: 0;
     }
 }
 @media (max-width: 600px) {
@@ -46,6 +48,7 @@
     padding-bottom: 16px;
     padding-left: 24px !important;
 }
+
 @media screen and (max-width: 1024px) {
     .drawerTitle {
         padding-top: 12px;
@@ -59,14 +62,16 @@
 .drawerTitleText {
     display: inline-block;
     vertical-align: middle;
+    font-size: 0.8em;
 }
 
 .navigation {
-    padding: 8px 0 !important;
+    padding: 8px 5px 8px 0 !important;
 }
 
 .navigationLink {
     padding: 12px 20px !important;
+    border-radius: 0 50px 50px 0;
 }
 @media screen and (max-width: 1024px) {
     .navigationLink {