From d4b02e36a7a2df514acb9926925f96895c4223c0 Mon Sep 17 00:00:00 2001
From: elhombretecla <delacruzgarciajuan@gmail.com>
Date: Thu, 3 Jun 2021 18:35:01 +0200
Subject: [PATCH] :lipstick: Change shadow options css

---
 .../partials/sidebar-element-options.scss     | 22 +++++++++--
 .../sidebar/options/menus/shadow.cljs         | 39 ++++++++++++-------
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index af2a9d22a..446a97c62 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -816,13 +816,13 @@
 
 .advanced-options-wrapper {
   width: 100%;
-  padding-left: 0.25rem;
 }
 
 .advanced-options {
-  background-color: #303236;
+  border: 1px solid $color-gray-60;
+  background-color: $color-gray-50;
   border-radius: 4px;
-  padding: 0.5rem;
+  padding: 8px 3px;
   position: relative;
   top: 2px;
   width: 100%;
@@ -897,6 +897,22 @@
   .download-button {
     margin-top: 10px;
   }
+
+  .input-element {
+    width: 100%;
+    flex-shrink: initial;
+  }
+
+  .row-grid-2 {
+    grid-column-gap: 1em;
+  }
+
+  .color-info {
+    input {
+      margin-right: 1em;
+      width: 74px;
+    }
+  }
 }
 
 .shadow-options .color-row-wrap {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
index 0f84e67c6..edb662256 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
@@ -104,19 +104,27 @@
        {:on-click #(reset! open-shadow true)}
        i/actions]
 
-      [:> numeric-input {:ref basic-offset-x-ref
-                         :on-change (update-attr index :offset-x valid-number?)
-                         :on-click (select-text basic-offset-x-ref)
-                         :value (:offset-x value)}]
-      [:> numeric-input {:ref basic-offset-y-ref
-                         :on-change (update-attr index :offset-y valid-number?)
-                         :on-click (select-text basic-offset-y-ref)
-                         :value (:offset-y value)}]
-      [:> numeric-input {:ref basic-blur-ref
-                         :on-click (select-text basic-blur-ref)
-                         :on-change (update-attr index :blur valid-number?)
-                         :min 0
-                         :value (:blur value)}]           
+      ;; [:> numeric-input {:ref basic-offset-x-ref
+      ;;                    :on-change (update-attr index :offset-x valid-number?)
+      ;;                    :on-click (select-text basic-offset-x-ref)
+      ;;                    :value (:offset-x value)}]
+      ;; [:> numeric-input {:ref basic-offset-y-ref
+      ;;                    :on-change (update-attr index :offset-y valid-number?)
+      ;;                    :on-click (select-text basic-offset-y-ref)
+      ;;                    :value (:offset-y value)}]
+      ;; [:> numeric-input {:ref basic-blur-ref
+      ;;                    :on-click (select-text basic-blur-ref)
+      ;;                    :on-change (update-attr index :blur valid-number?)
+      ;;                    :min 0
+      ;;                    :value (:blur value)}]
+
+      [:select.input-select
+        {:default-value (str (:style value))
+         :on-change (fn [event]
+                      (let [value (-> event dom/get-target dom/get-value d/read-string)]
+                        (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
+        [:option {:value ":drop-shadow"} (t locale "workspace.options.shadow-options.drop-shadow")]
+        [:option {:value ":inner-shadow"} (t locale "workspace.options.shadow-options.inner-shadow")]]
 
       [:div.element-set-actions
        [:div.element-set-actions-button {:on-click (toggle-visibility index)}
@@ -126,7 +134,10 @@
 
      [:& advanced-options {:visible? @open-shadow
                            :on-close #(reset! open-shadow false)}
-      [:div.row-grid-2
+      [:div.color-data
+       [:div.element-set-actions-button
+        {:on-click #(reset! open-shadow false)}
+        i/actions]
        [:select.input-select
         {:default-value (str (:style value))
          :on-change (fn [event]