From 5d7c9a32cad67946af85567b795cb5c815dbdb72 Mon Sep 17 00:00:00 2001
From: Jeder <jeder+git@jeder.pl>
Date: Thu, 24 Oct 2024 21:47:15 +0200
Subject: [PATCH] [frontend/components] Update styling for profile page

---
 .../Pages/Settings/Profile.razor              | 14 ++++----
 .../Pages/Settings/Profile.razor.css          | 32 +++++++------------
 2 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/Iceshrimp.Frontend/Pages/Settings/Profile.razor b/Iceshrimp.Frontend/Pages/Settings/Profile.razor
index 17885cd0..5ae539fa 100644
--- a/Iceshrimp.Frontend/Pages/Settings/Profile.razor
+++ b/Iceshrimp.Frontend/Pages/Settings/Profile.razor
@@ -17,13 +17,13 @@
     @if (State is State.Loaded)
     {
         <div class="section">
-            <span class="title">Profile Description</span><textarea class="input" @bind="@UserProfile.Description"></textarea>
+            <span class="title">@Loc["Profile Description"]</span><textarea class="input" @bind="@UserProfile.Description"></textarea>
         </div>
         <div class="section">
-            <span class="title">Birthday</span><input class="input" @bind="@UserProfile.Birthday"/>
+            <span class="title">@Loc["Birthday"]</span><input class="input" @bind="@UserProfile.Birthday"/>
         </div>
         <div class="section">
-            <span class="title">Location</span><input class="input" @bind="@UserProfile.Location"/>
+            <span class="title">@Loc["Location"]</span><input class="input" @bind="@UserProfile.Location"/>
         </div>
         <div class="user-fields">
             <span class="title">@Loc["Fields"]</span>
@@ -33,7 +33,7 @@
                     <div class="field">
                         <input class="input" @bind="@entry.Name"/>
                         <input class="input" @bind="@entry.Value"/>
-                        <button @onclick="() => DeleteField(entry)">
+                        <button class="button" title="@Loc["Delete Field"]" @onclick="() => DeleteField(entry)">
                             <Icon Name="Icons.Trash"/>
                         </button>
                     </div>
@@ -44,11 +44,13 @@
         <div class="new-field">
             <input class="input" @bind="@FieldName"/>
             <input class="input" @bind="@FieldValue"/>
-            <button @onclick="AddField">@Loc["Add Field"]</button>
+            <button class="button" title="@Loc["Add Field"]" @onclick="AddField">
+                <Icon Name="Icons.Plus"/>
+            </button>
         </div>
 
         <div class="section">
-            <StateButton OnClick="SaveChanges" @ref="SaveButton">
+            <StateButton OnClick="SaveChanges" ExtraClasses="button" @ref="SaveButton">
                 <Initial>
                     <Icon Name="Icons.FloppyDisk"/>@Loc["Save"]
                 </Initial>
diff --git a/Iceshrimp.Frontend/Pages/Settings/Profile.razor.css b/Iceshrimp.Frontend/Pages/Settings/Profile.razor.css
index 3ddddd3b..b72aa576 100644
--- a/Iceshrimp.Frontend/Pages/Settings/Profile.razor.css
+++ b/Iceshrimp.Frontend/Pages/Settings/Profile.razor.css
@@ -1,29 +1,21 @@
-.input {
-    display: block;
-    background-color: var(--foreground-color);
-    border: none;
-    outline: none;
-    width: 100%;
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-    margin: 0.5rem
+.field, .new-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .button {
+        padding: 0.75rem;
+        margin: 0.2rem;
+        i {
+            padding: 0;
+        }
+    }
 }
 
-.body {
-    max-width: 50rem;
-}
-.new-field {
-   display: flex;
-    flex-direction: row;
-}
 .user-fields {
     
 }
 
-.field {
-    display: flex;
-}
-
 .title {
     font-size: 0.9rem;
 }
\ No newline at end of file