🐛 Fix several fronted errors related with new UI (#3691)

* 🐛 Fix title toggle arrow without content
* 🐛 Fix export dropdowns
* 🐛 Fix colorpicker eyedrop
* 🐛 Fix hover state on color row
* 🐛 Fix color bullet on color row
* 🐛 Fix some css errors in new UI
* 🐛 Fix text and typography component
* 🐛 Fix some icons
* 💄 Update ui in feedback page, webhooks page and access token page

frontend/src/app/main/ui/components/color_bullet_new.scss

@@ -22,6 +22,8 @@
   &.mini {
     width: var(--bullet-size, $s-16);
     height: var(--bullet-size, $s-16);
+    min-width: var(--bullet-size, $s-16);
+    min-height: var(--bullet-size, $s-16);
     margin-top: 0;
     border: 1px solid var(--color-bullet-border-color);
   }
@@ -29,7 +31,6 @@
   &.is-not-library-color {
     overflow: hidden;
     border-radius: $br-8;
-
     & .color-bullet-wrapper {
       clip-path: none;
     }
@@ -60,6 +61,9 @@
     height: 100%;
     background-color: var(--color-bullet-background-color);
   }
+  &:hover {
+    border: $s-2 solid var(--color-bullet-border-color-selected);
+  }
 }
 
 .color-text {

frontend/src/app/main/ui/components/color_input.cljs

@@ -45,7 +45,7 @@
         dirty-ref        (mf/use-ref false)
 
         parse-value
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps ref)
          (fn []
            (let [input-node (mf/ref-val ref)]
@@ -58,14 +58,14 @@
                  nil)))))
 
         update-input
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps ref)
          (fn [new-value]
            (let [input-node (mf/ref-val ref)]
              (dom/set-value! input-node (uc/remove-hash new-value)))))
 
         apply-value
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps on-change update-input)
          (fn [new-value]
            (mf/set-ref-val! dirty-ref false)
@@ -75,7 +75,7 @@
              (update-input new-value))))
 
         handle-key-down
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps apply-value update-input)
          (fn [event]
            (mf/set-ref-val! dirty-ref true)
@@ -93,7 +93,7 @@
                (dom/blur! input-node)))))
 
         handle-blur
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps parse-value apply-value update-input)
          (fn [_]
            (let [new-value (parse-value)]
@@ -104,7 +104,7 @@
                (update-input value)))))
 
         on-click
-        (mf/use-callback
+        (mf/use-fn
          (fn [event]
            (let [target (dom/get-target event)]
              (when (some? ref)
@@ -113,12 +113,12 @@
                    (dom/blur! current)))))))
 
         on-mouse-up
