diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index e13ce074..62114476 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -290,14 +290,10 @@ class MarkdownNoteDetail extends React.Component {
const trashTopBar =
-
-
- this.handleUndoButtonClick(e)}
- />
-
-
+
this.handleUndoButtonClick(e)}
+ />
this.handleTrashButtonClick(e)} />
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index ace24823..f29d6f13 100644
--- 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()
\ No newline at end of file
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index 06761b8a..8b26fd07 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -549,14 +549,10 @@ class SnippetNoteDetail extends React.Component {
const trashTopBar =
-
-
- this.handleUndoButtonClick(e)}
- />
-
-
+
this.handleUndoButtonClick(e)}
+ />
this.handleTrashButtonClick(e)} />
@@ -589,7 +585,7 @@ class SnippetNoteDetail extends React.Component {
this.handleInfoButtonClick(e)}
diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index e7974d14..06958a82 100644
--- 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
index fb89465c..04dcaacd 100644
--- a/browser/main/Detail/TrashButton.js
+++ b/browser/main/Detail/TrashButton.js
@@ -8,15 +8,7 @@ const TrashButton = ({
)
diff --git a/browser/main/Detail/TrashButton.styl b/browser/main/Detail/TrashButton.styl
index a26095c4..1d7d3add 100644
--- 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
index 16c6ccb2..d8530512 100644
--- 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