Merge pull request #722 from BoostIO/fix-layout

Fix layout

browser/main/Detail/InfoPanel.js

@@ -47,14 +47,21 @@ const InfoPanel = ({
       </div>
     </div>
 
-    <div styleName='group-export'>
+    <div id='export-wrap'>
-      <i className='fa fa-file-text fa-fw'
+      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
-        onClick={(e) => exportAsMd(e)}
+        <i className='fa fa-file-code-o fa-fw' />
-      />
+        <p>.md</p>
+      </button>
 
-      <i className='fa fa-file-text fa-fw'
+      <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
-        onClick={(e) => exportAsTxt(e)}
+        <i className='fa fa-file-text-o fa-fw' />
-      />
+        <p>.txt</p>
+      </button>
+
+      <button styleName='export--unable'>
+        <i className='fa fa-file-pdf-o fa-fw' />
+        <p>.pdf</p>
+      </button>
     </div>
   </div>
 )

browser/main/Detail/InfoPanel.styl

@@ -13,7 +13,7 @@
   margin-top 45px
   margin-left -210px
   position absolute
-  padding 20px
+  padding 20px 20px 0 20px
   width 340px
   background-color $ui-noteList-backgroundColor
   border 1px solid $border-color
@@ -40,8 +40,35 @@
   width 160px
   height 25px
 
-.group-export
+[id=export-wrap]
-  height 25px
+  height 90px
+  display flex
+  justify-content center
+  margin 20px 0 10px 0
+  button
+    outline none
+    font-size 48px
+    color #A0A0A0
+    background-color transparent
+    border none
+    margin 0 5px
+    border-radius 5px
+    &:hover
+      transition 0.2s
+      background-color alpha($ui-button--hover-backgroundColor, 30%)
+      color $ui-inactive-text-color
+  p
+    font-size 13px
+    color #A0A0A0
+    font-weight light
+    &:hover
+      color $ui-inactive-text-color
+
+.export--enable
+  cursor pointer
+
+.export--unable
+  cursor not-allowed
 
 body[data-theme="dark"]
   .control-infoButton-panel
@@ -57,3 +84,14 @@ body[data-theme="dark"]
   .group-section-control input
     background-color alpha($ui-dark-borderColor, 80%)
     color $ui-dark-text-color
+
+  [id=export-wrap]
+    button
+      color $ui-dark-inactive-text-color
+      &:hover
+        background-color alpha($ui-dark-borderColor, 20%)
+        color $ui-dark-text-color
+    p
+      color $ui-dark-inactive-text-color
+      &:hover
+        color $ui-dark-text-color

browser/main/Detail/MarkdownNoteDetail.js

@@ -290,15 +290,11 @@ class MarkdownNoteDetail extends React.Component {
 
     const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <div styleName='info-left-top'>
-          <div styleName='info-left-top-folderSelect'>
         <i styleName='undo-button'
           className='fa fa-undo fa-fw'
           onClick={(e) => this.handleUndoButtonClick(e)}
         />
       </div>
-        </div>
-      </div>
       <div styleName='info-right'>
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
       </div>

browser/main/Detail/NoteDetailInfo.styl

@@ -15,20 +15,19 @@ $info-margin-under-border = 27px
   float left
   padding 0 5px
   margin 0px 2px
-
 .info-left-top
   display inline-block
   height $info-height
   line-height $info-height
 
 .info-left-top-folderSelect
-  display inline-block
   padding 0 3px
   height 34px
   line-height 26px
-  vertical-align middle
+  display flex
+  align-items center
+  justify-content center
   border-radius 3px
-
 .info-left-button
   width 34px
   height 34px
@@ -45,7 +44,7 @@ $info-margin-under-border = 27px
     border-color $ui-favorite-star-button-color
   &:active, &:active:hover
     background-color $ui-favorite-star-button-color
-    color $ui-button--active-color
+    color $ui-button--
 
 .info-right
   position absolute
@@ -56,16 +55,7 @@ $info-margin-under-border = 27px
   padding-left 30px
 
 .undo-button
-  position relative
+  topBarButtonLight()
-  border solid 1px transparent
-  line-height 34px
-  vertical-align middle
-  border-radius 2px
-  transition 0.15s
-  user-select none
-  cursor pointer
-  &:hover
-    background-color #D9D9D9
 
 body[data-theme="dark"]
   .info
@@ -86,3 +76,6 @@ body[data-theme="dark"]
 
   .info-right
     background-color $ui-dark-noteDetail-backgroundColor
+
+  .undo-button
+    topBarButtonDark()

browser/main/Detail/SnippetNoteDetail.js

@@ -549,15 +549,11 @@ class SnippetNoteDetail extends React.Component {
 
     const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <div styleName='info-left-top'>
-          <div styleName='info-left-top-folderSelect'>
         <i styleName='undo-button'
           className='fa fa-undo fa-fw'
           onClick={(e) => this.handleUndoButtonClick(e)}
         />
       </div>
-        </div>
-      </div>
       <div styleName='info-right'>
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
       </div>
@@ -589,7 +585,7 @@ class SnippetNoteDetail extends React.Component {
         <button styleName='control-fullScreenButton'
           onMouseDown={(e) => this.handleFullScreenButton(e)}
         >
-          <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
+          <i className='fa fa-expand' styleName='fullScreen-button' />
         </button>
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}

browser/main/Detail/TagSelect.styl

@@ -1,8 +1,7 @@
 .root
   display inline-block
-  top 19px
   user-select none
-  height 26px
+  height 23px
   vertical-align middle
   width 300px
   overflow-x scroll

browser/main/Detail/TrashButton.js

@@ -8,15 +8,7 @@ const TrashButton = ({
   <button styleName='control-trashButton'
     onClick={(e) => onClick(e)}
   >
-    <svg height='14px' id='Capa_1' style={{enableBackground: 'new 0 0 753.23 753.23'}} width='14px' version='1.1' viewBox='0 0 753.23 753.23' x='0px' y='0px' xmlSpace='preserve'>
+    <i className='fa fa-trash trashButton' styleName='info-button' />
-      <g>
-        <g id='_x34__19_'>
-          <g>
-            <path d='M494.308,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077c0-12.993-10.545-23.539-23.538-23.539&#xA;&#x9;&#x9;&#x9;&#x9;s-23.538,10.545-23.538,23.539v282.461C470.77,648.531,481.314,659.077,494.308,659.077z M635.538,94.154h-141.23V47.077&#xA;&#x9;&#x9;&#x9;&#x9;C494.308,21.067,473.24,0,447.23,0H306c-26.01,0-47.077,21.067-47.077,47.077v47.077h-141.23&#xA;&#x9;&#x9;&#x9;&#x9;c-26.01,0-47.077,21.067-47.077,47.077v47.077c0,25.986,21.067,47.077,47.077,47.077v423.692&#xA;&#x9;&#x9;&#x9;&#x9;c0,51.996,42.157,94.153,94.154,94.153h329.539c51.996,0,94.153-42.157,94.153-94.153V235.385&#xA;&#x9;&#x9;&#x9;&#x9;c26.01,0,47.077-21.091,47.077-47.077V141.23C682.615,115.221,661.548,94.154,635.538,94.154z M306,70.615&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993,10.545-23.539,23.538-23.539h94.154c12.993,0,23.538,10.545,23.538,23.539v23.539c-22.809,0-141.23,0-141.23,0V70.615z&#xA;&#x9;&#x9;&#x9;&#x9; M588.461,659.077c0,25.986-21.066,47.076-47.076,47.076H211.846c-26.01,0-47.077-21.09-47.077-47.076V235.385h423.692V659.077z&#xA;&#x9;&#x9;&#x9;&#x9; M612,188.308H141.23c-12.993,0-23.538-10.545-23.538-23.539s10.545-23.539,23.538-23.539H612&#xA;&#x9;&#x9;&#x9;&#x9;c12.993,0,23.538,10.545,23.538,23.539S624.993,188.308,612,188.308z M258.923,659.077c12.993,0,23.539-10.546,23.539-23.539&#xA;&#x9;&#x9;&#x9;&#x9;V353.077c0-12.993-10.545-23.539-23.539-23.539s-23.539,10.545-23.539,23.539v282.461&#xA;&#x9;&#x9;&#x9;&#x9;C235.384,648.531,245.93,659.077,258.923,659.077z M376.615,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993-10.545-23.539-23.538-23.539s-23.539,10.545-23.539,23.539v282.461C353.077,648.531,363.622,659.077,376.615,659.077z' />
-          </g>
-        </g>
-      </g>
-    </svg>
   </button>
 )
 

browser/main/Detail/TrashButton.styl

@@ -2,6 +2,10 @@
   float right
   topBarButtonLight()
 
+.trashButton
+  padding 0px
+  margin 15px 0
+
 body[data-theme="dark"]
   .control-trashButton
     topBarButtonDark()

browser/main/SideNav/StorageItem.styl

@@ -1,6 +1,7 @@
 .root
   width 100%
   user-select none
+  padding-top 20px
 
 .header
   position relative

browser/main/modals/PreferencesModal/InfoTab.js

@@ -96,16 +96,16 @@ class InfoTab extends React.Component {
         </ul>
         <hr />
         <div styleName='policy'>Data collection policy</div>
-        <p>We collect only the number of users on Boostnote for DAU and any detail information<br />
+        <p>We collect only the number of DAU for Boostnote and DO NOT COLLECTED any detail information</p>
-        such as a note's content or title is not collected.</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>You can see how it works on <a href='https://github.com/BoostIO/Boostnote'>GitHub</a></p>
+        <p>These data are only used for Boostnote improvements.</p>
         <input onChange={(e) => this.handleConfigChange(e)}
           checked={this.state.config.amaEnabled}
           ref='amaEnabled'
           type='checkbox'
         />
         Enable to send analytics to our servers<br />
-        <button onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
+        <button styleName='policy-submit' onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
       </div>
     )
   }

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -44,6 +44,10 @@
 
 .policy
   font-size 20px
+  margin-bottom 10px
+
+.policy-submit
+  margin-top 10px
 
 body[data-theme="dark"]
   .root

browser/styles/index.styl

@@ -157,6 +157,9 @@ modal()
 
 topBarButtonLight()
   width 34px
+  display flex
+  align-items center
+  justify-content center
   height 34px
   border-radius 17px
   font-size 14px
@@ -168,7 +171,7 @@ topBarButtonLight()
   &:active
     border-color $ui-button--active-backgroundColor
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    background-color alpha($ui-button--hover-backgroundColor, 60%)
     .control-lockButton-tooltip
       opacity 1
 
@@ -231,10 +234,12 @@ topBarButtonDark()
   color $ui-dark-topbar-button-color
   &:hover
     background-color $dark-default-button-background--hover
+    color $ui-dark-tooltip-text-color
   &:active
     border-color $ui-dark-button--focus-borderColor
   &:active:hover
     background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-tooltip-text-color
   &:focus
     border-color $ui-button--focus-borderColor