fix styling #153

packages/unleash-frontend-next/src/App.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Layout, Panel, NavDrawer } from 'react-toolbox';
 import { AppBar, IconButton } from 'react-toolbox';
-import style from './style'
+import style from './style';
 
 import Navigation from './Navigation';
 
@@ -21,14 +21,11 @@ export default class App extends Component {
                     <IconButton icon="menu" onClick={ this.toggleDrawerActive }/>
                 </AppBar>
                 <Layout>
-                    <NavDrawer
-                        active={this.state.drawerActive}
-                        permanentAt="sm" style={{ width: '200px' }}
-                    >
+                    <NavDrawer active={this.state.drawerActive} permanentAt="sm" style={{ width: '200px' }}>
                         <Navigation />
                     </NavDrawer>
                     <Panel scrollY={false}>
-                        <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem', minHeight: '100%' }}>
+                        <div style={{padding: '1.8em'}}>
                             {this.props.children}
                         </div>
 

packages/unleash-frontend-next/src/Navigation.jsx

@@ -5,11 +5,10 @@ import { ListSubHeader, List, ListItem } from 'react-toolbox';
 export default class UnleashNav extends Component {
     render () {
         return (
-                <List>
-                    <ListSubHeader caption="Menu" />
-                    <ListItem><Link to="/features">Feature Toggles </Link></ListItem>
-                    <ListItem><Link to="/strategies">Strategies </Link></ListItem>
-                    <ListItem><a href="https://github.com/finn-no/unleash/" target="_blank">GitHub </a></ListItem>
+                <List selectable ripple>
+                    <Link to="/features"><ListItem selectable className="active" caption="Feature Toggles" /></Link>
+                    <Link to="/strategies"><ListItem selectable caption="Strategies" /></Link>
+                    <a href="https://github.com/finn-no/unleash/" target="_blank"><ListItem selectable caption="GitHub" /></a>
                 </List>
         );
     }

packages/unleash-frontend-next/src/theme/_config.scss

@@ -1,10 +1,10 @@
 @import "~react-toolbox/lib/colors";
 @import "~react-toolbox/lib/globals";
+@import "~react-toolbox/lib/mixins";
 
 $color-primary:$palette-blue-400;
 $color-primary-dark: $palette-blue-700;
 
-$appbar-height: 4.4 * $unit !default;
 $appbar-height-m-portrait: 5.6 * $unit !default;
 $appbar-height-m-landscape: 4.8 * $unit !default;
 
@@ -19,12 +19,90 @@ $navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
 // sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
 $navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
 
-body {
-    padding: 0;
-    margin: 0;
-    border: 0;
-    outline: 0;
+html {
+  font-size: 62.5%;
+}
 
+body {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  font-family: Roboto, sans-serif;
+  font-size: 1.6rem;
+  -webkit-touch-callout: none;
+  * {
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  }
+}
+
+a, abbr, address, article, aside, audio, b, blockquote, body, caption, cite,
+code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1,
+h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label,
+legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span,
+strong, sub, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small {
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+  text-size-adjust: 100%;
+}
+
+a {
+  text-decoration: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+input:not([type="checkbox"]):not([type="radio"]), button {
+  outline: none;
+  appearance: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+
+// -- Material design font sizes
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+  @include typo-display-3($color-contrast: true);
+}
+
+h1 {
+  @include typo-display-3;
+}
+
+h2 {
+  @include typo-display-2;
+}
+
+h3 {
+  @include typo-display-1;
+}
+
+h4 {
+  @include typo-headline;
+}
+
+h5 {
+  @include typo-title;
+}
+
+h6 {
+  @include typo-subhead;
+}
+
+p {
+  @include typo-body-1;
 }