From c2fa48f51ddc38dec84426e257bb87d2fa3ab809 Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Mon, 24 Mar 2025 01:03:57 +1000
Subject: [PATCH] [frontend/components] Add reusable warning banner

---
 Iceshrimp.Frontend/Components/RemoteUserBanner.razor     | 4 ++--
 Iceshrimp.Frontend/Components/RemoteUserBanner.razor.css | 6 +-----
 Iceshrimp.Frontend/Components/WarningBanner.razor        | 7 +++++++
 Iceshrimp.Frontend/Components/WarningBanner.razor.css    | 7 +++++++
 4 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 Iceshrimp.Frontend/Components/WarningBanner.razor
 create mode 100644 Iceshrimp.Frontend/Components/WarningBanner.razor.css

diff --git a/Iceshrimp.Frontend/Components/RemoteUserBanner.razor b/Iceshrimp.Frontend/Components/RemoteUserBanner.razor
index cee7db4a..86d48b3b 100644
--- a/Iceshrimp.Frontend/Components/RemoteUserBanner.razor
+++ b/Iceshrimp.Frontend/Components/RemoteUserBanner.razor
@@ -3,10 +3,10 @@
 @inject IStringLocalizer<Localization> Loc;
 
 <div class="remote-user-notice">
-    <span>
+    <WarningBanner>
         @Loc["Information from remote users may be incomplete."]
         <a href="@OriginalPageUrl" target="_blank">@Loc["Open original page"]</a>
-    </span>
+    </WarningBanner>
 </div>
 
 @code {
diff --git a/Iceshrimp.Frontend/Components/RemoteUserBanner.razor.css b/Iceshrimp.Frontend/Components/RemoteUserBanner.razor.css
index 0263a88b..c82050c5 100644
--- a/Iceshrimp.Frontend/Components/RemoteUserBanner.razor.css
+++ b/Iceshrimp.Frontend/Components/RemoteUserBanner.razor.css
@@ -1,8 +1,4 @@
 .remote-user-notice {
     max-width: 45rem;
-    padding: 0.5rem 1rem;
-    margin: 1rem auto auto;
-    border: 1px solid var(--warning-color);
-    color: var(--warning-color);
-    border-radius: 0.5rem;
+    margin: 0 auto auto;
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/WarningBanner.razor b/Iceshrimp.Frontend/Components/WarningBanner.razor
new file mode 100644
index 00000000..4230071c
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/WarningBanner.razor
@@ -0,0 +1,7 @@
+<div class="warning-banner">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/WarningBanner.razor.css b/Iceshrimp.Frontend/Components/WarningBanner.razor.css
new file mode 100644
index 00000000..02c808ea
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/WarningBanner.razor.css
@@ -0,0 +1,7 @@
+.warning-banner {
+    padding: 0.5rem 1rem;
+    margin: 1rem auto auto;
+    border: 1px solid var(--warning-color);
+    color: var(--warning-color);
+    border-radius: 0.5rem;
+}
\ No newline at end of file