modify: markup style for Hotkey config modal

Author: sota1235

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -18,23 +18,26 @@
   margin-bottom 15px
 
 .group-section
-  margin-bottom 15px
+  margin-bottom 20px
   display flex
   line-height 30px
+
 .group-section-label
   width 150px
-  text-align right
+  text-align left
   margin-right 10px
   font-size 14px
+
 .group-section-control
   flex 1
+
 .group-section-control-input
   height 30px
   vertical-align middle
-  width 150px
-  font-size 12px
+  width 400px
+  font-size $tab--button-font-size
   border solid 1px $border-color
-  border-radius 2px
+  border-radius $tab--input-border-radius
   padding 0 5px
   &:disabled
     background-color $ui-input--disabled-backgroundColor
@@ -46,7 +49,6 @@
   padding-left 15px
 
 .group-control
-  border-top $default-border
   padding-top 10px
   box-sizing border-box
   height 40px
@@ -57,22 +59,25 @@
       line-height 30px
       padding 0 5px
       float right
+
 .group-control-leftButton
-  float left
   colorDefaultButton()
-  border $default-border
-  border-radius 2px
-  height 30px
+  border none
+  font-size $tab--button-font-size
+  height $tab--button-height
   padding 0 15px
-  margin-right 5px
+  margin-right 10px
+
 .group-control-rightButton
   float right
   colorPrimaryButton()
   border none
-  border-radius 2px
-  height 30px
+  border-radius $tab--button-border-radius
+  font-size $tab--button-font-size
+  height $tab--button-height
   padding 0 15px
-  margin-right 5px
+  margin-right 10px
+
 .group-hint
   border $ui-border
   padding 10px 15px

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -112,11 +112,11 @@ class HotkeyTab extends React.Component {
             >
               {this.state.isHotkeyHintOpen
                 ? 'Hide Hint'
-                : 'Show Hint'
+                : 'Hint?'
               }
             </button>
             <button styleName='group-control-rightButton'
-              onClick={(e) => this.handleSaveButtonClick(e)}>Save Hotkey
+              onClick={(e) => this.handleSaveButtonClick(e)}>Save
             </button>
             {keymapAlertElement}
           </div>

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -50,7 +50,7 @@
   absolute left right bottom
   top 50px
   left 140px
-  margin-top 20px
+  margin-top 10px
   overflow-y auto
 
 body[data-theme="dark"]

browser/main/modals/PreferencesModal/Tab.styl

@@ -2,6 +2,11 @@
  * Common style for tabs on config modal.
  */
 
+$tab--input-border-radius = 5px
+$tab--button-border-radius = 5px
+$tab--button-height = 40px
+$tab--button-font-size = 14px
+
 .header
   font-size 24px
-  margin-bottom 20px
+  margin-bottom 30px