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

UI/src/components/wrapper/index.js

@@ -1,33 +1,35 @@
 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.css'
+import './wrapper.sass'
 
 class Wrapper extends Component {
   render () {
-    return <div style={styles.root}>
-      <div style={styles.background} />
-      <div style={styles.container}>
-        <nav uk-navbar='' style={styles.nav} className='uk-navbar-transparent'>
-          <div className='uk-navbar-left'>
-            <Link to="/">
-              <Logotype style={{ height: '2rem' }} className='wrapper__logotype' />
-            </Link>
-          </div>
-          <div className='uk-navbar-right'>
-            <ul className='uk-navbar-nav'>
-              <li><Link to='/start'>Get Started</Link></li>
-              <li><a href='https://discord.gg/PWQUVsd'>Support Discord</a></li>
-            </ul>
-          </div>
-        </nav>
-        <main>
-          {
-            this.props.children
-          }
-        </main>
-      </div>
+    return <div className='wrapper'>
+      <Scrollbars autoHeight autoHeightMax='100vh'>
+        <div className='wrapper__background' />
+        <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' />
+              </Link>
+            </div>
+            <div className='uk-navbar-right'>
+              <ul className='uk-navbar-nav'>
+                <li><Link to='/start'>Get Started</Link></li>
+                <li><a href='https://discord.gg/PWQUVsd'>Support Discord</a></li>
+              </ul>
+            </div>
+          </nav>
+          <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
+
+