Header icon consistency

resources/css/common.css

@@ -808,6 +808,14 @@ li p:last-child,
   border-right-color: var(--ls-border-color, #ccc);
 }
 
+i.ti {
+  /*
+  compensates the wrong top spacing in the iconfont.
+  See https://github.com/tabler/tabler-icons/issues/118/
+  */
+  transform: translateY(-1px);
+}
+
 .dnd-separator {
   border-bottom: 3px solid #ccc;
 }

src/main/frontend/components/header.cljs

@@ -25,7 +25,7 @@
 
 (rum/defc home-button []
   (ui/with-shortcut :go/home "left"
-    [:a.button
+    [:button.button.icon.inline
      {:href     (rfe/href :home)
       :on-click #(do
                    (when (mobile-util/native-iphone?)
@@ -40,13 +40,13 @@
       (if (user-handler/logged-in?)
         (ui/dropdown-with-links
          (fn [{:keys [toggle-fn]}]
-           [:a.button
+           [:button.button
             {:on-click toggle-fn}
             [:span.text-sm.font-medium (user-handler/email)]])
          [{:title (t :logout)
            :options {:on-click user-handler/logout}}]
          {})
-        [:a.button.text-sm.font-medium.block {:on-click #(js/window.open config/LOGIN-URL)}
+        [:button.button.text-sm.font-medium.block {:on-click #(js/window.open config/LOGIN-URL)}
          [:span (t :login)]]))))
 
 (rum/defcs file-sync-remote-graphs <
@@ -90,10 +90,10 @@
         (ui/dropdown-with-links
          (fn [{:keys [toggle-fn]}]
            (if not-syncing?
-             [:a.button
+             [:button.button.icon.inline
               {:on-click toggle-fn}
               (ui/icon "cloud-off" {:style {:fontSize ui/icon-size}})]
-             [:a.button
+             [:button.button.icon.inline
               {:on-click toggle-fn}
               (ui/icon "cloud" {:style {:fontSize ui/icon-size}})]))
          (cond-> []
@@ -131,11 +131,9 @@
 (rum/defc left-menu-button < rum/reactive
   [{:keys [on-click]}]
   (ui/with-shortcut :ui/toggle-left-sidebar "bottom"
-    [:a#left-menu.cp__header-left-menu.button
-     {:on-click on-click
-      :style    {:margin-left 12}}
-     [:span.inner
-      (ui/icon "menu-2" {:style {:fontSize ui/icon-size}})]]))
+    [:button.#left-menu.cp__header-left-menu.button.icon
+     {:on-click on-click}
+      (ui/icon "menu-2" {:style {:fontSize ui/icon-size}})]))
 
 (rum/defc dropdown-menu < rum/reactive
   [{:keys [current-repo t]}]
@@ -144,7 +142,7 @@
                            (concat page-menu [{:hr true}]))]
     (ui/dropdown-with-links
      (fn [{:keys [toggle-fn]}]
-       [:a.button
+       [:button.button.icon
         {:on-click toggle-fn}
         (ui/icon "dots" {:style {:fontSize ui/icon-size}})])
      (->>
@@ -188,12 +186,12 @@
   [:div.flex.flex-row
 
    (ui/with-shortcut :go/backward "bottom"
-     [:a.it.navigation.nav-left.button
+     [:button.it.navigation.nav-left.button.icon
       {:title "Go back" :on-click #(js/window.history.back)}
       (ui/icon "arrow-left" {:style {:fontSize ui/icon-size}})])
 
    (ui/with-shortcut :go/forward "bottom"
-     [:a.it.navigation.nav-right.button
+     [:button.it.navigation.nav-right.button.icon
       {:title "Go forward" :on-click #(js/window.history.forward)}
       (ui/icon "arrow-right" {:style {:fontSize ui/icon-size}})])])
 
@@ -244,12 +242,12 @@
                                       (.. target -classList (contains "cp__header")))
                              (js/window.apis.toggleMaxOrMinActiveWindow))))
       :style           {:fontSize  50}}
-     [:div.l.flex
+     [:div.l.flex.gap-1
       (when-not (mobile-util/native-platform?)
         [left-menu
          (when current-repo ;; this is for the Search button
            (ui/with-shortcut :go/search "right"
-             [:a.button#search-button
+             [:button.button.icon#search-button
               {:on-click #(do (when (or (mobile-util/native-android?)
                                         (mobile-util/native-iphone?))
                                 (state/set-left-sidebar-open! false))
@@ -259,11 +257,11 @@
         (if (state/home?)
           left-menu
           (ui/with-shortcut :go/backward "bottom"
-            [:a.it.navigation.nav-left.button
+            [:button.it.navigation.nav-left.button.icon
              {:title "Go back" :on-click #(js/window.history.back)}
              (ui/icon "chevron-left" {:style {:fontSize 25}})])))]
 
-     [:div.r.flex
+     [:div.r.flex.gap-1
       (when-not file-sync-handler/hiding-login&file-sync
         (file-sync))
       (when-not file-sync-handler/hiding-login&file-sync
@@ -281,7 +279,7 @@
         (new-block-mode))
 
       (when show-open-folder?
-        [:a.text-sm.font-medium.button.add-graph-btn.flex.items-center
+        [:a.text-sm.font-medium.button.icon.add-graph-btn.flex.items-center
          {:on-click #(route-handler/redirect! {:to :repo-add})}
          (ui/icon "folder-plus")
          (when-not config/mobile?
@@ -289,7 +287,7 @@
             (t :on-boarding/add-graph)])])
 
       (when config/publishing?
-        [:a.text-sm.font-medium.button {:href (rfe/href :graph)}
+        [:button.text-sm.font-medium.button {:href (rfe/href :graph)}
          (t :graph)])
 
       (dropdown-menu {:t            t

src/main/frontend/components/header.css

@@ -17,6 +17,7 @@
   white-space: nowrap;
 
   > .l {
+    @apply pl-4;
     width: var(--ls-left-sidebar-width);
     height: 100%;
     align-items: center;
@@ -24,8 +25,8 @@
   }
 
   > .r {
+    @apply pr-4;
     align-items: center;
-    padding-right: 0.5rem;
     flex: 1;
     justify-content: flex-end;
   }
@@ -41,10 +42,7 @@
     transform: scale(0.8);
   }
 
-  a.button {
-    margin: 0 4px;
-    height: 30px;
-    min-width: 30px;
+  .button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -119,18 +117,6 @@
       top: 1px;
     }
   }
-
-  &-left-menu {
-    &.button {
-      margin: 0;
-      padding: 0;
-    }
-
-    > .inner {
-      line-height: 0;
-      padding: 3px;
-    }
-  }
 }
 
 .is-electron.is-mac .cp__header {
@@ -191,11 +177,9 @@
   height: 14px;
 }
 
-a.button {
-  padding: 0.25rem;
-  opacity: 0.6;
+.button {
+  @apply h-8 px-2.5 py-1 rounded-md opacity-60;
   display: block;
-  border-radius: 4px;
   user-select: none;
 
   &:hover, &.active {
@@ -212,6 +196,10 @@ a.button {
   }
 }
 
+.button.icon {
+  @apply w-8 h-8 text-lg p-1;
+}
+
 .is-mac.is-electron :is(.cp__header, .cp__right-sidebar-topbar) :is(button, .button, a) {
   cursor: default !important;
 }
@@ -257,7 +245,7 @@ html.is-native-ipad {
       display: flex;
     }
 
-    a.button {
+    .button {
       opacity: 1;
     }
   }

src/main/frontend/components/right_sidebar.cljs

@@ -24,7 +24,7 @@
   []
   (when-not (util/mobile?)
     (ui/with-shortcut :ui/toggle-right-sidebar "left"
-      [:a.button.fade-link.toggle-right-sidebar
+      [:button.button.icon.fade-link.toggle-right-sidebar
        {:on-click ui-handler/toggle-right-sidebar!}
        (ui/icon "layout-sidebar-right" {:style {:fontSize "20px"}})])))
 
@@ -197,15 +197,15 @@
 
      (sidebar-resizer)
      [:div.cp__right-sidebar-scrollable
-      [:div.cp__right-sidebar-topbar.flex.flex-row.justify-between.items-center.pl-4.pr-2.h-12
-       [:div.cp__right-sidebar-settings.hide-scrollbar {:key "right-sidebar-settings"}
-        [:div.ml-4.text-sm
-         [:a.cp__right-sidebar-settings-btn {:on-click (fn [_e]
+      [:div.cp__right-sidebar-topbar.flex.flex-row.justify-between.items-center.pl-4.pr-4.h-12
+       [:div.cp__right-sidebar-settings.hide-scrollbar.gap-1 {:key "right-sidebar-settings"}
+        [:div.text-sm
+         [:button.button.cp__right-sidebar-settings-btn {:on-click (fn [_e]
                                                          (state/sidebar-add-block! repo "contents" :contents))}
           (t :right-side-bar/contents)]]
 
-        [:div.ml-4.text-sm
-         [:a.cp__right-sidebar-settings-btn {:on-click (fn []
+        [:div.text-sm
+         [:button.button.cp__right-sidebar-settings-btn {:on-click (fn []
                                                          (when-let [page (get-current-page)]
                                                            (state/sidebar-add-block!
                                                             repo
@@ -213,13 +213,12 @@
                                                             :page-graph)))}
           (t :right-side-bar/page)]]
 
-        [:div.ml-4.text-sm
-         [:a.cp__right-sidebar-settings-btn {:on-click (fn [_e]
+        [:div.text-sm
+         [:button.button.cp__right-sidebar-settings-btn {:on-click (fn [_e]
                                                          (state/sidebar-add-block! repo "help" :help))}
           (t :right-side-bar/help)]]]
 
-       [:div.flex.align-items {:style {:z-index 999
-                                       :margin-right 2}}
+       [:div
         (toggle)]]
 
       [:.sidebar-item-list.flex-1.scrollbar-spacing

src/main/frontend/components/sidebar.css

@@ -428,7 +428,6 @@ html[data-theme='dark'] {
 
   &-settings {
     @apply flex flex-row;
-    margin: -15px;
     margin-bottom: 0;
     margin-top: 0;
     overflow: auto;