From d8c5a43100bab8f44c5d66c5bc06adffba67949e Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Mon, 2 Dec 2024 15:45:47 +1000
Subject: [PATCH] [frontend/components] Use InlineEmoji for reaction
 notifications

---
 .../Components/NotificationComponent.razor    |  4 ++-
 .../NotificationComponent.razor.css           | 25 +++++++++++++------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/NotificationComponent.razor b/Iceshrimp.Frontend/Components/NotificationComponent.razor
index e70733a6..b7f21ca2 100644
--- a/Iceshrimp.Frontend/Components/NotificationComponent.razor
+++ b/Iceshrimp.Frontend/Components/NotificationComponent.razor
@@ -31,7 +31,9 @@
                         <span class="notification-text">@Loc["liked note"]</span> 
                         break; 
                     case { Note: not null, Reaction: not null, Type: "reaction" }:
-                        <img class="notification-reaction" src="@NotificationResponse.Reaction.Url" alt="@NotificationResponse.Reaction.Name.Trim(':')" title="@NotificationResponse.Reaction.Name"/>
+                        <span class="notification-reaction" title="@NotificationResponse.Reaction.Name">
+                            <InlineEmoji Name="@NotificationResponse.Reaction.Name" Url="@NotificationResponse.Reaction.Url"/>
+                        </span>
                         <span class="notification-text">@Loc["reacted to your note"]</span>
                         break;
                     case { Type: "follow", User: not null }:
diff --git a/Iceshrimp.Frontend/Components/NotificationComponent.razor.css b/Iceshrimp.Frontend/Components/NotificationComponent.razor.css
index f06e43b2..1ea0970e 100644
--- a/Iceshrimp.Frontend/Components/NotificationComponent.razor.css
+++ b/Iceshrimp.Frontend/Components/NotificationComponent.razor.css
@@ -36,16 +36,27 @@
     top: 3em;
     left: 3em;
     display: inline-block;
-    width: 1.25em;
-    height: 1.25em;
-    object-fit: contain;
     filter: drop-shadow(0 0 0.2em rgba(0, 0, 0, 0.7));
-    transition-duration: 250ms;
 }
 
-.notification-reaction:hover {
-    transform: scale(1.5);
-    z-index: +1;
+::deep {
+    .notification-reaction .custom-reaction {
+        font-size: 1.25em;
+        transition-duration: 250ms;
+    }
+}
+
+::deep {
+    .notification-reaction .custom-reaction:hover {
+        transform: scale(1.5);
+        z-index: +1;
+    }
+}
+
+::deep {
+    .notification-reaction .unicode-reaction {
+        font-size: 1.25em;
+    }
 }
 
 .notification-text {