improve(ui): update built-in icon mode

resources/css/common.css

@@ -141,7 +141,7 @@ html[data-theme='light'] {
   --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2);
   --ls-head-text-color: var(--ls-link-text-color);
   --ls-cloze-text-color: #0000cd;
-  --ls-icon-color: #908e8b;
+  --ls-icon-color: #646464;
   --ls-search-icon-color: var(--ls-icon-color);
   --ls-a-chosen-bg: #f7f7f7;
   --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
@@ -174,10 +174,6 @@ body {
   word-break: break-word; /* compatible for overflow-wrap: anywhere */
 }
 
-a svg {
-  color: var(--ls-icon-color);
-}
-
 svg {
   pointer-events: none;
 }

resources/electron.html

@@ -52,6 +52,7 @@
 <script defer src="./js/interact.min.js"></script>
 <script defer src="./js/lsplugin.core.js"></script>
 <script defer src="./js/main.js"></script>
+<script defer src="./js/tabler.min.js"></script>
 <script defer src="./js/code-editor.js"></script>
 <script defer src="./js/age-encryption.js"></script>
 <script defer src="./js/excalidraw.js"></script>

resources/index.html

@@ -51,6 +51,7 @@
 <script defer src="./js/interact.min.js"></script>
 <script defer src="./js/lsplugin.core.js"></script>
 <script defer src="./js/main.js"></script>
+<script defer src="./js/tabler.min.js"></script>
 <script defer src="./js/code-editor.js"></script>
 <script defer src="./js/age-encryption.js"></script>
 <script defer src="./js/excalidraw.js"></script>

src/main/frontend/components/encryption.cljs

@@ -141,7 +141,7 @@
 
     [:div.encryption-password.max-w-2xl.-mb-2
      [:div.cp__file-sync-related-normal-modal
-      [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "lock-access")]]
+      [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "lock-access" {:size 28})]]
 
       [:div.mt-3.text-center.sm:mt-0.sm:text-left
        [:h1#modal-headline.text-2xl.font-bold.text-center
@@ -160,7 +160,7 @@
          [:div.folder-tip.flex.flex-col.items-center
           [:h3
            [:span.flex.space-x-2.leading-none.pb-1
-            (ui/icon "cloud-lock")
+            (ui/icon "cloud-lock" {:size 20})
             [:span GraphName]
             [:span.scale-75 (ui/icon "arrow-right")]
             [:span (ui/icon "folder")]]]
@@ -169,10 +169,10 @@
          [:div.input-hints.text-sm.py-2.px-3.rounded.mb-2.mt-2.flex.items-center
           (if-let [display-str (:fail set-remote-graph-pwd-result)]
             [:<>
-             [:span.scale-125.pr-1.text-red-600 (ui/icon "alert-circle" {:class "text-md mr-1"})]
+             [:span.flex.pr-1.text-red-600 (ui/icon "alert-circle" {:class "text-md mr-1"})]
              [:span.text-red-600 display-str]]
             [:<>
-             [:span.scale-125.pr-1 (ui/icon "bulb" {:class "text-md mr-1"})]
+             [:span.flex.pr-1 (ui/icon "bulb" {:class "text-md mr-1"})]
              [:span "Please enter the password for this graph to continue syncing."]])]])
 
       ;; secure this remote graph
@@ -186,9 +186,9 @@
                     (not (string/blank? @*pw-confirm)))
               (if (or (not (pattern-ok?))
                       (not= @*password @*pw-confirm))
-                [:span.scale-125.pr-1.text-red-600 (ui/icon "alert-circle" {:class "text-md mr-1"})]
-                [:span.scale-125.pr-1.text-green-600 (ui/icon "circle-check" {:class "text-md mr-1"})])
-              [:span.scale-125.pr-1 (ui/icon "bulb" {:class "text-md mr-1"})])
+                [:span.flex.pr-1.text-red-600 (ui/icon "alert-circle" {:class "text-md mr-1"})]
+                [:span.flex.pr-1.text-green-600 (ui/icon "circle-check" {:class "text-md mr-1"})])
+              [:span.flex.pr-1 (ui/icon "bulb" {:class "text-md mr-1"})])
 
             (if (not (string/blank? @*password))
               (if-not (pattern-ok?)
@@ -252,7 +252,7 @@
       (when init-graph-keys
         [:div.init-remote-pw-tips.space-x-4.pt-2.hidden.sm:flex
          [:div.flex-1.flex.items-center
-          [:span.px-3.scale-125 (ui/icon "key")]
+          [:span.px-3.flex (ui/icon "key")]
           [:p.dark:text-gray-100
            [:span "Please make sure you "]
            "remember the password you have set, "
@@ -261,7 +261,7 @@
            [:span "of the password."]]]
 
          [:div.flex-1.flex.items-center
-          [:span.px-3.scale-125 (ui/icon "lock")]
+          [:span.px-3.flex (ui/icon "lock")]
           [:p.dark:text-gray-100
            "If you lose your password, all of your data in the cloud can’t be decrypted. "
            [:span "You will still be able to access the local version of your graph."]]]])]

src/main/frontend/components/file_sync.cljs

@@ -142,7 +142,7 @@
                                      (state/get-repos))))))))]
 
     [:div.cp__file-sync-related-normal-modal
-     [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "cloud-upload")]]
+     [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "cloud-upload" {:size 20})]]
 
      [:h1.text-xl.font-semibold.opacity-90.text-center.py-2
       "Are you sure you want to create a new remote graph?"]
