From 061a0cd219264f3807f325427d56282d37c010d1 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Tue, 28 Nov 2017 16:27:12 +0900
Subject: [PATCH] Fix layout at initial modal

---
 browser/main/modals/InitModal.js   | 12 +++---------
 browser/main/modals/InitModal.styl | 31 +++++++++++++++---------------
 browser/styles/index.styl          |  1 +
 3 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/browser/main/modals/InitModal.js b/browser/main/modals/InitModal.js
index 45a8746c..024c6f42 100644
--- a/browser/main/modals/InitModal.js
+++ b/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>
diff --git a/browser/main/modals/InitModal.styl b/browser/main/modals/InitModal.styl
index 73b7308a..62e02b68 100644
--- a/browser/main/modals/InitModal.styl
+++ b/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
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 35131ff3..d2c32b88 100644
--- a/browser/styles/index.styl
+++ b/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