Lighter syncfolder btn in nav

beakerbrowser · Oct 22, 2018 · 2b4b0e1 · 2b4b0e1
1 parent 3080eb9
commit 2b4b0e1
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 23 deletions.
diff --git a/app/shell-window/ui/navbar.js b/app/shell-window/ui/navbar.js
@@ -410,10 +410,10 @@ function render (id, page) {
         ${inpageFinder}
         ${zoomBtn}
         ${!isLocationHighlighted ? [
+          datBtns,
           syncfolderMenuNavbarBtn.render(),
           liveReloadBtn,
           donateBtn,
-          datBtns,
           page ? page.datsiteMenuNavbarBtn.render() : undefined,
           pageMenuNavbarBtn.render(),
           bookmarkMenuNavbarBtn.render()

diff --git a/app/shell-window/ui/navbar/syncfolder-menu.js b/app/shell-window/ui/navbar/syncfolder-menu.js
@@ -34,7 +34,7 @@ export class SyncfolderMenuNavbarBtn {
     // render btn
     return yo`
       <div class="toolbar-dropdown-menu syncfolder-dropdown-menu">
-        <button class="btn nofocus ${this.isDropdownOpen ? 'pressed' : ''}" onclick=${e => this.onClickBtn(e)} title="Menu">
+        <button class="callout light ${this.isDropdownOpen ? 'pressed' : ''}" onclick=${e => this.onClickBtn(e)} title="Menu">
           <span>${localSyncPath}</span>
           <span class="fa fa-caret-down"></span>
         </button>

diff --git a/app/stylesheets/shell-window/toolbar-dropdown.less b/app/stylesheets/shell-window/toolbar-dropdown.less
@@ -115,27 +115,8 @@
   }
 }
 
-.syncfolder-dropdown-menu {
-  margin-right: 4px;
-
-  .btn {
-    height: 20px;
-    line-height: 20px;
-    font-size: 12.5px;
-    padding: 0 6px;
-    background: @lime;
-    color: rgba(0,0,0,0.5);
-    border-color: #fff;
-
-    &:hover,
-    &.pressed {
-      background: darken(@lime, 10%);
-    }
-
-    &.preview {
-      background: #E3F2FD;
-    }
-  }
+.toolbar-input-group .syncfolder-dropdown-menu {
+  margin-left: 2px;
 
   .toolbar-dropdown {
     margin: 0;

diff --git a/app/stylesheets/shell-window/toolbar-input-group.less b/app/stylesheets/shell-window/toolbar-input-group.less
@@ -55,6 +55,11 @@
       background: @background-button--active;
       margin: 2px;
       border-radius: 2px;
+      line-height: 1.2;
+
+      &.light {
+        background: #fff;
+      }
 
       &:hover {
         background: @background-button--gray;