From b434d54d45f1e5e7652be5217a585e49523391fc Mon Sep 17 00:00:00 2001
From: Jeder <jeder+git@jeder.pl>
Date: Sun, 27 Oct 2024 20:09:29 +0100
Subject: [PATCH] [frontend/components] Update reaction styling

---
 .../Components/Note/NoteFooter.razor.css          |  4 ++++
 .../Components/Note/NoteReaction.razor            |  2 +-
 .../Components/Note/NoteReaction.razor.css        | 15 +++++++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/Iceshrimp.Frontend/Components/Note/NoteFooter.razor.css b/Iceshrimp.Frontend/Components/Note/NoteFooter.razor.css
index a1a8593d..409c690a 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteFooter.razor.css
+++ b/Iceshrimp.Frontend/Components/Note/NoteFooter.razor.css
@@ -2,6 +2,10 @@
     margin-top: 0.5em;
 }
 
+.reactions {
+    margin-bottom: 0.5em;
+}
+
 .btn {
     display: inline-flex;
     align-items: center;
diff --git a/Iceshrimp.Frontend/Components/Note/NoteReaction.razor b/Iceshrimp.Frontend/Components/Note/NoteReaction.razor
index 360919ea..955cd059 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">
+<button @onclick="React" class="reaction @(Reaction.Reacted ? "reacted" : "")">
     <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 7173adcb..fb94e806 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteReaction.razor.css
+++ b/Iceshrimp.Frontend/Components/Note/NoteReaction.razor.css
@@ -1,5 +1,20 @@
 .reaction {
+    display: inline-flex;
+    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);
+    color: var(--foreground-color);
+}
+
+.count {
+    margin-left: 0.5em;
 }
 
 .custom-reaction {