enhance(ui): polish colors for the shortcut label component

deps/shui/src/logseq/shui/shortcut/v1.cljs

@@ -62,34 +62,36 @@
                            %)))))))
 
 (rum/defc part
-  [ks size]
+  [ks size {:keys [interactive?]}]
   (let [tiles (map print-shortcut-key ks)
-        interactive? false]
-    (ui/button {:variant     :text
-                :class       (str "bg-gray-03 text-gray-10 px-1.5 py-0 leading-4 h-5 "
-                               (if interactive?
-                                 "hover:bg-gray-04 active:bg-gray-03 hover:text-gray-11"
-                                 "cursor-default hover:bg-gray-03 active:bg-gray-03 hover:text-gray-11"))
-                :size        size}
+        interactive? (true? interactive?)]
+    (ui/button {:variant (if interactive? :default :text)
+                :class   (str "bg-gray-03 text-gray-10 px-1.5 py-0 leading-4 h-5 rounded "
+                           (if interactive?
+                             "hover:bg-gray-04 active:bg-gray-03 hover:text-gray-12"
+                             "bg-transparent cursor-default active:bg-gray-03 hover:text-gray-11"))
+                :size    size}
       (for [[index tile] (map-indexed vector tiles)]
         [:<>
          (when (< 0 index)
-           [:div.ui__button__tile-separator])
-         [:div.ui__button__tile tile]]))))
+           [:span.ui__button__tile-separator])
+         [:span.ui__button__tile tile]]))))
 
 (rum/defc root
-  [shortcut & {:keys [size theme]
-                       :or   {size  :xs
-                              theme :gray}}]
+  [shortcut & {:keys [size theme interactive?]
+               :or   {size  :xs
+                      interactive? true
+                      theme :gray}}]
   (when (seq shortcut)
     (let [shortcuts (if (coll? shortcut)
                       [shortcut]
-                      (parse-shortcuts shortcut))]
+                      (parse-shortcuts shortcut))
+          opts {:interactive? interactive?}]
       (for [[index binding] (map-indexed vector shortcuts)]
         [:<>
          (when (< 0 index)
            [:div.text-gray-11.text-sm "|"])
          (if (coll? (first binding))   ; + included
            (for [ks binding]
-             (part ks size))
-           (part binding size))]))))
+             (part ks size opts))
+           (part binding size opts))]))))

src/main/frontend/components/shortcut.cljs

@@ -475,5 +475,6 @@
 
                         (not unset?)
                         [:code.flex.items-center.bg-transparent
-                         (shui/shortcut (string/join " | " (map #(dh/binding-for-display id %) binding))
-                           nil {:size :md})])]]))))])])]]))
+                         (shui/shortcut
+                           (string/join " | " (map #(dh/binding-for-display id %) binding))
+                           {:size :md :interactive? true})])]]))))])])]]))

src/main/frontend/ui.cljs

@@ -194,7 +194,7 @@
 
      [:span.flex-1 child]
      (when shortcut
-       [:span.ml-1 (render-keyboard-shortcut shortcut)])]))
+       [:span.ml-1 (render-keyboard-shortcut shortcut {:interactive? false})])]))
 
 (rum/defc dropdown-with-links
   [content-fn links