Add proper profile block on search

TFR/server/static/sass/block.sass

@@ -7,7 +7,7 @@
 
     background-color: rgba($black, 0.5)
     border-radius: 2px
-    border: 1px solid RGBA(var(--white),0.05)
+    border: 1px solid RGBA($white, 0.05)
 
     > h2
         margin: 0 0 0.2rem 0
@@ -28,3 +28,59 @@
         display: flex
         flex-direction: column
         gap: 0.5rem
+
+.account-block
+    margin-bottom: 1rem
+    padding: 1rem
+
+    display: flex
+    flex-direction: row
+    gap: 1rem
+
+    background-color: rgba($black, 0.5)
+    border-radius: 2px
+    border: 1px solid RGBA($white, 0.05)
+
+    > img
+        height: 10rem
+        width: 10rem
+
+        background-color: RGBA($white, 0.02)
+        border: 1px solid RGBA($white, 0.1)
+        border-radius: 2px
+
+        object-fit: cover
+
+    .other
+        width: 100%
+
+        display: flex
+        flex-direction: column
+        justify-content: flex-start
+
+        gap: 0.5rem
+
+        h2
+            margin: 0
+            font-size: 1.3rem
+            color: RGB($white)
+
+        p
+            margin: 0
+            font-size: 1rem
+            color: RGB($white)
+
+        hr
+            margin: 0
+            width: 100%
+            border: 0 solid transparent
+            border-bottom: 1px solid RGBA($white, 0.1)
+
+@media (max-width: 621px)
+	.account-block
+		flex-direction: column
+
+		> img
+            margin: 0 auto
+            width: 15rem
+            height: 15rem

TFR/server/static/sass/profile-settings.sass

@@ -1,7 +1,7 @@
 .profile-settings
     display: flex
     flex-direction: row
-    gap: 0.5rem
+    gap: 1rem
 
     .picture
         margin: 0
@@ -11,6 +11,8 @@
         display: flex
         flex-direction: column
 
+        border: 1px solid RGBA($white, 0.1)
+
         > img
             height: 10rem
             width: 10rem
@@ -70,7 +72,6 @@
 @media (max-width: 621px)
 	.profile-settings
 		flex-direction: column
-		gap: 1rem
 
 		.picture
 			margin: 0 auto

TFR/server/templates/views/scores.html

@@ -37,8 +37,20 @@
 {% endblock %}
 {% block content %}
     {% if user %}
-        <div class="block">
-            <h2 style="margin-bottom: 0;">{{ user.username }}</h2>
+        <div class="account-block">
+            {% if user.picture %}
+                <img src="{{ url_for('api.upload_dir', filename=user.picture) }}" alt="Profile picture">
+            {% else %}
+                <img src="{{ url_for('static', filename='images/pfp.png') }}" alt="Profile picture">
+            {% endif %}
+            <div class="other">
+                <h2>{{ user.username }}</h2>
+                <p>Joined {{ user.joined_at.strftime('%Y-%m-%d') }}</p>
+
+                <hr>
+
+                <p>Best score: {{ scores[0].score | format_result }}</p>
+            </div>
         </div>
     {% endif %}
 
@@ -50,7 +62,6 @@
                     <th>Name</th>
                     <th>Time Set</th>
                     <th>Submitted</th>
-                    <!-- <th>Game</th> -->
                 </tr>
                 {% for score in scores %}
                     <tr>
@@ -72,7 +83,6 @@
 
                         <td>{{ score.score | format_result }}</td>
                         <td>{{ score.scored_at.strftime('%Y-%m-%d') }}</td>
-                        <!-- <td>{{ score.version }}</td> -->
                     </tr>
                 {% endfor %}
             </table>