-        (mf/use-callback
+        (mf/use-fn
           (fn [event]
             (dom/prevent-default event)))
 
         handle-focus
-        (mf/use-callback
+        (mf/use-fn
           (fn [event]
             (let [target (dom/get-target event)]
               (when on-focus

frontend/src/app/main/ui/components/editable_select.scss

@@ -21,7 +21,7 @@
   .dropdown-button {
     @include flexCenter;
     svg {
-      @extend .button-icon;
+      @extend .button-icon-small;
       transform: rotate(90deg);
       stroke: var(--icon-foreground);
     }

frontend/src/app/main/ui/components/radio_buttons.cljs

@@ -20,7 +20,6 @@
   {::mf/wrap-props false}
   [props]
   (let [context   (mf/use-ctx context)
-
         icon       (unchecked-get props "icon")
         id         (unchecked-get props "id")
         value      (unchecked-get props "value")
@@ -28,18 +27,18 @@
         title      (unchecked-get props "title")
         unique-key (unchecked-get props "unique-key")
         icon-class (unchecked-get props "icon-class")
+        type       (or (unchecked-get props "type") "radio")
 
         on-change  (unchecked-get context "on-change")
         selected   (unchecked-get context "selected")
         name       (unchecked-get context "name")
-        encode-fn  (unchecked-get context "encode-fn")
 
+        encode-fn  (unchecked-get context "encode-fn")
         checked?   (= selected value)]
 
     [:label {:for id
              :title title
              :key unique-key
-             :tabIndex "0"
              :class (stl/css-case
                      :radio-icon true
                      :checked checked?
@@ -53,48 +52,7 @@
 
      [:input {:id id
               :on-change on-change
-              :type "radio"
-              :name name
-              :disabled disabled
-              :value (encode-fn value)
-              :checked checked?}]]))
-
-(mf/defc nilable-option
-  {::mf/wrap-props false}
-  [props]
-  (let [context    (mf/use-ctx context)
-        icon       (unchecked-get props "icon")
-        id         (unchecked-get props "id")
-        value      (unchecked-get props "value")
-        title      (unchecked-get props "title")
-        disabled   (unchecked-get props "disabled")
-        unique-key (unchecked-get props "unique-key")
-        icon-class (unchecked-get props "icon-class")
-
-        on-change  (unchecked-get context "on-change")
-        selected   (unchecked-get context "selected")
-        name       (unchecked-get context "name")
-
-        encode-fn  (unchecked-get context "encode-fn")
-        checked?   (= selected value)]
-
-    [:label {:for id
-             :key unique-key
-             :title title
-             :class (stl/css-case
-                     :radio-icon true
-                     :disabled disabled
-                     :checked checked?)}
-
-     (if (some? icon)
-       [:span {:class (when icon-class icon-class)}
-        icon]
-       [:span {:class (stl/css :title-name)}
-        (encode-fn value)])
-
-     [:input {:id id
-              :on-change on-change
-              :type "checkbox"
+              :type type
               :name name
               :disabled disabled
               :value (encode-fn value)
@@ -128,9 +86,11 @@
         (mf/use-fn
          (mf/deps on-change)
          (fn [event]
-           (let [value (dom/get-target-val event)]
+           (let [input-node (dom/get-target event)
+                 value (dom/get-target-val event)]
              (when (fn? on-change)
-               (on-change (decode-fn value) event)))))
+               (do (on-change (decode-fn value) event)
+                   (dom/blur! input-node))))))
 
         context-value
         (mf/with-memo [selected on-change' name encode-fn decode-fn]

frontend/src/app/main/ui/components/radio_buttons.scss

@@ -14,11 +14,11 @@
 }
 .radio-icon {
   @extend .button-radio;
-  height: $s-28;
+  height: $s-32;
   flex-grow: 1;
-  border-radius: $s-6;
-  border: solid $s-1 transparent;
+  border-radius: $s-8;
   box-sizing: content-box;
+  border: none;
   input {
     display: none;
   }
@@ -30,8 +30,15 @@
     @include tabTitleTipography;
     color: var(--radio-btn-foreground-color);
   }
+  &:hover {
+    border: none;
+    svg {
+      color: var(--radio-btn-foreground-color-selected);
+    }
+  }
 
   &.checked {
+    border: none;
     background-color: var(--radio-btn-background-color-selected);
     svg {
       stroke: var(--radio-btn-foreground-color-selected);
@@ -43,6 +50,7 @@
 
   &.disabled {
     cursor: default;
+    background-color: transparent;
     svg {
       stroke: var(--button-foreground-color-disabled);
     }

frontend/src/app/main/ui/components/search_bar.cljs

@@ -42,7 +42,7 @@
          (fn [event]
            (let [enter? (kbd/enter? event)
                  esc?   (kbd/esc? event)
-                 node   (dom/event->target event)]
+                 node   (dom/get-target event)]
              (when ^boolean enter? (dom/blur! node))
              (when ^boolean esc? (dom/blur! node)))))]
     [:span {:class (dom/classnames (css :search-box) true

frontend/src/app/main/ui/components/select.cljs

@@ -23,7 +23,7 @@
     [item item item]))
 
 (mf/defc select
-  [{:keys [default-value options class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
+  [{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
   (let [new-css-system (mf/use-ctx ctx/new-css-system)
         label-index    (mf/with-memo [options]
                          (into {} (map as-key-value) options))
@@ -95,7 +95,7 @@
        [:span {:class (stl/css :current-label)} current-label]
        [:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
        [:& dropdown {:show is-open? :on-close close-dropdown}
-        [:ul {:class (stl/css :custom-select-dropdown)}
+        [:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
          (for [[index item] (d/enumerate options)]
            (if (= :separator item)
              [:li {:class (dom/classnames (stl/css :separator) true)

frontend/src/app/main/ui/components/select.scss

@@ -37,7 +37,7 @@
   .dropdown-button {
     @include flexCenter;
     svg {
-      @extend .button-icon;
+      @extend .button-icon-small;
       transform: rotate(90deg);
       stroke: var(--icon-foreground);
     }

frontend/src/app/main/ui/components/title_bar.cljs

@@ -13,16 +13,27 @@
 
 (mf/defc title-bar
   {::mf/wrap-props false}
-  [{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children class]}]
+  [{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children class clickable-all?]}]
   (let [klass (dm/str (stl/css :title-bar) " " class)]
     [:div {:class klass}
      (if collapsable?
-       [:button {:class (stl/css :toggle-btn) :on-click on-collapsed}
-        [:span {:class (stl/css-case
-                        :collased-icon true
-                        :rotated collapsed?)}
-         i/arrow-refactor]
-        [:div {:class (stl/css :title)} title]]
+       [:div {:class (stl/css :title-wrapper)}
+        (if clickable-all?
+          [:button {:class (stl/css :toggle-btn)
+                    :on-click on-collapsed}
+           [:span {:class (stl/css-case
+                           :collapsabled-icon true
+                           :rotated collapsed?)}
+            i/arrow-refactor]
+           [:div {:class (stl/css :title)} title]]
+
+          [:*
+           [:button {:class (stl/css-case
+                             :collapsabled-icon true
+                             :rotated collapsed?)
+                     :on-click on-collapsed}
+            i/arrow-refactor]
+           [:div {:class (stl/css :title)} title]])]
        [:div {:class (stl/css :title-only)} title])
      children
      (when (some? on-btn-click)

frontend/src/app/main/ui/components/title_bar.scss

@@ -23,26 +23,57 @@
     flex-grow: 1;
     height: 100%;
     min-height: $s-32;
-    margin-left: $s-8;
     color: var(--title-foreground-color);
   }
   .title-only {
     margin-left: $s-8;
   }
 
-  .toggle-btn {
-    @include buttonStyle;
+  .title-wrapper {
     display: flex;
     align-items: center;
     flex-grow: 1;
     padding: 0;
     color: var(--title-foreground-color);
     stroke: var(--title-foreground-color);
-    .collased-icon {
+    .toggle-btn {
+      @include buttonStyle;
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      padding: 0;
+      color: var(--title-foreground-color);
+      stroke: var(--title-foreground-color);
+      .collapsabled-icon {
+        @include flexCenter;
+        height: $s-24;
+        border-radius: $br-8;
+        svg {
+          @extend .button-icon-small;
+          transform: rotate(90deg);
+          stroke: var(--icon-foreground);
+        }
+        &.rotated svg {
+          transform: rotate(0deg);
+        }
+      }
+      &:hover {
+        color: var(--title-foreground-color-hover);
+        stroke: var(--title-foreground-color-hover);
+        .title {
+          color: var(--title-foreground-color-hover);
+          stroke: var(--title-foreground-color-hover);
+        }
+        .collapsabled-icon svg {
+          stroke: var(--title-foreground-color-hover);
+        }
+      }
+    }
+    .collapsabled-icon {
+      @include buttonStyle;
       @include flexCenter;
       height: $s-24;
       border-radius: $br-8;
-
       svg {
         @extend .button-icon-small;
         transform: rotate(90deg);
@@ -56,10 +87,9 @@
       color: var(--title-foreground-color-hover);
       stroke: var(--title-foreground-color-hover);
       .title {
-        color: var(--title-foreground-color-hover);
         stroke: var(--title-foreground-color-hover);
       }
-      .collased-icon svg {
+      .collapsabled-icon svg {
         stroke: var(--title-foreground-color-hover);
       }
     }