From abf7f8a22001a24185d5a22b2d25045d270146ae Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 27 Jan 2025 17:11:16 -0600
Subject: [PATCH] Undo weird flash notices

---
 app/assets/stylesheets/flash.css       | 22 +++++++++-------------
 app/views/layouts/application.html.erb |  9 ++-------
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/flash.css b/app/assets/stylesheets/flash.css
index e7523006a..eb2f7be0a 100644
--- a/app/assets/stylesheets/flash.css
+++ b/app/assets/stylesheets/flash.css
@@ -1,23 +1,19 @@
 .flash {
   display: flex;
-  inset-block-start: var(--block-space);
-  inset-inline-start: 50%;
+  inline-size: 100%;
+  inset: var(--block-space) auto auto auto;
   justify-content: center;
   position: fixed;
-  transform: translate(-50%);
   z-index: 6;
 }
 
 .flash__inner {
   animation: appear-then-fade 3s 300ms both;
-  aspect-ratio: 1;
-  background-color: var(--flash-background, var(--color-positive));
-  border-radius: 50%;
-  display: grid;
-  padding: var(--block-space);
-  place-items: center;
-
-  img {
-    grid-area: 1/1;
-  }
+  background-color: var(--flash-background, var(--color-ink));
+  border-radius: 4em;
+  color: var(--flash-color, var(--color-ink-reversed));
+  display: inline-flex;
+  font-size: var(--font-size-medium);
+  margin: 0 auto;
+  padding: 0.7em 1.4em;
 }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 251af449a..dddcfd131 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -27,14 +27,9 @@
 
     <% if notice = flash[:notice] || flash[:alert] %>
       <div class="flash" data-controller="element-removal" data-action="animationend->element-removal#remove">
-        <div class="flash__inner shadow" style="<%= "--flash-background: var(--color-negative)" if flash[:alert] %>">
-          <% if flash[:alert] %>
-            <%= image_tag "alert.svg", aria: { hidden: true }, size: 24, class: "colorize--white" %></span>
-          <% else %>
-            <%= image_tag "check.svg", aria: { hidden: true }, size: 24, class: "colorize--white" %></span>
-          <% end %>
+        <div class="flash__inner shadow">
+          <%= notice %>
         </div>
-        <span class="for-screen-reader" role="alert" aria-atomic="true"><%= notice %></span>
       </div>
     <% end %>