From 13418109ea0cd57b531abf377ca05a14abd038c0 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 8 Apr 2017 15:37:55 +0900
Subject: [PATCH] Fix the create folder modal layout at white theme

---
 browser/main/modals/CreateFolderModal.js   |  4 ++--
 browser/main/modals/CreateFolderModal.styl | 27 +++++++++++-----------
 browser/styles/index.styl                  |  2 +-
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/browser/main/modals/CreateFolderModal.js b/browser/main/modals/CreateFolderModal.js
index 2dc61271..9ece3d86 100644
--- a/browser/main/modals/CreateFolderModal.js
+++ b/browser/main/modals/CreateFolderModal.js
@@ -78,7 +78,7 @@ class CreateFolderModal extends React.Component {
           <div styleName='title'>Create new folder</div>
         </div>
         <button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
-          <div styleName='close-mark'>X</div>
+          <div styleName='close-mark'>×</div>
           <div styleName='close-text'>esc</div>
         </button>
 
@@ -95,7 +95,7 @@ class CreateFolderModal extends React.Component {
           <button styleName='control-confirmButton'
             onClick={(e) => this.handleConfirmButtonClick(e)}
           >
-            Create Folder
+            Create
           </button>
         </div>
       </div>
diff --git a/browser/main/modals/CreateFolderModal.styl b/browser/main/modals/CreateFolderModal.styl
index 6b1d208b..dd4092d9 100644
--- a/browser/main/modals/CreateFolderModal.styl
+++ b/browser/main/modals/CreateFolderModal.styl
@@ -1,15 +1,15 @@
 .root
   modal()
-  width 700px
-  height 200px
+  width 500px
+  height 270px
   overflow hidden
   position relative
   padding 0 40px
 
 .header
-  height 50px
+  height 70px
   margin-bottom 10px
-  margin-top 10px
+  margin-top 20px
   font-size 18px
   line-height 50px
   background-color $ui-backgroundColor
@@ -19,34 +19,34 @@
   font-size 15px
 
 .close
-  height 50px
+  height 70px
   position absolute
   background-color transparent
   color $ui-inactive-text-color
   border none
   top 7px
-  right 10px
+  right 30px
   text-align center
   width top-bar--height
   height top-bar--height
 
 .control-folder-label
   text-align left
-  font-size 14px
+  font-size 12px
   color $ui-text-color
 
 .control-folder-input
   display block
   height 30px
-  width 620px
+  width 420px
   padding 0 5px
   margin 10px auto 15px
   border 1px solid #C9C9C9 // TODO: use variable.
-  border-radius 5px
+  border-radius 2px
   background-color transparent
   outline none
   vertical-align middle
-  font-size 18px
+  font-size 14px
   &:disabled
     background-color $ui-input--disabled-backgroundColor
   &:focus, &:active
@@ -54,13 +54,14 @@
 
 .control-confirmButton
   display block
+  float right
   height 30px
-  width 620px
+  width 100px
   border none
-  border-radius 5px
+  border-radius 2px
   padding 0 25px
   margin 20px auto
-  font-size 14px
+  font-size 12px
   colorPrimaryButton()
 
 body[data-theme="dark"]
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 55c63c9a..3952d424 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -78,7 +78,7 @@ colorDefaultButton()
     background-color $default-button-background--active
 
 // Primary button(Brand color)
-$primary-button-background = $brand-color
+$primary-button-background = alpha($brand-color, 60%)
 $primary-button-background--hover = darken($brand-color, 5%)
 $primary-button-background--active = darken($brand-color, 10%)