From fb4dfbadf3f961cc76c3257267eb5809fb9b3712 Mon Sep 17 00:00:00 2001
From: sota1235 <sota1235@gmail.com>
Date: Fri, 30 Dec 2016 13:35:35 +0900
Subject: [PATCH] modify: change layout for config modal

---
 .../PreferencesModal/PreferencesModal.styl    | 24 +++++++++++++++----
 browser/main/modals/PreferencesModal/index.js |  6 ++---
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl
index 73a6719a..ca54f28e 100644
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -1,20 +1,35 @@
 .root
   modal()
-  max-width 540px
-  min-height 400px
+  max-width 800px
+  min-height 500px
   height 80%
   overflow hidden
   position relative
 
-.nav
+.top-bar
   absolute top left right
   height 50px
   background-color $ui-backgroundColor
   border-bottom solid 1px $ui-borderColor
+  p
+    text-align center
+    font-size 18px
+    line-height 50px
+
+.nav
+  absolute top left right
+  top 50px
+  left 0
+  width 140px
+  margin-left 30px
+  margin-top 20px
+  background-color $ui-backgroundColor
 
 .nav-button
+  font-size 14px
+  text-align left
   width 80px
-  height 50px
+  padding 7px 0
   border none
   background-color transparent
   color #939395
@@ -34,6 +49,7 @@
 .content
   absolute left right bottom
   top 50px
+  left 140px
   overflow-y auto
 
 body[data-theme="dark"]
diff --git a/browser/main/modals/PreferencesModal/index.js b/browser/main/modals/PreferencesModal/index.js
index 0f8382e1..8a8995be 100644
--- a/browser/main/modals/PreferencesModal/index.js
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -88,9 +88,6 @@ class Preferences extends React.Component {
           key={tab.target}
           onClick={(e) => this.handleNavButtonClick(tab.target)(e)}
         >
-          <i styleName='nav-button-icon'
-            className={'fa fa-' + tab.icon}
-          />
           <span styleName='nav-button-label'>
             {tab.label}
           </span>
@@ -104,6 +101,9 @@ class Preferences extends React.Component {
         tabIndex='-1'
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
+        <div styleName='top-bar'>
+          <p>Your menu for Boostnote</p>
+        </div>
         <div styleName='nav'>
           {navButtons}
         </div>