feat: add border to header on mac electron and center align icons

samuelbaizg · Jul 2, 2021 · 43d8c0e · 43d8c0e
1 parent 1eb6cee
commit 43d8c0e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/src/main/frontend/components/header.cljs b/src/main/frontend/components/header.cljs
@@ -158,7 +158,8 @@
         electron-mac? (and util/mac? (util/electron?))]
     (rum/with-context [[t] i18n/*tongue-context*]
       [:div.cp__header#head
-       {:on-double-click (fn [^js e]
+       {:class (when electron-mac? "electron-mac")
+        :on-double-click (fn [^js e]
                            (when-let [target (.-target e)]
                              (when (and (util/electron?)
                                         (or (.. target -classList (contains "cp__header"))))
@@ -197,13 +198,13 @@
 
        (when (and (nfs/supported?) (empty? repos)
                   (not config/publishing?))
-         [:a.text-sm.font-medium.opacity-70.hover:opacity-100.ml-3.block
+         [:a.text-sm.font-medium.opacity-70.hover:opacity-100.ml-3.block.open-button
           {:on-click (fn []
                        (page-handler/ls-dir-files!))}
-          [:div.flex.flex-row.text-center
-           [:span.inline-block svg/folder-add]
+          [:div.flex.flex-row.text-center.open-button__inner
+           [:span.inline-block.open-button__icon-wrapper svg/folder-add]
            (when-not config/mobile?
-             [:span.ml-1 {:style {:margin-top 2}}
+             [:span.ml-1 {:style {:margin-top (if electron-mac? 0 2)}}
               (t :open)])]])
 
        (if config/publishing?

diff --git a/src/main/frontend/components/header.css b/src/main/frontend/components/header.css
@@ -26,6 +26,37 @@
       min-width: 14rem;
     }
   }
+
+  &.electron-mac {
+    height: auto;
+    border-bottom: 1px solid var(--ls-secondary-border-color);
+
+    .open-button__icon-wrapper {
+      margin-right: 7px;
+    }
+
+    svg {
+      width: 15px;
+      height: 15px;
+    }
+
+    .navigation svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    .open-button {
+      &__inner {
+        @apply items-center;
+
+        svg {
+          width: 18px;
+          height: 18px;
+        }
+      }
+    }
+
+  }
 }
 
 .is-electron.is-mac .cp__header {