feat: improve stats UI on user page

client/components/Problem.tsx

@@ -1,4 +1,3 @@
-import { Problem as ProblemModel } from '../../shared/model'
 import { prependBaseUrl } from '../api'
 import { Markdown } from './Markdown'
 

client/pages/UserPage.tsx

@@ -25,15 +25,19 @@ export const UserPage = ({ uid }: RouteProps) => {
             <>
                 <Header />
                 <main class="page-profile">
-                    <div class="subtitle">Statistiche di <a href={prependBaseUrl(`/u/${uid}`)}>@{uid}</a></div>
-                    <ul>
-                        <li>
-                            <div class="info">Soluzioni inviate: {userStats.sentSolutionsCount}</div>
-                        </li>
-                        <li>
-                            <div class="info">Soluzioni corrette: {userStats.correctSolutionsCount}</div>
-                        </li>
-                    </ul>
+                    <div class="subtitle">Profilo di <a href={prependBaseUrl(`/u/${uid}`)}>@{uid}</a></div>
+                    <hr />
+                    <div class="subtitle">Statistiche</div>
+                    <div class="info">
+                        <div>Soluzioni inviate</div>
+                        <div>Soluzioni corrette</div>
+                        <div class="info-box">
+                            {userStats.sentSolutionsCount}
+                        </div>
+                        <div class="info-box">
+                            {userStats.correctSolutionsCount}
+                        </div>
+                    </div>
                     <div class="subtitle">Soluzioni notevoli</div>
                     <div class="solution-list">
                         {sortedSolutions.map(solution => (
@@ -43,5 +47,7 @@ export const UserPage = ({ uid }: RouteProps) => {
                 </main>
             </>
         )
+    } else {
+        return <></>
     }
 }

client/styles/main.scss

@@ -310,6 +310,17 @@ main {
 
     .info {
         font-size: 20px;
+        display: grid;
+        grid-template-columns: auto auto;
+        gap: 1rem;
+    }
+    .info-box {
+        padding: 1rem;
+        font-size: 28px;
+
+        box-shadow: -2px 4px 6px 1px #00000018, 0 0 4px 0px #00000010;
+        border-radius: 0.5rem;
+        background: #ffffff;
     }
 
     .fill-main {