Minor style changes

components/Colorpicker.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import enhanceWithClickOutside from 'react-click-outside'
-import { BlockPicker } from 'react-color'
+import { TwitterPicker } from 'react-color'
 
 class ColorPicker extends React.Component {
   constructor() {
@@ -33,7 +33,7 @@ class ColorPicker extends React.Component {
           <div className="bg-color" style={{background: this.props.bg}} onClick={this.toggle}></div>
         </div>
         <div className="colorpicker-picker" hidden={!this.state.isVisible}>
-          <BlockPicker color={this.props.bg} onChangeComplete={this.handlePickColor} />
+          <TwitterPicker color={this.props.bg} onChangeComplete={this.handlePickColor} />
         </div>
         <style jsx>{`
           .colorpicker-container {
@@ -67,8 +67,8 @@ class ColorPicker extends React.Component {
 
           .colorpicker-picker {
             position: absolute;
-            margin-left: -32px;
+            margin-left: 32px;
-            margin-top: 9px;
+            margin-top: 10px;
           }
         `}</style>
       </div>

components/Settings.js

@@ -38,9 +38,10 @@ class Settings extends React.Component {
         </div>
         <style jsx>{`
           .settings-container {
+            display: flex;
+            position: relative;
             height: 100%;
             width: 37px;
-            display: flex;
             align-items: center;
             justify-content: center;
             border-radius: 3px;
@@ -72,11 +73,12 @@ class Settings extends React.Component {
 
           .settings-settings {
             display: none;
+            position: absolute;
+            top: 48px;
+            left: 0;
             border: 0.5px solid #000;
             width: 184px;
             border-radius: 3px;
-            position: absolute;
-            margin-top: 132px;
             background: ${PALETTE.EDITOR_BG};
           }
         `}</style>

components/svg/Logo.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 280 280">
+  <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 280 280">
     <g fill="#F8E81C" fillRule="evenodd">
       <path fillRule="nonzero" d="M140,280 C62.680135,280 0,217.319865 0,140 C0,62.680135 62.680135,0 140,0 C217.319865,0 280,62.680135 280,140 C280,217.319865 217.319865,280 140,280 Z M140,272 C212.901587,272 272,212.901587 272,140 C272,67.098413 212.901587,8 140,8 C67.098413,8 8,67.098413 8,140 C8,212.901587 67.098413,272 140,272 Z M140.501845,259.926199 C74.5455954,259.926199 21.0774908,206.458095 21.0774908,140.501845 C21.0774908,74.5455954 74.5455954,21.0774908 140.501845,21.0774908 C206.458095,21.0774908 259.926199,74.5455954 259.926199,140.501845 C259.926199,206.458095 206.458095,259.926199 140.501845,259.926199 Z M140.501845,251.926199 C202.039817,251.926199 251.926199,202.039817 251.926199,140.501845 C251.926199,78.9638734 202.039817,29.0774908 140.501845,29.0774908 C78.9638734,29.0774908 29.0774908,78.9638734 29.0774908,140.501845 C29.0774908,202.039817 78.9638734,251.926199 140.501845,251.926199 Z"/>
       <g transform="translate(49 118)">

pages/index.js

@@ -86,15 +86,17 @@ class Index extends React.Component {
           <style jsx>{`
             .main {
               display: flex;
+              justify-content: center;
               flex-direction: column;
               align-items: center;
               height: 100vh;
               min-width: 848px;
+              min-height: 704px;
             }
 
             .header {
-              margin: 40px 0 32px;
+              margin: 40px 0 48px;
-              width: 704px;
+              width: 648px;
             }
 
             .header-content {