Fix button layout

BoostIO · asmsuechan · Jul 25, 2017 · Jul 24, 2017 · Jul 24, 2017 · Jul 24, 2017
commit 4a77f250f1d6b2c6b3eabd592285ad79e721e842
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
@@ -290,14 +290,10 @@ 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>
+        <i styleName='undo-button'
+          className='fa fa-undo fa-fw'
+          onClick={(e) => this.handleUndoButtonClick(e)}
+        />
       </div>
       <div styleName='info-right'>
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />

diff --git a/browser/main/Detail/NoteDetailInfo.styl b/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
-  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
+  topBarButtonLight()
 
 body[data-theme="dark"]
   .info
@@ -86,3 +76,6 @@ body[data-theme="dark"]
 
   .info-right
     background-color $ui-dark-noteDetail-backgroundColor
+
+  .undo-button
+    topBarButtonDark()
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
@@ -549,14 +549,10 @@ 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>
+        <i styleName='undo-button'
+          className='fa fa-undo fa-fw'
+          onClick={(e) => this.handleUndoButtonClick(e)}
+        />
       </div>
       <div styleName='info-right'>
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
@@ -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)}

diff --git a/browser/main/Detail/TagSelect.styl b/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

diff --git a/browser/main/Detail/TrashButton.js b/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'>
-      <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>
+    <i className='fa fa-trash trashButton' styleName='info-button' />
   </button>
 )
 

diff --git a/browser/main/Detail/TrashButton.styl b/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()
diff --git a/browser/styles/index.styl b/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