fix: minur ux tweaks

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)}

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 {}}

frontend/src/component/menu/drawer.jsx

@@ -41,11 +41,11 @@ function renderLink(link) {
     }
 }
 
-export const DrawerMenu = ({ links = [] }) => (
+export const DrawerMenu = ({ links = [], title = 'Unleash' }) => (
-    <Drawer className="mdl-color--white">
+    <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,
 };

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>
         );
     }

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 {