From 39426da00e0667d3d1eb60a041ca298c7826a86b Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Mon, 2 Dec 2024 14:46:01 +1000
Subject: [PATCH] [frontend/components] Reaction title, consistent custom
 emoji, fixed gaps, and translucent reacted background color

---
 Iceshrimp.Frontend/Components/Note/NoteFooter.razor.css   | 4 ++++
 Iceshrimp.Frontend/Components/Note/NoteReaction.razor     | 2 +-
 Iceshrimp.Frontend/Components/Note/NoteReaction.razor.css | 8 +++++---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/Note/NoteFooter.razor.css b/Iceshrimp.Frontend/Components/Note/NoteFooter.razor.css
index 4aee5ba5..3adbb498 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteFooter.razor.css
+++ b/Iceshrimp.Frontend/Components/Note/NoteFooter.razor.css
@@ -3,6 +3,10 @@
 }
 
 .reactions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
     margin-bottom: 0.5em;
 }
 
diff --git a/Iceshrimp.Frontend/Components/Note/NoteReaction.razor b/Iceshrimp.Frontend/Components/Note/NoteReaction.razor
index 955cd059..0aa8156b 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteReaction.razor
+++ b/Iceshrimp.Frontend/Components/Note/NoteReaction.razor
@@ -1,5 +1,5 @@
 @using Iceshrimp.Shared.Schemas.Web
-<button @onclick="React" class="reaction @(Reaction.Reacted ? "reacted" : "")">
+<button @onclick="React" class="reaction @(Reaction.Reacted ? "reacted" : "")" title="@Reaction.Name">
     <span class="icon">
         @if (Reaction.Url == null)
         {
diff --git a/Iceshrimp.Frontend/Components/Note/NoteReaction.razor.css b/Iceshrimp.Frontend/Components/Note/NoteReaction.razor.css
index fb94e806..e45d3215 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteReaction.razor.css
+++ b/Iceshrimp.Frontend/Components/Note/NoteReaction.razor.css
@@ -3,13 +3,12 @@
     align-items: center;
     line-height: 1;
     padding: 0.2em 0.5em;
-    margin-right: 0.5em;
     border-radius: 0.5em;
     border: 0.1em solid var(--notice-color);
 }
 
 .reacted {
-    background-color: var(--notice-color);
+    background-color: color-mix(in srgb, var(--notice-color) 30%, transparent);
     color: var(--foreground-color);
 }
 
@@ -18,7 +17,10 @@
 }
 
 .custom-reaction {
-    width: 1em;
+    display: inline-block;
+    height: 1em;
+    width: auto;
+    vertical-align: -0.1em;
 }
 
 .icon {