Move notices to top of page again

We moved it to the bottom because the publish page button
was interfering with the growl messages, but this is too
far away. Leaving them in the center but move them to the
top again and elevate them so they are in the visible
area of sers attention again.

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -7,7 +7,7 @@ function build(message, flashType) {
       ${message}
     </alchemy-message>
   `)
-  flashNotices.prepend(flashMessage)
+  flashNotices.append(flashMessage)
 }
 
 export function growl(message, style = "notice") {

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

@@ -330,7 +330,7 @@
   --dialog-header-color: var(--color-blue_dark);
   --dialog-header-text-color: var(--color-white);
   --dialog-box-shadow: 0 var(--spacing-2) var(--spacing-4)
-    hsla(0deg, 0%, 14%, 0.5);
+    hsla(0deg, 0%, 14%, 0.15);
   --dialog-overlay-color: hsla(0deg, 0%, 39%, 0.4);
   --dialog-background-color: var(--color-grey_very_light);
 

app/assets/builds/alchemy/theme.css

@@ -4,19 +4,20 @@ div#flash_notices {
   transform: translateX(50%);
   z-index: 400000;
   width: 400px;
-  bottom: var(--spacing-2);
+  top: var(--spacing-1);
 
   alchemy-message {
     font-weight: bold;
-    margin: var(--spacing-1) var(--spacing-1) var(--spacing-2);
+    margin: var(--spacing-4) 0;
     opacity: 0.95;
     transition-property: opacity, transform;
-    transition-duration: 0.4s;
+    transition-duration: var(--transition-duration);
+    box-shadow: var(--dialog-box-shadow);
 
     &.dismissed {
       display: block;
       opacity: 0;
-      transform: translate3d(0, 100%, 0);
+      transform: translate3d(0, -100%, 0);
     }
 
     &[type="error"] {