From b62e24b520f72d74dc424539a1ea2d1106636dbc Mon Sep 17 00:00:00 2001
From: Jeder <jeder+git@jeder.pl>
Date: Fri, 18 Oct 2024 03:15:01 +0200
Subject: [PATCH] [frontend/components] Update Profile view styling and layout

---
 .../Components/FollowButton.razor             | 28 +++++++++++-------
 .../Components/FollowButton.razor.css         | 24 +++++++++++++--
 .../Components/ProfileInfo.razor              | 12 ++++----
 .../Components/ProfileInfo.razor.css          | 29 ++++++++++++++++++-
 .../Components/ProfileInfoField.razor         |  2 +-
 .../Components/ProfileInfoField.razor.css     |  7 -----
 .../Pages/ProfileView.razor.css               |  8 +++--
 7 files changed, 79 insertions(+), 31 deletions(-)
 delete mode 100644 Iceshrimp.Frontend/Components/ProfileInfoField.razor.css

diff --git a/Iceshrimp.Frontend/Components/FollowButton.razor b/Iceshrimp.Frontend/Components/FollowButton.razor
index f5fdb044..3ba6f7be 100644
--- a/Iceshrimp.Frontend/Components/FollowButton.razor
+++ b/Iceshrimp.Frontend/Components/FollowButton.razor
@@ -6,27 +6,33 @@
 @inject IStringLocalizer<Localization> Loc;
 @inject ApiService                     Api;
 <span class="follow-button">
-    <button @onclick="Action" class="btn">
-        @switch (_buttonType)
+    @switch (_buttonType)
         {
             case ButtonType.Follow:
-                <span class="text">@Loc["Follow"]</span>
-                <Icon Name="Icons.Plus" class="icon"/>
+                <button @onclick="Action" class="btn">
+                    <span class="text">@Loc["Follow"]</span>
+                    <Icon Name="Icons.Plus" class="icon"/>
+                </button>
                 break;
             case ButtonType.Unfollow:
-                <span class="text">@Loc["Unfollow"]</span>
-                <Icon Name="Icons.Minus" class="icon"/>
+                <button @onclick="Action" class="btn inverted">
+                    <span class="text">@Loc["Unfollow"]</span>
+                    <Icon Name="Icons.Minus" class="icon"/>
+                </button>
                 break;
             case ButtonType.FollowBack:
-                <span class="text">@Loc["Follow back"]</span>
-                <Icon Name="Icons.Plus" class="icon"/>
+                <button @onclick="Action" class="btn">
+                    <span class="text">@Loc["Follow back"]</span>
+                    <Icon Name="Icons.Plus" class="icon"/>
+                </button>
                 break;
             case ButtonType.CancelRequest:
-                <span class="text">@Loc["Cancel request"]</span>
-                <Icon Name="Icons.X" class="icon"/>
+                <button @onclick="Action" class="btn inverted">
+                    <span class="text">@Loc["Cancel request"]</span>
+                    <Icon Name="Icons.X" class="icon"/>
+                </button>
                 break;
         }
