From a2b03051622f685c5fde25cd982cc203e34288a0 Mon Sep 17 00:00:00 2001
From: elhombretecla <delacruzgarciajuan@gmail.com>
Date: Mon, 7 Jun 2021 18:14:49 +0200
Subject: [PATCH] :sparkles: Add new text and grid advanced opt css

---
 .../styles/main/partials/colorpicker.scss     |  1 +
 .../partials/sidebar-element-options.scss     | 23 +++++++++++++++----
 .../sidebar/options/menus/frame_grid.cljs     |  2 ++
 .../sidebar/options/menus/typography.cljs     |  4 ++--
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
index 410437ae6e..e0b0ed1788 100644
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ b/frontend/resources/styles/main/partials/colorpicker.scss
@@ -480,6 +480,7 @@
 .color-data {
   align-items: center;
   display: flex;
+  margin-bottom: $small;
   position: relative;
 
   .color-name {
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 31bf7f4ede..efb9c084e1 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -733,6 +733,16 @@
 
 .grid-option {
   margin-bottom: 0.5rem;
+  .advanced-options {
+    .row-flex {
+      justify-content: flex-end;
+    }
+    .custom-button {
+      left: 0;
+      position: absolute;
+      top: 12px;
+    }
+  }
 }
 
 .element-set-content .custom-select.input-option {
@@ -822,7 +832,7 @@
   border: 1px solid $color-gray-60;
   background-color: $color-gray-50;
   border-radius: 4px;
-  padding: 8px 3px;
+  padding: 8px;
   position: relative;
   top: 2px;
   width: 100%;
@@ -936,6 +946,10 @@
     &:hover svg {
         fill: $color-primary;
     }
+    &.actions-inside {
+      position: absolute;
+      right: 0;
+    }
 }
 
 .element-set-label {
@@ -1062,17 +1076,16 @@
     .go-to-lib-button {
         transition: border 0.3s, color 0.3s;
         text-align: center;
-        background: $color-gray-60;
+        background: $color-gray-50;
         padding: 0.5rem;
         border-radius: 2px;
         cursor: pointer;
         font-size: 14px;
         margin-top: 1rem;
-        border: 1px solid $color-gray-60;
 
         &:hover {
-            border: 1px solid $color-primary;
-            color: $color-primary;
+            background: $color-primary;
+            color: $color-black;
         }
     }
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
index 40bbe0a244..f5aaa4524c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
@@ -150,6 +150,8 @@
 
      [:& advanced-options {:visible? (:show-advanced-options @state)
                            :on-close toggle-advanced-options}
+      [:button.custom-button {:class (when (:show-advanced-options @state) "is-active")
+                              :on-click toggle-advanced-options} i/actions]
       (when (= :square type)
         [:& input-row {:label (t locale "workspace.options.grid.params.size")
                        :class "pixels"
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
index 3d6a779291..9c15b74dbc 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
@@ -502,8 +502,8 @@
           [:span.label (tr "workspace.assets.typography.font-id")]
           [:span (:font-id typography)]]
 
-         [:div.element-set-actions-button
-          {:on-click #(reset! open? true)}
+         [:div.element-set-actions-button.actions-inside
+          {:on-click #(reset! open? false)}
           i/actions]
 
          [:div.row-flex