fix(UI/wrapper): convert inline styles to sass

UI/src/components/wrapper/index.js

@@ -1,15 +1,16 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
+import Scrollbars from 'react-custom-scrollbars'
 import Logotype from '../logotype'
-import styles from './styles'
+import './wrapper.sass'
-import './wrapper.css'
 
 class Wrapper extends Component {
   render () {
-    return <div style={styles.root}>
+    return <div className='wrapper'>
-      <div style={styles.background} />
+      <Scrollbars autoHeight autoHeightMax='100vh'>
-      <div style={styles.container}>
+        <div className='wrapper__background' />
-        <nav uk-navbar='' style={styles.nav} className='uk-navbar-transparent'>
+        <div className='wrapper__container'>
+          <nav uk-navbar='' className='wrapper__nav' className='uk-navbar-transparent'>
             <div className='uk-navbar-left'>
               <Link to="/">
                 <Logotype style={{ height: '2rem' }} className='wrapper__logotype' />
@@ -22,12 +23,13 @@ class Wrapper extends Component {
               </ul>
             </div>
           </nav>
-        <main>
+          <main className="wrapper__content">
             {
               this.props.children
             }
           </main>
         </div>
+      </Scrollbars>
     </div>
   }
 }

UI/src/components/wrapper/styles.js

@@ -1,25 +0,0 @@
-
-export default {
-  root: {
-    backgroundColor: 'var(--c-1)'
-  },
-
-  container: {
-    width: 960,
-    margin: '0 auto'
-  },
-
-  background: {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'var(--c-1)',
-    zIndex: -1000
-  },
-
-  nav: {
-    padding: '0 20px'
-  }
-}

UI/src/components/wrapper/wrapper.css

@@ -1,4 +0,0 @@
-.wrapper__logo:hover mask {
-  /* transform: translate 1s ease-in-out repeat; */
-  transform: rotate(30deg)
-}

UI/src/components/wrapper/wrapper.sass

@@ -0,0 +1,23 @@
+// .wrapper__logo:hover mask
+//   /* transform: translate 1s ease-in-out repeat; */
+//   transform: rotate(30deg)
+
+.wrapper
+
+  &__background
+    background-color: var(--c-1)
+    position: fixed
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    z-index: -1000
+
+  &__container
+    width: 960px
+    margin: 0 auto
+
+  &__nav
+    padding: 0 20px
+
+