@@ -250,12 +250,11 @@
                                              :queuing queuing?
                                              :idle    (and (not queuing?) idle?)}])}
                [:span.flex.items-center
-                (ui/icon "cloud"
-                         {:style {:fontSize ui/icon-size}})]]
+                (ui/icon "cloud" {:size ui/icon-size})]]
 
               [:a.button.cloud.off
                {:on-click turn-on}
-               (ui/icon "cloud-off" {:style {:fontSize ui/icon-size}})]))
+               (ui/icon "cloud-off" {:size ui/icon-size})]))
 
           (cond-> []
             synced-file-graph?
@@ -265,8 +264,9 @@
                         [:span.opacity-60 "Everything is synced!"]]
                  :as-link? false}]
                (if need-password?
-                 [{:title   [:div.file-item
-                             (ui/icon "lock") "Password is required"]
+                 [{:title   [:div.file-item.flex
+                             (ui/icon "lock")
+                             [:span.pl-1 "Password is required"]]
                    :options {:on-click fs-sync/sync-need-password!}}]
                  [{:title   [:div.file-item.is-first ""]
                    :options {:class "is-first-placeholder"}}]))
@@ -589,7 +589,7 @@
   [close-fn]
 
   [:div.cp__file-sync-related-normal-modal
-   [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "checkup-list")]]
+   [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "checkup-list" {:size 28})]]
 
    [:h1.text-xl.font-semibold.opacity-90.text-center.py-2
     [:span.dark:opacity-80 "Congrats on your first successful sync!"]]
@@ -604,7 +604,7 @@
 
    [:div.cloud-tip.rounded-md.mt-6.py-4
     [:div.items-center.opacity-90.flex.justify-center
-     [:span.pr-2 (ui/icon "bell-ringing" {:class "font-semibold"})]
+     [:span.pr-2.flex (ui/icon "bell-ringing" {:class "font-semibold"})]
      [:strong "Logseq Sync is still in Beta and we're working on a Pro plan!"]]
 
     ;; [:ul.flex.py-6.px-4

src/main/frontend/components/header.cljs

@@ -31,7 +31,7 @@
                    (when (mobile-util/native-iphone?)
                      (state/set-left-sidebar-open! false))
                    (route-handler/redirect-to-home!))}
-     (ui/icon "home" {:style {:fontSize ui/icon-size}})]))
+     (ui/icon "home" {:size ui/icon-size})]))
 
 (rum/defc login < rum/reactive
   < {:key-fn #(identity "login-button")}
@@ -55,7 +55,7 @@
     [:button.#left-menu.cp__header-left-menu.button.icon
      {:title "Toggle left menu"
       :on-click on-click}
-     (ui/icon "menu-2" {:style {:fontSize ui/icon-size}})]))
+     (ui/icon "menu-2" {:size ui/icon-size})]))
 
 (rum/defc dropdown-menu < rum/reactive
   < {:key-fn #(identity "repos-dropdown-menu")}
@@ -68,7 +68,7 @@
        [:button.button.icon.toolbar-dots-btn
         {:on-click toggle-fn
          :title "More"}
-        (ui/icon "dots" {:style {:fontSize ui/icon-size}})])
+        (ui/icon "dots" {:size ui/icon-size})])
      (->>
       [(when (state/enable-editing?)
          {:title (t :settings)
@@ -118,12 +118,12 @@
    (ui/with-shortcut :go/backward "bottom"
      [: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/icon "arrow-left" {:size ui/icon-size})])
 
    (ui/with-shortcut :go/forward "bottom"
      [: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}})])])
