feat: kek header

kachvame · Apr 16, 2022 · 67e0912 · 67e0912
1 parent dead2c1
commit 67e0912
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 175 deletions.
diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -13,6 +13,7 @@
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
   },
   "devDependencies": {
+    "@carbon/colors": "^11.0.0",
     "@sveltejs/adapter-node": "^1.0.0-next.73",
     "@sveltejs/kit": "next",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
@@ -24,11 +25,13 @@
     "eslint-plugin-svelte3": "^3.2.1",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
+    "sass": "^1.50.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.10.1",
     "tslib": "^2.3.1",
     "typescript": "~4.6.2"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {}
 }
diff --git a/dashboard/src/app.html b/dashboard/src/app.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="description" content="" />
-    <link rel="icon" href="%svelte.assets%/favicon.png" />
+    <link rel="icon" href="%svelte.assets%/favicon.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %svelte.head%
   </head>

diff --git a/dashboard/src/components/Header.svelte b/dashboard/src/components/Header.svelte
@@ -0,0 +1,28 @@
+<header class="header">
+  <div class="header-kek">
+    <img src="kek.jpg" class="header-kek" />
+  </div>
+  <h1 class="header-title">kekboard</h1>
+</header>
+
+<style lang="scss">
+  @import '@carbon/colors';
+
+  .header {
+    background-color: $gray-100;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .header-title {
+    text-align: center;
+  }
+
+  .header-kek {
+    text-align: center;
+  }
+
+  .header-kek > img {
+    height: 100px;
+  }
+</style>
diff --git a/dashboard/src/routes/index.svelte b/dashboard/src/routes/index.svelte
@@ -18,6 +18,7 @@
   import 'carbon-components-svelte/css/g90.css';
   import { DataTable } from 'carbon-components-svelte';
   import Card from '../components/Card.svelte';
+  import Header from '../components/Header.svelte';
 
   const headers = [
     {
@@ -34,5 +35,18 @@
   export let topScorers;
 </script>
 
-<Card data={topScorers} />
+<svelte:head>
+  <title>kekboard</title>
+</svelte:head>
+<Header />
+<div class="top-scores">
+  <Card data={topScorers} />
+</div>
 <DataTable {headers} {rows} />
+
+<style>
+  .top-scores {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+</style>
diff --git a/dashboard/static/favicon.jpg b/dashboard/static/favicon.jpg
diff --git a/dashboard/static/favicon.png b/dashboard/static/favicon.png
diff --git a/dashboard/static/kek.jpg b/dashboard/static/kek.jpg