[frontend/components] ProfileView style meta-fields

Iceshrimp.Frontend/Components/ProfileInfo.razor.css

@@ -6,8 +6,11 @@
     word-break: break-word;
 }
 
+.fields,
 .data {
     margin: 1rem 0;
+    background-color: var(--background-color);
+    border-radius: 8px;
 }
 
 .metadata {
@@ -22,6 +25,8 @@
         display: flex;
         column-gap: 0.5rem;
         margin: 0.2rem 0;
+        padding: 11px 16px;
+        border-bottom: solid 2px var(--foreground-color);
 
         .field-name {
             font-weight: 600;
@@ -46,6 +51,7 @@
 
 .section {
     text-align: center;
+
     .field-data {
         font-weight: 600;
     }
@@ -73,6 +79,7 @@
 }
 
 ::deep {
+
     /* For some reason ph-lock aligns differently than the other icons. This fixes that */
     .badge .ph-lock {
         vertical-align: middle;
@@ -93,7 +100,7 @@
     }
 
     ::deep {
-        .field + .field {
+        .field+.field {
             margin-top: 0.5rem;
         }
     }