From c43394075a99dc144690fe918eb5ec22c60ae6be Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Fri, 7 Mar 2025 14:34:58 +1000
Subject: [PATCH] [frontend/components] Improve layout styling

---
 .../Layout/MainLayout.razor.css               |  1 +
 .../Layout/ModerationLayout.razor.css         | 10 +--
 .../Pages/Moderation/CustomEmojis.razor       | 68 +++++++++----------
 .../Pages/Moderation/CustomEmojisRemote.razor | 59 ++++++++--------
 4 files changed, 62 insertions(+), 76 deletions(-)

diff --git a/Iceshrimp.Frontend/Layout/MainLayout.razor.css b/Iceshrimp.Frontend/Layout/MainLayout.razor.css
index 7ff4a36f..30ef190f 100644
--- a/Iceshrimp.Frontend/Layout/MainLayout.razor.css
+++ b/Iceshrimp.Frontend/Layout/MainLayout.razor.css
@@ -49,6 +49,7 @@
         margin-right: 0.5rem;
         padding: 0.2rem 0.4rem;
         border-radius: 0.5rem;
+        background-color: var(--foreground-color);
         cursor: pointer;
     }
 }
diff --git a/Iceshrimp.Frontend/Layout/ModerationLayout.razor.css b/Iceshrimp.Frontend/Layout/ModerationLayout.razor.css
index c3b4999a..2fc6732b 100644
--- a/Iceshrimp.Frontend/Layout/ModerationLayout.razor.css
+++ b/Iceshrimp.Frontend/Layout/ModerationLayout.razor.css
@@ -28,16 +28,8 @@
 .body {
     width: 100%;
     height: 100%;
-    padding-right: 2rem;
+    padding-right: 1rem;
     padding-left: 1rem;
-    @media(max-width: 1000px) {
-        padding-left: 1rem;
-        padding-right: 1rem;
-    }
-
-    > .body {
-        max-width: 50rem;
-    }
 }
 
 @media(max-width: 1000px){
diff --git a/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor b/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor
index c3a916a2..a7a11f96 100644
--- a/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor
+++ b/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor
@@ -37,42 +37,40 @@
     }
 </SectionContent>
 
-<div class="body">
-    @if (State is State.Empty or State.Error or State.Loaded)
-    {
-        <div class="emoji-search">
-            <input @bind="EmojiFilter" class="search" type="text" placeholder="@Loc["Name"]" aria-label="search name"/>
-            <button @onclick="FilterEmojis" class="button">@Loc["Search"]</button>
-        </div>
-    }
-    @if (State is State.Loaded)
-    {
-        @foreach (var category in Categories)
-        {
-            <span class="category-name">@category.Key</span>
-            <div class="emoji-list">
-                @foreach (var emoji in category.Value)
-                {
-                    <EmojiManagementEntry Emoji="@emoji" GetEmojis="GetEmojis"/>
-                }
-            </div>
-        }
-    }
-    @if (State is State.Empty)
-    {
-        <i>This instance has no emojis</i>
-    }
-    @if (State is State.Loading)
-    {
-        <div class="loading">
-            <LoadingSpinner Scale="2" />
-        </div>
-    }
-
-    <div class="file-input">
-        <InputFile @ref="UploadInput" OnChange="Upload" accept="image/*">Upload</InputFile>
-        <InputFile @ref="ImportInput" OnChange="Import" accept=".zip">Import</InputFile>
+@if (State is State.Empty or State.Error or State.Loaded)
+{
+    <div class="emoji-search">
+        <input @bind="EmojiFilter" class="search" type="text" placeholder="@Loc["Name"]" aria-label="search name"/>
+        <button @onclick="FilterEmojis" class="button">@Loc["Search"]</button>
     </div>
+}
+@if (State is State.Loaded)
+{
+    @foreach (var category in Categories)
+    {
+        <span class="category-name">@category.Key</span>
+        <div class="emoji-list">
+            @foreach (var emoji in category.Value)
+            {
+                <EmojiManagementEntry Emoji="@emoji" GetEmojis="GetEmojis"/>
+            }
+        </div>
+    }
+}
+@if (State is State.Empty)
+{
+    <i>This instance has no emojis</i>
+}
+@if (State is State.Loading)
+{
+    <div class="loading">
+        <LoadingSpinner Scale="2"/>
+    </div>
+}
+
+<div class="file-input">
+    <InputFile @ref="UploadInput" OnChange="Upload" accept="image/*">Upload</InputFile>
+    <InputFile @ref="ImportInput" OnChange="Import" accept=".zip">Import</InputFile>
 </div>
 
 @code {
diff --git a/Iceshrimp.Frontend/Pages/Moderation/CustomEmojisRemote.razor b/Iceshrimp.Frontend/Pages/Moderation/CustomEmojisRemote.razor
index f29921d2..9fdec028 100644
--- a/Iceshrimp.Frontend/Pages/Moderation/CustomEmojisRemote.razor
+++ b/Iceshrimp.Frontend/Pages/Moderation/CustomEmojisRemote.razor
@@ -11,10 +11,7 @@
 @attribute [Authorize(Roles = "moderator")]
 @layout ModerationLayout
 @inject ApiService                     Api;
-@inject GlobalComponentSvc             Global;
-@inject IJSRuntime                     Js;
 @inject IStringLocalizer<Localization> Loc;
-@inject ILogger<CustomEmojis>          Logger;
 
 <HeadTitle Text="@Loc["Remote Emojis"]"/>
 
@@ -29,39 +26,37 @@
     }
 </SectionContent>
 
