Merge pull request #4122 from AlchemyCMS/new-panel-style

New panel style

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -28,10 +28,13 @@
     <span class="label-with-icon license">
       <%= render_icon("certificate-2") %>
       <%= link_to_dialog(
-            license,
-            alchemy.dashboard_license_path,
-            {title: Alchemy.t(:license), size: "600x500"}
-          ) %>
+        license,
+        alchemy.dashboard_license_path,
+        {
+          title: Alchemy.t(:license),
+          size: "620x470"
+        }
+      ) %>
     </span>
   </div>
 </div>

app/assets/builds/alchemy/alchemy_admin.min.js

@@ -263,6 +263,10 @@ export class Dialog {
       e.preventDefault()
       this.close()
     })
+    this.dialog_container.addEventListener("close", (e) => {
+      e.preventDefault()
+      this.close()
+    })
     this.dialog_container.classList.add("closable")
     // Use pointerdown, not click: a click whose mousedown and mouseup land on
     // different nodes is dispatched to their common ancestor — this element for

app/assets/builds/alchemy/alchemy_admin.min.js.map

@@ -152,8 +152,10 @@
   --pagination-disabled-text-color: var(--a-light-grey);
 
   /* Panels */
-  --panel-background-color: var(--a-darker-grey);
+  --panel-background-color: var(--body-background-color);
   --panel-border-color: var(--a-grey);
+  --panel-box-shadow: 0 var(--spacing-0) var(--spacing-2)
+    hsla(0deg, 0%, 0%, 0.5);
 
   --picture-thumbnail-background-color: var(--a-dark-grey);
   --picture-thumbnail-toolbar-bg-color: var(--a-darker-grey);
@@ -428,8 +430,9 @@
   --pagination-disabled-text-color: #c0c0c0;
 
   /* Panels */
-  --panel-background-color: var(--color-grey_light);
-  --panel-border-color: var(--border-color);
+  --panel-background-color: var(--body-background-color);
+  --panel-border-color: var(--color-grey_light);
+  --panel-box-shadow: var(--dashboard-widget-box-shadow);
 
   --picture-tool-background-color: var(--color-white);
   --picture-tool-hover-background-color: var(--color-grey_very_light);

app/assets/builds/alchemy/dark-theme.css

@@ -92,14 +92,13 @@ hr {
 }
 
 .panel {
-  width: 80%;
   max-width: 500px;
-  margin: 2em auto;
+  margin: auto;
   padding: var(--spacing-4);
   background: var(--panel-background-color);
-  border-radius: var(--border-radius_medium);
-  border: var(--border-default);
-  border-color: var(--panel-border-color);
+  border-radius: var(--border-radius_large);
+  border: 1px solid var(--panel-border-color);
+  box-shadow: var(--panel-box-shadow);
 }
 
 .float_right {