enhance(ux): update icon brightness when hovering on it

src/main/frontend/components/icon.cljs

@@ -29,9 +29,10 @@
         opts (dissoc opts :color?)
         item (cond
                (and (= :emoji (:type icon')) (:id icon'))
-               [:em-emoji (merge {:id (:id icon')
-                                  :style {:line-height 1}}
-                                 opts)]
+               [:span.ui__icon
+                [:em-emoji (merge {:id (:id icon')
+                                   :style {:line-height 1}}
+                                  opts)]]
 
                (and (= :tabler-icon (:type icon')) (:id icon'))
                (ui/icon (:id icon') opts))]

src/main/frontend/ui.css

@@ -275,6 +275,17 @@ html.is-mobile {
   display: inline-block;
 }
 
+.ui__icon svg {
+  filter: brightness(0.8);
+  transition: filter .15s;
+  will-change: filter;
+}
+
+.ui__icon:hover svg {
+  filter: brightness(1);
+  transition-duration: .15s;
+}
+
 .type-icon {
   @apply text-base text-center flex items-center justify-center rounded border mr-2 relative;