modify: change design for model window creating new folder

Author: sota1235

browser/main/modals/CreateFolderModal.js

@@ -75,24 +75,27 @@ class CreateFolderModal extends React.Component {
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
         <div styleName='header'>
-          <div styleName='title'>New Folder</div>
+          <div styleName='title'>Create new folder</div>
         </div>
-        <button styleName='closeButton'
-          onClick={(e) => this.handleCloseButtonClick(e)}
-        >Close</button>
+        <button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
+          <div styleName='close-mark'>X</div>
+          <div styleName='close-text'>esc</div>
+        </button>
 
         <div styleName='control'>
-          <input styleName='control-input'
-            placeholder='Folder Name'
-            ref='name'
-            value={this.state.name}
-            onChange={(e) => this.handleChange(e)}
-            onKeyDown={(e) => this.handleInputKeyDown(e)}
-          />
+          <div styleName='control-folder'>
+            <div styleName='control-folder-label'>Folder name</div>
+            <input styleName='control-folder-input'
+              ref='name'
+              value={this.state.name}
+              onChange={(e) => this.handleChange(e)}
+              onKeyDown={(e) => this.handleInputKeyDown(e)}
+            />
+          </div>
           <button styleName='control-confirmButton'
             onClick={(e) => this.handleConfirmButtonClick(e)}
           >
-            Confirm
+            Create Folder
           </button>
         </div>
       </div>

browser/main/modals/CreateFolderModal.styl

@@ -1,47 +1,52 @@
 .root
   modal()
-  max-width 340px
+  width 700px
+  height 200px
   overflow hidden
   position relative
+  padding 0 40px
 
 .header
   height 50px
+  margin-bottom 10px
+  margin-top 10px
   font-size 18px
   line-height 50px
-  padding 0 15px
   background-color $ui-backgroundColor
-  border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
+.close-mark
+  font-size 15px
+
+.close
+  height 50px
   position absolute
-  top 10px
+  background-color transparent
+  color $ui-inactive-text-color
+  border none
+  top 7px
   right 10px
-  height 30px
-  width 0 25px
-  border $ui-border
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
-
-.control
-  padding 25px 15px 15px
   text-align center
+  width top-bar--height
+  height top-bar--height
+
+.control-folder-label
+  text-align left
+  font-size 14px
+  color $ui-text-color
 
-.control-input
+.control-folder-input
   display block
   height 30px
-  width 240px
+  width 620px
   padding 0 5px
-  margin 0 auto 15px
-  border none
-  border-bottom solid 1px $border-color
-  border-radius 2px
+  margin 10px auto 15px
+  border 1px solid #C9C9C9 // TODO: use variable.
+  border-radius 5px
   background-color transparent
   outline none
   vertical-align middle
   font-size 18px
-  text-align center
   &:disabled
     background-color $ui-input--disabled-backgroundColor
   &:focus, &:active
@@ -50,10 +55,12 @@
 .control-confirmButton
   display block
   height 30px
+  width 620px
   border none
-  border-radius 2px
+  border-radius 5px
   padding 0 25px
-  margin 0 auto
+  margin 20px auto
+  font-size 14px
   colorPrimaryButton()
 
 body[data-theme="dark"]