Merge pull request #6850 from logseq/enhance/whiteboards-ux

src/main/frontend/components/repo.cljs

@@ -228,7 +228,7 @@
                                              (check-multiple-windows? state)
                                              (toggle-fn))
                                  :title    repo-path}       ;; show full path on hover
-                                [:span.flex.pr-2.relative
+                                [:span.flex.relative
                                  {:style {:top 1}}
                                  (ui/icon "database" {:size 16 :id "database-icon"})]
                                 [:div.graphs

src/main/frontend/components/sidebar.cljs

@@ -87,7 +87,7 @@
             (if whiteboard-page?
               (route-handler/redirect-to-whiteboard! name)
               (route-handler/redirect-to-page! name {:click-from-recent? recent?})))))}
-     [:span.page-icon (if whiteboard-page? [:span.tie.tie-whiteboard] icon)]
+     [:span.page-icon (if whiteboard-page? (ui/icon "whiteboard" {:extension? true}) icon)]
      [:span.page-title (pdf-assets/fix-local-asset-filename original-name)]]))
 
 (defn get-page-icon [page-entity]

src/main/frontend/components/sidebar.css

@@ -119,7 +119,8 @@
   .page-icon {
     @apply flex items-center mr-1 align-baseline;
 
-    width: 16px;
+    width: 20px;
+    flex-shrink: 0;
     height: 18px;
     text-align: center;
     display: inline-block;
@@ -133,7 +134,9 @@
     user-select: none;
     transition: background-color .3s;
 
-    > :is(.ti, .tie) {
+    .ui__icon {
+      width: 20px;
+      text-align: center;
       font-size: 16px;
       margin-right: 8px;
       opacity: .9;
@@ -621,4 +624,4 @@ html[data-theme='dark'] {
 
 .full-height-without-header {
   height: calc(100vh - var(--ls-headbar-height) - 4rem);
-}
+}

src/main/frontend/ui.cljs

@@ -947,7 +947,7 @@
    (when-not (string/blank? class)
      (let [^js jsTablerIcons (gobj/get js/window "tablerIcons")]
        (if (or extension? font? (not jsTablerIcons))
-         [:i (merge {:class
+         [:span.ui__icon (merge {:class
                      (util/format
                       (str "%s-" class
                            (when (:class opts)