From 36bc276d93740d761b949c2c46e0856df6a5a6a2 Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Mon, 9 Jan 2023 16:05:40 +0100
Subject: [PATCH] :bug: Fix outline in color type selector on view mode

---
 frontend/resources/styles/main/partials/inspect.scss |  5 +++++
 .../styles/main/partials/sidebar-layers.scss         |  1 -
 frontend/src/app/main/ui/components/color_input.cljs |  3 ++-
 .../main/ui/viewer/inspect/attributes/common.cljs    |  2 +-
 .../ui/workspace/sidebar/options/menus/exports.cljs  | 12 ++++++++++--
 5 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/resources/styles/main/partials/inspect.scss b/frontend/resources/styles/main/partials/inspect.scss
index 610f91edc..8e0eaa949 100644
--- a/frontend/resources/styles/main/partials/inspect.scss
+++ b/frontend/resources/styles/main/partials/inspect.scss
@@ -173,6 +173,11 @@
       background-position: 95% 48%;
       background-size: 10px;
       cursor: pointer;
+      outline: none;
+      &:focus,
+      &:focus-within {
+        border: 1px solid $color-primary;
+      }
 
       option {
         padding: 1rem;
diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss
index 4fdd348e5..1bb42703b 100644
--- a/frontend/resources/styles/main/partials/sidebar-layers.scss
+++ b/frontend/resources/styles/main/partials/sidebar-layers.scss
@@ -239,7 +239,6 @@ span.element-name {
   margin-left: auto;
   position: relative;
   width: 32px;
-  right: 20px;
 
   &.is-parent {
     right: 0;
diff --git a/frontend/src/app/main/ui/components/color_input.cljs b/frontend/src/app/main/ui/components/color_input.cljs
index 380a93802..eed2d2648 100644
--- a/frontend/src/app/main/ui/components/color_input.cljs
+++ b/frontend/src/app/main/ui/components/color_input.cljs
@@ -86,7 +86,8 @@
                  (dom/blur! input-node)))
              (when esc?
                (dom/prevent-default event)
-               (update-input value)))))
+               (update-input value)
+               (dom/blur! input-node)))))
 
         handle-blur
         (mf/use-callback
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
index b0959c464..cd3b7e180 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
@@ -67,7 +67,7 @@
            (when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])]))
 
       (when-not (and on-change-format (:gradient color))
-        [:select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)}
+        [:select.color-format-select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)}
          [:option {:value "hex"}
           (tr "inspect.attributes.color.hex")]
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
index 5ceec2ac7..c9f94e715 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
@@ -16,6 +16,7 @@
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer  [tr c]]
+   [app.util.keyboard :as kbd]
    [rumext.v2 :as mf]))
 
 (def exports-attrs
@@ -123,7 +124,13 @@
          (fn []
            (st/emit! (dch/update-shapes ids
                                         (fn [shape]
-                                          (assoc shape :exports []))))))]
+                                          (assoc shape :exports []))))))
+        manage-key-down 
+        (mf/use-callback
+         (fn [event]
+           (let [esc?   (kbd/esc? event)]
+             (when esc?
+               (dom/blur! (dom/get-target event))))))]
 
     [:div.element-set.exports-options
      [:div.element-set-title
@@ -156,7 +163,8 @@
               [:option {:value "6"} "6x"]])
            [:input.input-text {:value (:suffix export)
                                :placeholder (tr "workspace.options.export.suffix")
-                               :on-change (partial on-suffix-change index)}]
+                               :on-change (partial on-suffix-change index)
+                               :on-key-down manage-key-down}]
            [:select.input-select {:value (name (:type export))
                                   :on-change (partial on-type-change index)}
             [:option {:value "png"} "PNG"]