From deadd31b6b2d0792e5d63f0b86e7baa6330f97cb Mon Sep 17 00:00:00 2001
From: invakid404 <invakid404@riseup.net>
Date: Sat, 16 Apr 2022 20:58:00 +0300
Subject: [PATCH] feat: ui/ux approvements

---
 dashboard/src/components/Card.svelte | 14 +++++---------
 dashboard/src/routes/index.svelte    | 21 ++++++++++++++++++---
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/dashboard/src/components/Card.svelte b/dashboard/src/components/Card.svelte
index 0142f57..e5b0175 100644
--- a/dashboard/src/components/Card.svelte
+++ b/dashboard/src/components/Card.svelte
@@ -9,7 +9,7 @@
       <div class="avatar">
         <img class="avatar" src={avatar} alt={username} />
       </div>
-      <h2 class="card-title">{username.split('#')[0]}</h2>
+      <h2 class="card-title">{username}</h2>
       <div class="card-count">{count}</div>
     </div>
   {/each}
@@ -20,6 +20,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    gap: 2em;
     align-items: center;
     margin: 0 auto;
     width: 100%;
@@ -35,24 +36,19 @@
     position: relative;
     padding: 1rem;
     height: 100%;
-    width: 30%;
+    flex-basis: 30%;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 
-  .card-count::before {
-    content: 'Kek count: ';
-    display: inline-block;
-    font-weight: 500;
-  }
-
   .card-count {
     font-size: 1.2rem;
-    font-weight: 700;
+    font-weight: 300;
 
     width: fit-content;
     margin: 0 auto auto;
+    text-align: center;
   }
 
   .crown-0 {
diff --git a/dashboard/src/routes/index.svelte b/dashboard/src/routes/index.svelte
index bd69e48..dff51ae 100644
--- a/dashboard/src/routes/index.svelte
+++ b/dashboard/src/routes/index.svelte
@@ -39,12 +39,27 @@
   <title>kekboard</title>
 </svelte:head>
 <Header />
-<div class="top-scores">
-  <Card data={topScorers} />
+
+<div class="container">
+  <div class="wrapper">
+    <div class="top-scores">
+      <Card data={topScorers} />
+    </div>
+    <DataTable {headers} {rows} />
+  </div>
 </div>
-<DataTable {headers} {rows} />
 
 <style>
+  .container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .wrapper {
+    width: min(100%, 50rem);
+  }
+
   .top-scores {
     margin-top: 2rem;
     margin-bottom: 2rem;