[S] Style UserHome

AquaNet/src/pages/UserHome.svelte

@@ -39,9 +39,11 @@
   {#if d !== null}
     <div class="user-pfp">
       <img src={`${data_host}/maimai/assetbundle/icon/${d.user.iconId.toString().padStart(6, "0")}.png`} alt="" class="pfp">
-      <h1>{d.user.name}</h1>
+      <h2>{d.user.name}</h2>
     </div>
 
+    <div>
+      <h2>Scoring Statistics</h2>
       <div class="scoring-info">
         <div class="chart">
           <div class="info-top">
@@ -108,7 +110,10 @@
           </div>
         </div>
       </div>
+    </div>
 
+    <div>
+      <h2>Play Activity</h2>
       <div class="activity-info">
         <div id="cal-heatmap" bind:this={calElement} />
 
@@ -120,17 +125,17 @@
 
           <div class="time">
             <span>Play Time</span>
-          <span>{d.user.totalPlayTime}</span>
+            <span>{(d.user.totalPlayTime / 60 / 60).toFixed(1)} hr</span>
           </div>
 
           <div class="first-play">
-          <span>Joined</span>
-          <span>{moment(d.user.joined).format("YYYY-MM-DD HH:mm:ss")}</span>
+            <span>First Seen</span>
+            <span>{moment(d.user.joined).format("YYYY-MM-DD")}</span>
           </div>
 
           <div class="last-play">
             <span>Last Seen</span>
-          <span>{moment(d.user.lastSeen).format("YYYY-MM-DD HH:mm:ss")}</span>
+            <span>{moment(d.user.lastSeen).format("YYYY-MM-DD")}</span>
           </div>
 
           <div class="last-version">
@@ -139,7 +144,7 @@
           </div>
         </div>
       </div>
-
+    </div>
   {:else}
     <p>Loading...</p>
   {/if}
@@ -148,11 +153,28 @@
 <style lang="sass">
 @import "../vars"
 
+$gap: 20px
+
 #user-home
   display: flex
   flex-direction: column
-  gap: 20px
-  padding: 0 32px
+  gap: $gap
+  margin: 100px 32px 0
+  padding: 0 32px 32px
+  height: 100%
+
+  background-color: rgba(black, 0.2)
+  border-radius: 16px
+
+  .user-pfp
+    display: flex
+    align-items: flex-end
+    gap: $gap
+    margin-top: -40px
+
+    h2
+      font-size: 2rem
+      margin: 0
 
   .pfp
     width: 100px
@@ -162,7 +184,7 @@
 
   .info-bottom, .info-top, .other-info
     display: flex
-    gap: 20px
+    gap: $gap
 
     > div
       display: flex
@@ -181,25 +203,29 @@
 
   .scoring-info
     display: flex
-    gap: 20px
+    gap: $gap
     max-height: 250px
 
     .chart
-      flex: 1
+      flex: 0 1 790px
       display: flex
       flex-direction: column
 
     .other-info
-      flex: 0 0 100px
+      flex: 1 0 100px
       flex-direction: column
       gap: 0
       justify-content: space-between
 
-
     .trend
       height: 300px
       width: 100%
+      max-width: 790px
 
+  .activity-info
+    display: flex
+    flex-direction: column
+    gap: $gap
 
 
 </style>