From bf4c9f920a023dd743474645564596bc7c886bab Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 22 Sep 2017 15:13:34 +0900
Subject: [PATCH 1/8] Fix layout at preference modal

---
 browser/main/global.styl                                   | 4 ++--
 browser/main/modals/PreferencesModal/InfoTab.js            | 7 ++++---
 browser/main/modals/PreferencesModal/InfoTab.styl          | 1 +
 browser/main/modals/PreferencesModal/PreferencesModal.styl | 7 ++++---
 browser/styles/index.styl                                  | 4 ++--
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/browser/main/global.styl b/browser/main/global.styl
index 552e0d6c..dfed8312 100644
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -64,7 +64,7 @@ textarea.block-input
   fullsize()
 
 modalZIndex= 1000
-modalBackColor = transparentify(white, 65%)
+modalBackColor = white
 .ace_focus
   outline-color rgb(59, 153, 252)
   outline-offset 0px
@@ -86,7 +86,7 @@ modalBackColor = transparentify(white, 65%)
 body[data-theme="dark"]
   .ModalBase
     .modalBack
-      background-color alpha(black, 60%)
+      background-color $ui-dark-backgroundColor
 
 .CodeMirror
   font-family inherit !important
diff --git a/browser/main/modals/PreferencesModal/InfoTab.js b/browser/main/modals/PreferencesModal/InfoTab.js
index 35cd53a2..37be29dd 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -97,9 +97,10 @@ class InfoTab extends React.Component {
         </ul>
         <hr />
         <div styleName='policy'>Data collection policy</div>
-        <p>We collect only the number of DAU for Boostnote and DO NOT collect any detail information</p>
-        <p>such as your note content. You can see how it works on <a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</p>
-        <p>These data are only used for Boostnote improvements.</p>
+        <div>We collect only the number of DAU for Boostnote and **DO NOT collect** any detail information such as your note content.</div>
+        <div>You can see how it works on <a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</div>
+        <div>　</div>
+        <div>These data are only used for Boostnote improvements.</div>
         <input onChange={(e) => this.handleConfigChange(e)}
           checked={this.state.config.amaEnabled}
           ref='amaEnabled'
diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl
index 6158c634..176405f4 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -43,6 +43,7 @@
     text-decoration none
 
 .policy
+  width 100%
   font-size 20px
   margin-bottom 10px
 
diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl
index a0a670b5..712b0736 100644
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -4,9 +4,10 @@ top-bar--height = 50px
 
 .root
   modal()
-  max-width 800px
-  min-height 500px
-  height 80%
+  max-width 100vw
+  min-height 100vh
+  height 100vh
+  width 100vw
   overflow hidden
   position relative
 
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 8df338c0..3fcd383d 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -150,10 +150,11 @@ modal()
   position relative
   z-index $modal-z-index
   width 100%
+  margin-left 40px
+  margin-right 40px
   background-color $modal-background
   overflow hidden
   border-radius $modal-border-radius
-  box-shadow 0 0 1px rgba(76,86,103,.15), 0 2px 18px rgba(31,37,50,.22)
 
 topBarButtonLight()
   width 34px
@@ -260,4 +261,3 @@ modalDark()
   background-color $ui-dark-backgroundColor
   overflow hidden
   border-radius $modal-border-radius
-  box-shadow 2px 2px 10px black

From fc552e030a1d03efde07e401b86829fbf02e9e51 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 22 Sep 2017 15:21:04 +0900
Subject: [PATCH 2/8] Change save button position to top

---
 browser/main/modals/PreferencesModal/ConfigTab.styl | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index 11114272..75c8b0b4 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -77,14 +77,16 @@
   margin-right 10px
 
 .group-control-rightButton
-  float right
+  position absolute
+  top 10px
+  right 20px
   colorPrimaryButton()
   border none
   border-radius 2px
   font-size $tab--button-font-size
-  height 35px
-  width 100px
-  margin-right 10px
+  height 40px
+  width 120px
+  padding 0 15px
 
 .group-hint
   border $ui-border

From 31485d3387f29b7621a072fb618e191b79c3c69b Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 22 Sep 2017 15:27:22 +0900
Subject: [PATCH 3/8] Fix layout at head in PreferenceModal

---
 browser/components/ModalEscButton.js          | 2 +-
 browser/components/ModalEscButton.styl        | 4 +++-
 browser/main/modals/PreferencesModal/Tab.styl | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/browser/components/ModalEscButton.js b/browser/components/ModalEscButton.js
index 190b7ccd..42fe9100 100644
--- a/browser/components/ModalEscButton.js
+++ b/browser/components/ModalEscButton.js
@@ -6,7 +6,7 @@ const ModalEscButton = ({
   handleEscButtonClick
 }) => (
   <button styleName='escButton' onClick={handleEscButtonClick}>
-    <div styleName='esc-mark'>x</div>
+    <div styleName='esc-mark'>×</div>
     <div styleName='esc-text'>esc</div>
   </button>
 )
diff --git a/browser/components/ModalEscButton.styl b/browser/components/ModalEscButton.styl
index 378fac85..12cd56ed 100644
--- a/browser/components/ModalEscButton.styl
+++ b/browser/components/ModalEscButton.styl
@@ -11,4 +11,6 @@
   height top-bar-height
 
 .esc-mark
-  font-size 15px
+  font-size 28px
+  margin-top -5px
+  margin-bottom -7px
\ No newline at end of file
diff --git a/browser/main/modals/PreferencesModal/Tab.styl b/browser/main/modals/PreferencesModal/Tab.styl
index 7280407b..3b722cbf 100644
--- a/browser/main/modals/PreferencesModal/Tab.styl
+++ b/browser/main/modals/PreferencesModal/Tab.styl
@@ -10,8 +10,8 @@ $tab--button-font-size = 14px
 $tab--dark-text-color = #E5E5E5
 
 .header
-  font-size 24px
-  margin-bottom 30px
+  font-size 36px
+  margin-bottom 60px
 
 body[data-theme="dark"]
   .header

From beceb851c24d6f62879923d0d365e158f075f9e9 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 22 Sep 2017 15:41:40 +0900
Subject: [PATCH 4/8] Fix layout at selector size in PreferenceModal

---
 browser/main/modals/PreferencesModal/ConfigTab.styl | 4 ++++
 browser/main/modals/PreferencesModal/UiTab.js       | 3 +--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index 75c8b0b4..968abef9 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -35,6 +35,10 @@
 .group-section-control select
   outline none
   border 1px solid $ui-borderColor
+  font-size 16px
+  height 30px
+  width 250px
+  margin-bottom 5px
   background-color transparent
 
 .group-section-control-input
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 96c04ddf..0b911b49 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -90,9 +90,8 @@ class UiTab extends React.Component {
         <div styleName='group'>
           <div styleName='group-header'>UI</div>
 
-          <div styleName='group-header2'>Theme</div>
-
           <div styleName='group-section'>
+            Color Theme　
             <div styleName='group-section-control'>
               <select value={config.ui.theme}
                 onChange={(e) => this.handleUIChange(e)}

From 5a85c257cf979f4ad8674dd4f9e3ee632f2962e8 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 22 Sep 2017 15:46:08 +0900
Subject: [PATCH 5/8] Fix layout at SideNab in PreferenceModal

---
 .../main/modals/PreferencesModal/PreferencesModal.styl | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl
index 712b0736..a452ca91 100644
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -26,22 +26,22 @@ top-bar--height = 50px
   top top-bar--height
   left 0
   width 140px
-  margin-left 30px
+  margin-left 10px
   margin-top 20px
   background-color $ui-backgroundColor
 
 .nav-button
   font-size 14px
   text-align left
-  width 100px
-  margin 4px 0
-  padding 5px 0
+  width 120px
+  margin 5px 0
+  padding 7px 0
   padding-left 10px
   border none
   border-radius 2px
   background-color transparent
   color $ui-text-color
-  font-size 14px
+  font-size 16px
 
 .nav-button--active
   @extend .nav-button

From 7b1c6c10b7bb3553ff19730818a103b98739e15b Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 22 Sep 2017 15:56:49 +0900
Subject: [PATCH 6/8] Change expand icon at NoteDetail

---
 browser/main/Detail/MarkdownNoteDetail.js | 2 +-
 browser/main/Detail/SnippetNoteDetail.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 95de2592..bdc5e4d5 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -341,7 +341,7 @@ class MarkdownNoteDetail extends React.Component {
         <button styleName='control-fullScreenButton'
           onMouseDown={(e) => this.handleFullScreenButton(e)}
         >
-          <i className='fa fa-expand' styleName='fullScreen-button' />
+          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
         </button>
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index 5f767b70..baacc9f3 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -598,7 +598,7 @@ class SnippetNoteDetail extends React.Component {
         <button styleName='control-fullScreenButton'
           onMouseDown={(e) => this.handleFullScreenButton(e)}
         >
-          <i className='fa fa-expand' styleName='fullScreen-button' />
+          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
         </button>
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}

From 601f0b0de8eee9b19814dfaa87a93684b7d81777 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 22 Sep 2017 16:06:40 +0900
Subject: [PATCH 7/8] Fix layout at narrow the width of description in
 SnippetNoteDetail

---
 browser/main/Detail/SnippetNoteDetail.styl | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index 5b6f15cf..90824eae 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -19,7 +19,7 @@
 
 .body .description
   absolute top left right
-  height 80px
+  height 50px
 
 .body .description textarea
   outline none
@@ -27,14 +27,14 @@
   height 100%
   width 100%
   resize none
-  border none
+  border 1px solid $ui-borderColor
   padding 10px
   line-height 1.6
   background-color $ui-noteDetail-backgroundColor
 
 .tabList
   absolute left right
-  top 80px
+  top 55px
   height 30px
   display flex
   background-color $ui-noteDetail-backgroundColor
@@ -50,7 +50,7 @@
 
 .tabView
   absolute left right bottom
-  top 130px
+  top 100px
 
 .tabView-content
   absolute top left right bottom
@@ -83,6 +83,7 @@ body[data-theme="dark"]
   .body .description textarea
     background-color $ui-dark-noteDetail-backgroundColor
     color $ui-dark-text-color
+    border 1px solid $ui-dark-borderColor
 
   .tabList
     background-color $ui-button--active-backgroundColor

From 419c57ed3fd8765db7ff3045b6958cf7188fd207 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 22 Sep 2017 16:14:06 +0900
Subject: [PATCH 8/8] Fix CI error

---
 browser/main/modals/PreferencesModal/ConfigTab.styl | 1 +
 browser/main/modals/PreferencesModal/InfoTab.js     | 1 -
 browser/main/modals/PreferencesModal/UiTab.js       | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index 968abef9..101f2f33 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -31,6 +31,7 @@
 
 .group-section-control
   flex 1
+  margin-left 5px
 
 .group-section-control select
   outline none
diff --git a/browser/main/modals/PreferencesModal/InfoTab.js b/browser/main/modals/PreferencesModal/InfoTab.js
index 37be29dd..58390ecf 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -99,7 +99,6 @@ class InfoTab extends React.Component {
         <div styleName='policy'>Data collection policy</div>
         <div>We collect only the number of DAU for Boostnote and **DO NOT collect** any detail information such as your note content.</div>
         <div>You can see how it works on <a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</div>
-        <div>　</div>
         <div>These data are only used for Boostnote improvements.</div>
         <input onChange={(e) => this.handleConfigChange(e)}
           checked={this.state.config.amaEnabled}
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 0b911b49..7bbd3e8c 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -91,7 +91,7 @@ class UiTab extends React.Component {
           <div styleName='group-header'>UI</div>
 
           <div styleName='group-section'>
-            Color Theme　
+            Color Theme
             <div styleName='group-section-control'>
               <select value={config.ui.theme}
                 onChange={(e) => this.handleUIChange(e)}