Cleanup theme

web/src/components/Nav.svelte

@@ -5,28 +5,50 @@
 </script>
 
 <style lang="css">
-    .button {
-        @apply .bg-gray-800 .px-2 .py-1 .rounded-sm .font-medium;
+  nav {
+    @apply .w-2/12 .bg-gray-800 .p-2 .rounded-l-sm .overflow-y-auto .flex .flex-col;
+  }
 
-        &:hover {
-            @apply .bg-gray-700;
-        }
+  .user-box {
+    @apply .flex .items-center;
 
-        &[data-active="true"] {
-            @apply .bg-blue-800;
-        }
+    & > img {
+      @apply .w-1/5 .rounded-full;
     }
+
+    & > div {
+      @apply .m-2 .font-bold .text-gray-100;
+    }
+  }
+
+  .button-list {
+    @apply .flex .flex-col .m-2;
+
+    & > h2 {
+      @apply .text-lg .my-1 .text-white .font-bold .uppercase .mt-2;
+    }
+
+    & > a {
+      @apply .bg-gray-800 .px-2 .py-1 .rounded-sm .font-medium;
+
+      &:hover {
+        @apply .bg-gray-700;
+      }
+
+      &[data-active="true"] {
+        @apply .bg-blue-800;
+      }
+    }
+  }
 </style>
 
-<nav
-  class="w-2/12 bg-gray-800 p-2 rounded-l-sm overflow-y-auto flex flex-col"
-  role="navigation">
-  <div class="flex items-center">
-    <img alt="User Avatar" class="w-1/5 rounded-full" src="{$session.user.avatarURL}" />
-    <div class="m-2 font-bold text-gray-100">{$session.user.username}</div>
+<nav role="navigation">
+  <div class="user-box">
+    <img alt="User Avatar" src={$session.user.avatarURL} />
+    <div>{$session.user.username}</div>
   </div>
-  <div class="flex flex-col m-2">
-    <h2 class="text-md my-1 text-white font-bold uppercase mt-2">Features</h2>
-    <a data-active="{segment === 'contest'}" href="dashboard/contest" class="button">Contest</a>
+  <div class="button-list">
+    <h2>Features</h2>
+    <a data-active={segment === 'contest'} href="dashboard/contest">Contest</a>
   </div>
 </nav>

web/src/routes/login/index.svelte

@@ -47,7 +47,7 @@
       <div class="bg-red-800 box-item mb-2">{errorTexts[errorId]}</div>
     {/each}
   {/if}
-  <div class="bg-black box-item shadow-big text-center">
+  <div class="bg-gray-dark box-item shadow-big text-center">
     <h1 class="text-4xl">NoctBot Login</h1>
     <div class="login-button-list">
       <a class="discord-button" href="/login/discord/do">

web/tailwind.config.js

@@ -1,6 +1,10 @@
 module.exports = {
   theme: {
-    extend: {}
+    extend: {
+      colors: {
+        'gray-dark': '#0F131A'
+      }
+    },
   },
   variants: {},
   plugins: []