-    </button>
 </span>
 
 @code {
diff --git a/Iceshrimp.Frontend/Components/FollowButton.razor.css b/Iceshrimp.Frontend/Components/FollowButton.razor.css
index d1243371..f7fed145 100644
--- a/Iceshrimp.Frontend/Components/FollowButton.razor.css
+++ b/Iceshrimp.Frontend/Components/FollowButton.razor.css
@@ -1,9 +1,27 @@
 .btn {
-    border-radius: 1rem;
+    font-weight: 600;
+    display: flex;
+    height: 2.5rem;
+    align-items: center;
+    justify-content: start;
+    border-radius: 1.25rem;
     border: var(--notice-color) solid 0.1rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    padding-inline: 1rem;
+    padding: 1rem;
+    margin-bottom: 0.5rem;
+    margin-inline: 1rem;    
+    > i {
+        padding-left: 0.5rem;
+    }
 }
+.btn:hover {
+    background-color: var(--hover-color);
+}
+.btn.inverted {
+    background-color: var(--notice-color);
+    color: var(--background-color);
+}
+
 .text {
     margin-right: 0.5rem;
 }
diff --git a/Iceshrimp.Frontend/Components/ProfileInfo.razor b/Iceshrimp.Frontend/Components/ProfileInfo.razor
index 8014caff..52e49006 100644
--- a/Iceshrimp.Frontend/Components/ProfileInfo.razor
+++ b/Iceshrimp.Frontend/Components/ProfileInfo.razor
@@ -9,16 +9,16 @@
     <div class="data">
         @if (UserProfile.Location != null)
         {
-            <div class="location">
-                <span class="location-field">@Loc["Location"]</span>
-                <span class="location-data">@UserProfile.Location</span>
+            <div class="location field">
+                <span class="field-name">@Loc["Location"]</span>
+                <span class="field-value">@UserProfile.Location</span>
             </div>
         }
         @if (UserProfile.Birthday != null)
         {
-            <div class="joined">
-                <span class="joined-field">@Loc["Joined on"]</span>
-                <span class="joined-data">@UserProfile.Birthday</span>
+            <div class="birthday field">
+                <span class="field-name">@Loc["Birthday"]</span>
+                <span class="field-value">@UserProfile.Birthday</span>
             </div>
         }
     </div>
diff --git a/Iceshrimp.Frontend/Components/ProfileInfo.razor.css b/Iceshrimp.Frontend/Components/ProfileInfo.razor.css
index d696a83c..e8b3000a 100644
--- a/Iceshrimp.Frontend/Components/ProfileInfo.razor.css
+++ b/Iceshrimp.Frontend/Components/ProfileInfo.razor.css
@@ -1,14 +1,41 @@
 .bio {
-    margin-bottom: 1rem;
+    margin-top: 0.5rem;
+    padding-bottom: 1rem;
     border-bottom: 0.1rem solid var(--highlight-color);
     white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.data {
+    margin: 1rem 0;
 }
 
 .metadata {
     display: flex;
     justify-content: space-evenly;
+    padding-top: 1rem;
+    border-top: 0.1rem solid var(--highlight-color);
+}
+
+::deep {
+    .field {
+        display: flex;
+        margin: 0.2rem 0;
+    
+        .field-name {
+            font-weight: 600;
+            width: 10rem;
+        }
+    }
+}
+
+.fields {
+    margin: 1rem 0;
 }
 
 .section {
     text-align: center;
+    .field-data {
+        font-weight: 600;
+    }
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/ProfileInfoField.razor b/Iceshrimp.Frontend/Components/ProfileInfoField.razor
index ff416c5a..f3d40167 100644
--- a/Iceshrimp.Frontend/Components/ProfileInfoField.razor
+++ b/Iceshrimp.Frontend/Components/ProfileInfoField.razor
@@ -1,5 +1,5 @@
 @using Iceshrimp.Shared.Schemas.Web
-<div class="section">
+<div class="field">
     <span class="field-name">@Field.Name</span>
     <span class="field-value">
         <MfmText Text="@Field.Value"></MfmText>
diff --git a/Iceshrimp.Frontend/Components/ProfileInfoField.razor.css b/Iceshrimp.Frontend/Components/ProfileInfoField.razor.css
deleted file mode 100644
index c2db2511..00000000
--- a/Iceshrimp.Frontend/Components/ProfileInfoField.razor.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.section {
-    display: flex;
-}
-
-.field-name {
-    width: 10rem;
-}
diff --git a/Iceshrimp.Frontend/Pages/ProfileView.razor.css b/Iceshrimp.Frontend/Pages/ProfileView.razor.css
index 3e507694..8348edcd 100644
--- a/Iceshrimp.Frontend/Pages/ProfileView.razor.css
+++ b/Iceshrimp.Frontend/Pages/ProfileView.razor.css
@@ -15,6 +15,7 @@
 
 .name-section {
     margin-left: 1rem;
+    word-break: break-word;
 }
 
 .name {
@@ -27,7 +28,8 @@
 
 .profile-card {
     margin: auto;
-    padding: 1rem;
+    margin-top: 1rem;
+    padding: 1.5rem;
     border-radius: 1rem;
     background-color: var(--foreground-color);
     max-width: 45rem;
@@ -61,5 +63,7 @@
 }
 
 ::deep .end {
-    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
\ No newline at end of file