-<div class="body">
-    @if (State is State.Empty or State.Error or State.Loaded)
-    {
-        <div class="emoji-search">
-            <input @bind="EmojiFilter" class="search" type="text" placeholder="@Loc["Name"]" aria-label="search name"/>
-            <input @bind="HostFilter" class="search" type="text" placeholder="@Loc["Host"]" aria-label="search host"/>
-            <button @onclick="Search" class="button">@Loc["Search"]</button>
-        </div>
-    }
-    @if (State is State.Loaded)
-    {
-        <div class="emoji-list">
-            @foreach (var emoji in Emojis)
-            {
-                <EmojiManagementEntry Emoji="@emoji" Remote="true"/>
-            }
-        </div>
-        @if (PaginationData is { Next: not null })
+@if (State is State.Empty or State.Error or State.Loaded)
+{
+    <div class="emoji-search">
+        <input @bind="EmojiFilter" class="search" type="text" placeholder="@Loc["Name"]" aria-label="search name"/>
+        <input @bind="HostFilter" class="search" type="text" placeholder="@Loc["Host"]" aria-label="search host"/>
+        <button @onclick="Search" class="button">@Loc["Search"]</button>
+    </div>
+}
+@if (State is State.Loaded)
+{
+    <div class="emoji-list">
+        @foreach (var emoji in Emojis)
         {
-            <ScrollEnd ManualLoad="FetchMore" IntersectionChange="FetchMore"></ScrollEnd>
+            <EmojiManagementEntry Emoji="@emoji" Remote="true"/>
         }
-    }
-    @if (State is State.Empty)
+    </div>
+    @if (PaginationData is { Next: not null })
     {
-        <i>This instance hasn't received remote emojis</i>
+        <ScrollEnd ManualLoad="FetchMore" IntersectionChange="FetchMore"></ScrollEnd>
     }
-    @if (State is State.Loading)
-    {
-        <div class="loading">
-            <LoadingSpinner Scale="2"/>
-        </div>
-    }
-</div>
+}
+@if (State is State.Empty)
+{
+    <i>This instance hasn't received remote emojis</i>
+}
+@if (State is State.Loading)
+{
+    <div class="loading">
+        <LoadingSpinner Scale="2"/>
+    </div>
+}
 
 @code {
     private List<EmojiResponse> Emojis         { get; set; } = [];