+      (ui/icon "arrow-right" {:size ui/icon-size})])])
 
 (rum/defc updater-tips-new-version
   [t]
@@ -186,7 +186,7 @@
                                         (mobile-util/native-iphone?))
                                 (state/set-left-sidebar-open! false))
                               (state/pub-event! [:go/search]))}
-              (ui/icon "search" {:style {:fontSize ui/icon-size}})]))])
+              (ui/icon "search" {:size ui/icon-size})]))])
       (when (mobile-util/native-platform?)
         (if (or (state/home?) custom-home-page?)
           left-menu

src/main/frontend/components/header.css

@@ -1,5 +1,6 @@
 .cp__header {
   @apply z-10;
+
   -webkit-app-region: drag;
 
   padding-top: var(--ls-headbar-inner-top-padding);
@@ -17,7 +18,8 @@
   white-space: nowrap;
 
   > .l {
-    @apply pl-4;
+    @apply pl-2;
+
     width: var(--ls-left-sidebar-width);
     height: 100%;
     align-items: center;
@@ -38,10 +40,6 @@
     transform: translate3d(0, 0, 0);
   }
 
-  .it svg {
-    transform: scale(0.8);
-  }
-
   .button {
     display: flex;
     align-items: center;
@@ -130,10 +128,6 @@
   }
 }
 
-.cp__header .navigation svg {
-  transform: scale(0.7);
-}
-
 .is-electron.is-mac.is-fullscreen .cp__header > .l {
   padding-left: 1rem;
 }
@@ -178,8 +172,14 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 15ch;
+  max-width: 20ch;
   height: 14px;
+
+  .ui__icon {
+    position: relative;
+    top: 5px;
+    right: -1px;
+  }
 }
 
 .button {

src/main/frontend/components/page.cljs

@@ -920,7 +920,7 @@
              [:a.button.journal
               {:class    (util/classnames [{:active (boolean @*journal?)}])
                :on-click #(reset! *journal? (not @*journal?))}
-              (ui/icon "calendar" {:style {:fontSize ui/icon-size}})])]
+              (ui/icon "calendar" {:size ui/icon-size})])]
 
            [:div.paginates
             [:span.flex.items-center
@@ -936,7 +936,7 @@
             (fn [{:keys [toggle-fn]}]
               [:a.button.fade-link
                {:on-click toggle-fn}
-               (ui/icon "dots" {:style {:fontSize ui/icon-size}})])
+               (ui/icon "dots" {:size ui/icon-size})])
             [{:title (t :remove-orphaned-pages)
               :options {:on-click (fn []
                                     (let [orphaned-pages (model/get-orphaned-pages {})

src/main/frontend/components/page.css

@@ -132,13 +132,15 @@
     }
 
     .r {
-      font-size: 14px;
-
+      @apply text-base space-x-2;
+      
       a.button {
         color: var(--ls-primary-text-color);
         margin-top: 1px;
         height: unset;
         padding: 4px;
+        display: flex;
+        align-items: center;
 
         &.active {
           opacity: 1;
@@ -325,9 +327,7 @@ html.is-native-ios {
   .cp__all_pages {
     .actions > .r {
       position: relative;
-      padding: 15px 0;
-      padding-right: 10px;
-      padding-bottom: 25px;
+      padding: 15px 10px 25px 0;
       justify-content: space-between;
 
       .paginates {

src/main/frontend/components/plugins.cljs

@@ -132,12 +132,12 @@
 
   [:div.secondary-tabs.categories
    (ui/button
-    [:span (ui/icon "puzzle") (t :plugins)]
+    [:span.flex.items-center (ui/icon "puzzle") (t :plugins)]
     :intent "logseq"
     :on-click #(on-action :plugins)
     :class (if (= category :plugins) "active" ""))
    (ui/button
-    [:span (ui/icon "palette") (t :themes)]
+    [:span.flex.items-center (ui/icon "palette") (t :themes)]
     :intent "logseq"
     :on-click #(on-action :themes)
     :class (if (= category :themes) "active" ""))])
@@ -232,8 +232,10 @@
        [:strong (ui/icon "coffee")]
        [:ul.menu-list
         (for [link sponsors]
-          [:li [:a {:href link :target "_blank"}
-                [:span.flex.items-center link (ui/icon "external-link")]]])]])]
+          [:li {:key link}
+           [:a {:href link :target "_blank"}
+            [:span.flex.items-center link (ui/icon "external-link")]]])
+        ]])]
 
    [:div.r.flex.items-center
     (when (and unpacked? (not disabled?))
@@ -438,7 +440,8 @@
          (ui/tippy {:html  [:div (t :plugin/unpacked-tips)]
                     :arrow true}
                    (ui/button
-                    [:span (ui/icon "upload") (t :plugin/load-unpacked)]
+                    [:span.flex.items-center
+                     (ui/icon "upload") (t :plugin/load-unpacked)]
                     :intent "logseq"
                     :class "load-unpacked"
                     :on-click plugin-handler/load-unpacked-plugin))
@@ -534,21 +537,21 @@
           :intent "link"))
 
        (concat (if market?
-                 [{:title   [:span (ui/icon "rotate-clockwise") (t :plugin/refresh-lists)]
+                 [{:title   [:span.flex.items-center (ui/icon "rotate-clockwise") (t :plugin/refresh-lists)]
                    :options {:on-click #(reload-market-fn)}}]
-                 [{:title   [:span (ui/icon "rotate-clockwise") (t :plugin/check-all-updates)]
+                 [{:title   [:span.flex.items-center (ui/icon "rotate-clockwise") (t :plugin/check-all-updates)]
                    :options {:on-click #(plugin-handler/check-enabled-for-updates (not= :plugins category))}}])
 
-               [{:title   [:span (ui/icon "world") (t :settings-page/network-proxy)]
+               [{:title   [:span.flex.items-center (ui/icon "world") (t :settings-page/network-proxy)]
                  :options {:on-click #(state/pub-event! [:go/proxy-settings agent-opts])}}]
 
                (when (state/developer-mode?)
                  [{:hr true}
-                  {:title   [:span (ui/icon "file-code") "Open Preferences"]
+                  {:title   [:span.flex.items-center (ui/icon "file-code") "Open Preferences"]
                    :options {:on-click
                              #(p/let [root (plugin-handler/get-ls-dotdir-root)]
                                 (js/apis.openPath (str root "/preferences.json")))}}
-                  {:title   [:span (ui/icon "bug") "Open " [:code " ~/.logseq"]]
+                  {:title   [:span.flex.items-center (ui/icon "bug") "Open " [:code " ~/.logseq"]]
                    :options {:on-click
                              #(p/let [root (plugin-handler/get-ls-dotdir-root)]
                                 (js/apis.openPath root))}}]))
@@ -852,7 +855,7 @@
    (fn [{:keys [toggle-fn]}]
      [:div.toolbar-plugins-manager
       {:on-click toggle-fn}
-      [:a.button (ui/icon "puzzle")]])
+      [:a.button (ui/icon "puzzle" {:size 20})]])
 
    ;; items
    (for [[_ {:keys [key pinned?] :as opts} pid] items

src/main/frontend/components/repo.cljs

@@ -164,7 +164,7 @@
                           {:title        [:span.flex.items-center.whitespace-nowrap short-repo-name
                                           (when remote? [:span.pl-1
                                                          {:title (str "<" GraphName "> #" GraphUUID)}
-                                                         (ui/icon "cloud")])]
+                                                         (ui/icon "cloud" {:size 18})])]
                            :hover-detail repo-path ;; show full path on hover
                            :options      {:on-click (fn [e]
                                                       (if (gobj/get e "shiftKey")

src/main/frontend/components/settings.cljs

@@ -517,6 +517,7 @@
               (when-let [e (and protocol host port (str protocol "://" host ":" port))]
                 [:strong.pr-1 e])
               (ui/icon "edit")]
+             :small? true
              :on-click #(state/set-sub-modal!
                          (fn [_] (plugins/user-proxy-settings-panel agent-opts))
                          {:id :https-proxy-panel :center? true})))