From 60c3992a698543148f4256d58ddfb1262a4026ff Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Sat, 29 Mar 2025 12:21:47 +1000
Subject: [PATCH] [frontend/components] Improve ticker appearance

---
 Iceshrimp.Frontend/Components/Note/NoteMetadata.razor     | 4 ++--
 Iceshrimp.Frontend/Components/Note/NoteMetadata.razor.css | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/Note/NoteMetadata.razor b/Iceshrimp.Frontend/Components/Note/NoteMetadata.razor
index 3ff73418..ff667fe4 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteMetadata.razor
+++ b/Iceshrimp.Frontend/Components/Note/NoteMetadata.razor
@@ -34,14 +34,14 @@
             }
         </span>
     </span>
-    <span class="ticker" title="@InstanceName">
+    <span class="ticker"  style="@(InstanceColor != null ? "--color: " + InstanceColor + "CC;" : "")" title="@InstanceName">
         @if (InstanceIcon != null)
         {
             <img class="icon" src="@InstanceIcon" alt="icon"/>
         }
         @if (InstanceName != null)
         {
-            <span class="instance"  style="@(InstanceColor != null ? "--color: " + InstanceColor + ";" : "")">@InstanceName</span>
+            <span class="instance">@InstanceName</span>
         }
     </span>
 </div>
diff --git a/Iceshrimp.Frontend/Components/Note/NoteMetadata.razor.css b/Iceshrimp.Frontend/Components/Note/NoteMetadata.razor.css
index b45a0b4b..6bda6c87 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteMetadata.razor.css
+++ b/Iceshrimp.Frontend/Components/Note/NoteMetadata.razor.css
@@ -31,6 +31,7 @@
 }
 
 .ticker {
+    --color: var(--highlight-color);
     display: inline-flex;
     gap: 0.5em;
     align-items: center;
@@ -38,6 +39,9 @@
     align-self: start;
     /*Margin on the left so non truncated names are aligned to the right*/
     margin-left: auto;
+    padding: 0 0.2rem;
+    background-color: var(--color);
+    border-radius: 4px;
     font-size: 0.9em;
     text-overflow: ellipsis;
     overflow: clip;
@@ -49,8 +53,7 @@
         line-height: 1;
     }
     .instance {
-        --color: var(--font-color);
-        color: var(--color);
+        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
     }
 }