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