From 7f14b14dc68898a6f38cc65d404bc2cb0f759800 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 12 Aug 2024 14:09:26 -0500
Subject: [PATCH] Style note field

---
 app/views/splats/show.html.erb | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/views/splats/show.html.erb b/app/views/splats/show.html.erb
index 4d43e1716..59e796a96 100644
--- a/app/views/splats/show.html.erb
+++ b/app/views/splats/show.html.erb
@@ -20,12 +20,19 @@
   </nav>
 <% end %>
 
-<div class="splat__perma flex justify-center center">
+<div class="splat__perma flex justify-center center margin-block-end-double">
   <%= render @splat %>
 </div>
 
-<div class="splat__notes txt-align-start panel center borderless margin">
-  <%= simple_format @splat.body %>
+<div class="splat__notes txt-align-start panel center pad-block-half pad-inline-end fill-shade border-radius border margin-block-start-double flex align-start" style="--border-color: <%= @splat.color %>; background-color: <%= @splat.color -%>20">
+  <div class="full-width">
+    <%= simple_format @splat.body %>
+  </div>
+
+  <%= tag.button class: "btn txt-small btn--reversed flex-item-no-shrink", style: "--btn-background: #{ @splat.color }" do %>
+    <%= image_tag "pencil.svg", aria: { hidden: true }, size: 24 %>
+    <span class="for-screen-reader">Edit <%= @splat.title %> notes</span>
+  <% end %>
 </div>
 
 <section class="comments panel center borderless margin">