Fix layout at initial modal

browser/main/modals/InitModal.js

@@ -5,7 +5,6 @@ import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { hashHistory } from 'react-router'
 import _ from 'lodash'
-import ModalEscButton from 'browser/components/ModalEscButton'
 
 const CSON = require('@rokt33r/season')
 const path = require('path')
@@ -202,17 +201,12 @@ class InitModal extends React.Component {
         tabIndex='-1'
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
-
-        <div styleName='header'>
-          <div styleName='header-title'>Initialize Storage</div>
-        </div>
-        <ModalEscButton handleEscButtonClick={this.props.close} />
         <div styleName='body'>
           <div styleName='body-welcome'>
-            Welcome!
+            Welcome to Boostnote!
           </div>
           <div styleName='body-description'>
-           Please select a directory for Boostnote storage.
+           Please select a directory for data storage.
           </div>
           <div styleName='body-path'>
             <input styleName='body-path-input'
@@ -243,7 +237,7 @@ class InitModal extends React.Component {
                 ? <span>
                   <i className='fa fa-spin fa-spinner' /> Loading...
                 </span>
-                : 'Let\'s Go!'
+                : 'CREATE'
               }
             </button>
           </div>

browser/main/modals/InitModal.styl

@@ -1,7 +1,11 @@
 .root
   modal()
-  max-width 540px
+  background-color #fff
+  max-width 100vw
+  max-height 100vh
   overflow hidden
+  margin 0
+  padding 150px 0
   position relative
 .root--loading
   @extend .root
@@ -13,14 +17,6 @@
 .loadingMessage
   color $ui-text-color
   margin 15px auto 35px
-.header
-  height 50px
-  font-size 18px
-  line-height 50px
-  padding 0 15px
-  background-color $ui-backgroundColor
-  border-bottom solid 1px $ui-borderColor
-  color $ui-text-color
 
 .body
   padding 30px
@@ -32,20 +28,20 @@
   color $ui-text-color
 
 .body-description
-  font-size 14px
+  font-size 16px
   color $ui-text-color
   text-align center
   margin-bottom 25px
 
 .body-path
   margin 0 auto 25px
-  width 280px
+  width 330px
 
 .body-path-input
-  height 30px
+  height 40px
   vertical-align middle
-  width 250px
-  font-size 12px
+  width 300px
+  font-size 14px
   border-style solid
   border-width 1px 0 1px 1px
   border-color $border-color
@@ -54,7 +50,10 @@
   padding 0 5px
 
 .body-path-button
-  height 30px
+  height 42px
+  width 30px
+  font-size 16px
+  font-weight 600
   border none
   border-top-right-radius 2px
   border-bottom-right-radius 2px
@@ -69,6 +68,8 @@
 
 .body-control-createButton
   colorPrimaryButton()
+  font-size 14px
+  font-weight 600
   border none
   border-radius 2px
   height 40px

browser/styles/index.styl

@@ -86,6 +86,7 @@ colorPrimaryButton()
   color $ui-text-color
   background-color $default-button-background--hover
   &:hover
+    transition 0.2s
     background-color $default-button-background--active
   &:active
   &:active:hover