💄 Style changes to the plugins modal

frontend/resources/images/icons/rocket.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="m10.165 3.902.117 8.274c.018 1.266-1.134 2.005-2.182 2.02-1.102.015-2.218-.59-2.238-1.957l-.116-8.275L7.9.031s1.823 2.992 2.265 3.871Z"/><circle cx="8" cy="5.604" r=".753"/><path d="M6.109 8.064c-3.276 2.163-3.18 4.351-3.18 7.936l3.121-3.934"/><path d="M9.891 8.064c3.276 2.163 3.18 4.351 3.18 7.936L9.95 12.066"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="1144 208 15 15"><path d="M1158.53 208a.394.394 0 0 0-.103.015l-4.067 1.047a.46.46 0 0 0-.211.122l-3.149 3.174c-1.771-.333-2.884-.368-3.862.033-1.021.417-1.781 1.237-3.006 2.473-.27.274-.1.736.283.773l3.437.346c-.07.271-.089.546-.055.809.081.634.412 1.201.857 1.636a2.81 2.81 0 0 0 1.675.791c.26.026.53.006.795-.058l.395 3.433a.46.46 0 0 0 .786.267c1.225-1.236 2.039-1.996 2.446-3.015.391-.977.339-2.082-.023-3.839l3.143-3.17a.46.46 0 0 0 .115-.179 70.578 70.578 0 0 0 1.004-4.106.458.458 0 0 0-.46-.552Zm-.602 1.086c-.175.641-.582 2.387-.792 3.19l-5.584 5.638c-.336.338-.72.437-1.129.396a1.952 1.952 0 0 1-1.123-.531c-.322-.315-.543-.719-.592-1.101-.049-.383.042-.749.423-1.134l5.58-5.631Zm-3.169 2.396a.746.746 0 0 0-.467.216.727.727 0 0 0 .009 1.035.74.74 0 0 0 1.041-.007.729.729 0 0 0-.007-1.035.744.744 0 0 0-.576-.209Zm-5.9 1.528c.38.007.825.053 1.358.137l-1.742 1.756a2.557 2.557 0 0 0-.186.209l-2.711-.273c.688-.668 1.365-1.386 1.907-1.608.382-.156.81-.231 1.374-.221Zm5.085 3.787c.23 1.309.209 2.072-.047 2.71-.215.539-.927 1.226-1.588 1.917l-.31-2.687c.071-.056.139-.118.205-.185Zm-7.45 2.122a.46.46 0 0 0-.325.132l-.982.969a.454.454 0 0 0 0 .645c.179.178.47.178.649 0l.978-.965a.454.454 0 0 0-.32-.781Zm1.256 1.237a.461.461 0 0 0-.326.132l-.979.969a.454.454 0 0 0-.004.645.461.461 0 0 0 .649.004l.979-.969a.454.454 0 0 0-.319-.781Z"/></svg>

frontend/src/app/main/ui/workspace/plugins.cljs

@@ -9,6 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.uuid :as uuid]
    [app.main.data.modal :as modal]
    [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.components.title-bar :refer [title-bar]]
@@ -70,15 +71,16 @@
     (.setItem ls "plugins" plugins-val)))
 
 (defn open-plugin!
-  [{:keys [name description host code icon permissions]}]
+  [{:keys [plugin-id name description host code icon permissions]}]
   (.ɵloadPlugin
    js/window #js
-              {:name name
-               :description description
-               :host host
-               :code code
-               :icon icon
-               :permissions (apply array permissions)}))
+   {:pluginId plugin-id
+    :name name
+    :description description
+    :host host
+    :code code
+    :icon icon
+    :permissions (apply array permissions)}))
 
 (mf/defc plugin-management-dialog
   {::mf/register modal/components
@@ -124,10 +126,12 @@
                          icon (obj/get body "icon")
                          permissions (obj/get body "permissions")
                          origin (obj/get (js/URL. plugin-url) "origin")
+                         plugin-id (str (uuid/next))
 
                          new-state
                          (conj plugins-state
-                               {:name name
+                               {:plugin-id plugin-id
+                                :name name
                                 :description desc
                                 :host origin
                                 :code code

frontend/src/app/main/ui/workspace/plugins.scss

@@ -14,8 +14,6 @@
   @extend .modal-container-base;
   display: grid;
   grid-template-rows: auto 1fr;
-  height: $s-472;
-  max-height: $s-472;
   width: $s-472;
   max-width: $s-472;
 
@@ -43,7 +41,7 @@
   display: flex;
   flex-direction: column;
   height: $s-380;
-  padding-bottom: $s-16;
+  max-height: $s-380;
 }
 
 .primary-button {
@@ -133,7 +131,9 @@
   flex-direction: column;
   align-items: center;
   gap: $s-20;
-  margin-top: $s-16;
+  height: 100%;
+  justify-content: center;
+  padding: $s-36 0;
 }
 
 .plugins-empty-logo {
@@ -148,9 +148,8 @@
   svg {
     width: $s-16;
     height: $s-16;
-    fill: none;
-    stroke: $df-secondary;
-    stroke-width: 0.8px;
+    fill: $df-secondary;
+    stroke-width: 0;
   }
 }