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] 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