From d3af198a5047efb22a4bffde786ab8c3e46c9106 Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Fri, 1 Nov 2024 23:51:18 +1000
Subject: [PATCH] [frontend] Add birthday/location field icons and fix mobile
 alignment

---
 .../Components/ProfileInfo.razor              | 23 ++++++++++++-------
 .../Components/ProfileInfo.razor.css          | 10 ++++++++
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/ProfileInfo.razor b/Iceshrimp.Frontend/Components/ProfileInfo.razor
index 6ec3ce41..22a213f0 100644
--- a/Iceshrimp.Frontend/Components/ProfileInfo.razor
+++ b/Iceshrimp.Frontend/Components/ProfileInfo.razor
@@ -1,6 +1,7 @@
 @using Iceshrimp.Frontend.Localization
 @using Iceshrimp.Shared.Schemas.Web
 @using Microsoft.Extensions.Localization
+@using Iceshrimp.Assets.PhosphorIcons
 @inject IStringLocalizer<Localization> Loc;
 <div class="profile-info">
     @if (UserProfile.Bio != null)
@@ -10,20 +11,26 @@
         </div>
     }
     <div class="data">
-        @if (UserProfile.Location != null)
-        {
-            <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="birthday field">
-                <span class="field-name">@Loc["Birthday"]</span>
+                <span class="field-name">
+                    <Icon Name="Icons.Balloon" Size="1.3em"/>
+                    @Loc["Birthday"]
+                </span>
                 <span class="field-value">@UserProfile.Birthday</span>
             </div>
         }
+        @if (UserProfile.Location != null)
+        {
+            <div class="location field">
+                <span class="field-name">
+                    <Icon Name="Icons.MapPin" Size="1.3em"/>
+                    @Loc["Location"]
+                </span>
+                <span class="field-value">@UserProfile.Location</span>
+            </div>
+        }
     </div>
     @if (UserProfile.Fields != null)
     {
diff --git a/Iceshrimp.Frontend/Components/ProfileInfo.razor.css b/Iceshrimp.Frontend/Components/ProfileInfo.razor.css
index e8b3000a..043499f1 100644
--- a/Iceshrimp.Frontend/Components/ProfileInfo.razor.css
+++ b/Iceshrimp.Frontend/Components/ProfileInfo.razor.css
@@ -25,6 +25,10 @@
         .field-name {
             font-weight: 600;
             width: 10rem;
+            
+            .ph {
+                vertical-align: text-bottom;
+            }
         }
     }
 }
@@ -38,4 +42,10 @@
     .field-data {
         font-weight: 600;
     }
+}
+
+@media (max-width: 640px) {
+    ::deep .field {
+        flex-direction: column;
+    }
 }
\ No newline at end of file