Merge pull request #882 from BoostIO/fix-layout

Fix layout

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

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

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)}

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)}

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

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

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -31,10 +31,15 @@
 
 .group-section-control
   flex 1
+  margin-left 5px
 
 .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
@@ -77,14 +82,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

browser/main/modals/PreferencesModal/InfoTab.js

@@ -97,9 +97,9 @@ 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>These data are only used for Boostnote improvements.</div>
         <input onChange={(e) => this.handleConfigChange(e)}
           checked={this.state.config.amaEnabled}
           ref='amaEnabled'

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -43,6 +43,7 @@
     text-decoration none
 
 .policy
+  width 100%
   font-size 20px
   margin-bottom 10px
 

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
 
@@ -25,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

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

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)}

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