fix: electron header style issues on Mac

src/electron/electron/core.cljs

@@ -30,7 +30,7 @@
                    :height        (.-height win-state)
                    :frame         true
                    :titleBarStyle "hiddenInset"
-                   :trafficLightPosition {:x 15 :y 15}
+                   :trafficLightPosition {:x 16 :y 16}
                    :autoHideMenuBar (not mac?)
                    :webPreferences
                    {:plugins                 true ; pdf

src/main/frontend/components/header.cljs

@@ -45,8 +45,8 @@
 
       (ui/dropdown-with-links
        (fn [{:keys [toggle-fn]}]
-         [:a.fade-link {:on-click toggle-fn}
-          [:span.ml-1 (t :login)]])
+         [:a.fade-link.block.p-2 {:on-click toggle-fn}
+          [:span (t :login)]])
        (let [list [
                    ;; {:title (t :login-google)
                    ;;  :url (str config/website "/login/google")}
@@ -80,7 +80,7 @@
         logged? (state/logged?)]
     (ui/dropdown-with-links
      (fn [{:keys [toggle-fn]}]
-       [:a.cp__right-menu-button
+       [:a.cp__right-menu-button.block.p-2
         {:on-click toggle-fn}
         (svg/horizontal-dots nil)])
      (->>
@@ -169,21 +169,24 @@
                                       (open-fn)
                                       (state/set-left-sidebar-open! true))})
 
-       (logo {:white? white?})
+       (when-not electron-mac?
+         (logo {:white? white?}))
 
        (when (util/electron?)
-         [:a.opacity-60.hover:opacity-100.mr-1.it.navigation.nav-left
+         [:a.opacity-60.hover:opacity-100.it.navigation.nav-left.block.p-1
           {:title "Go Back" :on-click #(js/window.history.back)} svg/arrow-narrow-left])
 
        (when (util/electron?)
-         [:a.opacity-60.hover:opacity-100.it.navigation.nav-right
-          {:style {:margin-right 5}
-           :title "Go Forward" :on-click #(js/window.history.forward)} svg/arrow-narrow-right])
+         [:a.opacity-60.hover:opacity-100.it.navigation.nav-right.block.p-1
+          {:title "Go Forward" :on-click #(js/window.history.forward)} svg/arrow-narrow-right])
 
        (if current-repo
          (search/search)
          [:div.flex-1])
 
+       (when electron-mac?
+         (logo {:white? white?}))
+
        (new-block-mode)
 
        (when-not (util/electron?)
@@ -199,7 +202,7 @@
 
        (when (and (nfs/supported?) (empty? repos)
                   (not config/publishing?))
-         [:a.text-sm.font-medium.opacity-70.hover:opacity-100.ml-3.block.open-button
+         [:a.text-sm.font-medium.opacity-70.hover:opacity-100.block.p-2
           {:on-click (fn []
                        (page-handler/ls-dir-files!))}
           [:div.flex.flex-row.text-center.open-button__inner
@@ -209,7 +212,7 @@
               (t :open)])]])
 
        (if config/publishing?
-         [:a.text-sm.font-medium.ml-3 {:href (rfe/href :graph)}
+         [:a.text-sm.font-medium.block.p-2 {:href (rfe/href :graph)}
           (t :graph)])
 
        (dropdown-menu {:me me

src/main/frontend/components/header.css

@@ -2,7 +2,7 @@
   @apply shadow z-10 h-12;
   -webkit-app-region: drag;
 
-  padding-right: 1rem;
+  padding: 0 0.5rem;
   display: flex;
   align-items: center;
   flex: 0 0 auto;
@@ -27,44 +27,10 @@
       min-width: 14rem;
     }
   }
-
-  &.electron-mac {
-    height: 38px;
-
-    .refresh {
-      margin: 0;
-    }
-
-    .open-button__icon-wrapper {
-      margin-right: 7px;
-    }
-
-    svg {
-      width: 18px;
-      height: 18px;
-    }
-
-    .navigation svg {
-      width: 24px;
-      height: 24px;
-    }
-
-    .open-button {
-      &__inner {
-        @apply items-center;
-
-        svg {
-          width: 18px;
-          height: 18px;
-        }
-      }
-    }
-
-  }
 }
 
 .is-electron.is-mac .cp__header {
-    padding-left: 72px;
+    padding-left: 78px;
     -moz-transition: padding-left .3s ease-in;
     -o-transition: padding-left  .3s ease-in;
     -webkit-transition: padding-left  .3s ease-in;
@@ -79,6 +45,10 @@
     padding-left: 0;
 }
 
+.is-electron.is-mac.is-fullscreen .navigation {
+    display: none;
+}
+
 .cp__header a, .cp__header svg {
     -webkit-app-region: no-drag;
 }
@@ -97,8 +67,7 @@
 }
 
 .cp__header-logo {
-  @apply px-4;
-  height: 100%;
+  @apply p-2;
 }
 
 .cp__header-logo,
@@ -120,14 +89,6 @@
   height: 24px;
 }
 
-.cp__right-menu-button {
-  @apply ml-3;
-}
-
-.cp__right-menu-button {
-  display: block;
-}
-
 @screen sm {
   .cp__header {
     @apply shadow-none;
@@ -138,8 +99,7 @@
   }
 
   .cp__header-logo {
-    display: flex;
-    align-items: center;
+    display: block;
   }
 }
 

src/main/frontend/components/repo.cljs

@@ -99,8 +99,8 @@
       (when-not (= repo config/local-repo)
         (if (and nfs-repo? (nfs-handler/supported?))
           (let [syncing? (state/sub :graph/syncing?)]
-            [:div.ml-2.mr-1.mt-1.opacity-60.refresh.hover:opacity-100 {:class (if syncing? "loader" "initial")}
-             [:a
+            [:div.opacity-60.refresh.hover:opacity-100 {:class (if syncing? "loader" "initial")}
+             [:a.block.p-2
               {:on-click #(nfs-handler/refresh! repo refresh-cb)
                :title (str "Import files from the local directory: " (config/get-local-dir repo) ".\nVersion: "
                            version/version)}
@@ -202,8 +202,7 @@
         (when (seq repos)
           (ui/dropdown-with-links
            (fn [{:keys [toggle-fn]}]
-             [:a#repo-switch.fade-link {:on-click toggle-fn}
-
+             [:a#repo-switch.fade-link.block.pr-2 {:on-click toggle-fn}
               [:span
                [:span.repo-plus svg/plus]
                (let [repo-name (get-repo-name current-repo)

src/main/frontend/components/right_sidebar.cljs

@@ -27,7 +27,7 @@
 (rum/defc toggle
   []
   (when-not (util/mobile?)
-    [:a.opacity-60.hover:opacity-100.ml-4 {:on-click state/toggle-sidebar-open?!}
+    [:a.opacity-60.hover:opacity-100.block.p-2 {:on-click state/toggle-sidebar-open?!}
     (svg/menu)]))
 
 (rum/defc block-cp < rum/reactive
@@ -244,7 +244,7 @@
 
           (sidebar-resizer)
           [:div.cp__right-sidebar-scrollable
-           [:div.cp__right-sidebar-topbar.flex.flex-row.justify-between.items-center.px-4.h-12
+           [: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]

src/main/frontend/components/search.cljs

@@ -285,7 +285,7 @@
                   :else
                   300)]
     (rum/with-context [[t] i18n/*tongue-context*]
-      [:div#search.flex-1.flex
+      [:div#search.flex-1.flex.p-2
        [:div.inner
         [:label.sr-only {:for "search-field"} (t :search)]
         [:div#search-wrapper.relative.w-full.text-gray-400.focus-within:text-gray-600

src/main/frontend/components/sidebar.cljs

@@ -270,9 +270,9 @@
                       [:ul
                        [:li "Shift + Enter to create new block"]
                        [:li "Click `D` or type `t d` to toggle document mode"]]]}
-     [:a.px-1.text-sm.font-medium.bg-base-2.mr-4.rounded-md
-      {:on-click state/toggle-document-mode!}
-      "D"])))
+              [:a.block.px-1.text-sm.font-medium.bg-base-2.rounded-md.mx-2
+               {:on-click state/toggle-document-mode!}
+               "D"])))
 
 (rum/defc help-button < rum/reactive
   []
@@ -345,6 +345,7 @@
           :close-fn    close-fn
           :route-match route-match})
         [:div.#app-container.h-screen.flex
+         {:class (if (state/sub :ui/sidebar-open?) "w-full" "overflow-hidden")}
          [:div.flex-1.h-full.w-full.flex.flex-col#left-container.relative
           [:div.scrollbar-spacing#main-container
            (header/header {:open-fn        open-fn

src/main/frontend/components/svg.cljs

@@ -386,8 +386,7 @@
 (rum/defc logo
   [dark?]
   [:svg.svg-shadow
-   {:fill (if dark? "currentColor" "#002B36"), :view-box "0 0 21 21", :height "21", :width "21"
-    :style {:margin-top 2}}
+   {:fill (if dark? "currentColor" "#002B36"), :view-box "0 0 21 21", :height "21", :width "21"}
    [:ellipse
     {:transform
      "matrix(0.987073 0.160274 -0.239143 0.970984 11.7346 2.59206)"