From a1c7866f87872e83e7766f76eae443fd5af59fd7 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Mon, 15 Aug 2022 20:46:13 +0200
Subject: [PATCH] styling of next/prev buttons

---
 web/pw-server/src/lib/urls.ts                 |  0
 .../src/routes/bots/[bot_name].svelte         |  7 +--
 web/pw-server/src/routes/bots/new.svelte      |  1 +
 web/pw-server/src/routes/matches/index.svelte | 57 ++++++++++++++-----
 web/pw-server/src/styles/variables.scss       |  3 +
 5 files changed, 49 insertions(+), 19 deletions(-)
 create mode 100644 web/pw-server/src/lib/urls.ts

diff --git a/web/pw-server/src/lib/urls.ts b/web/pw-server/src/lib/urls.ts
new file mode 100644
index 0000000..e69de29
diff --git a/web/pw-server/src/routes/bots/[bot_name].svelte b/web/pw-server/src/routes/bots/[bot_name].svelte
index 3532e38..cf8c42a 100644
--- a/web/pw-server/src/routes/bots/[bot_name].svelte
+++ b/web/pw-server/src/routes/bots/[bot_name].svelte
@@ -118,6 +118,7 @@
 </div>
 
 <style lang="scss">
+  @import "src/styles/variables.scss";
   .container {
     width: 800px;
     max-width: 80%;
@@ -146,18 +147,16 @@
     margin-bottom: $header-space-above-line;
   }
 
-  $borderColor: rgba(27, 31, 36, 0.25);
-
   .btn-container {
     padding: 24px;
     text-align: center;
   }
   .btn-view-more {
-    color: rgb(9, 105, 218);
+    color: $btn-text-color;
     font-size: 14px;
     text-decoration: none;
     padding: 6px 16px;
-    border: 1px solid $borderColor;
+    border: 1px solid $btn-border-color;
     border-radius: 5px;
   }
 
diff --git a/web/pw-server/src/routes/bots/new.svelte b/web/pw-server/src/routes/bots/new.svelte
index 7cb7229..c243fe1 100644
--- a/web/pw-server/src/routes/bots/new.svelte
+++ b/web/pw-server/src/routes/bots/new.svelte
@@ -16,6 +16,7 @@
   async function createBot() {
     saveErrors = [];
 
+    // TODO: how can we handle this with the new ApiClient?
     let response = await fetch("/api/bots", {
       method: "POST",
       headers: {
diff --git a/web/pw-server/src/routes/matches/index.svelte b/web/pw-server/src/routes/matches/index.svelte
index 393d513..8de375b 100644
--- a/web/pw-server/src/routes/matches/index.svelte
+++ b/web/pw-server/src/routes/matches/index.svelte
@@ -70,40 +70,67 @@
     return `?${params}`;
   }
 
-  async function loadNewer() {
+  function olderMatchesLink(matches: object[]): string {
     if (matches.length == 0) {
-      return;
-    }
-    const firstTimestamp = matches[0]["timestamp"];
-    goto(pageLink({ after: firstTimestamp }));
-  }
-
-  async function loadOlder() {
-    if (matches.length == 0) {
-      return;
+      return null;
     }
     const lastTimestamp = matches[matches.length - 1]["timestamp"];
-    goto(pageLink({ before: lastTimestamp }));
+    return pageLink({ before: lastTimestamp });
+  }
+
+  function newerMatchesLink(matches: object[]): string {
+    if (matches.length == 0) {
+      return null;
+    }
+    const firstTimestamp = matches[0]["timestamp"];
+    return pageLink({ after: firstTimestamp });
   }
 </script>
 
 <div class="container">
   <MatchList {matches} />
   <div class="page-controls">
-    <button on:click={loadNewer}>newer</button>
-    <button on:click={loadOlder}>older</button>
+    <div class="btn-group">
+      <a class="btn btn-page-prev" href={newerMatchesLink(matches)}>newer</a>
+      <a class="btn btn-page-next" href={olderMatchesLink(matches)}>older</a>
+    </div>
   </div>
 </div>
 
 <style lang="scss">
+  @import "src/styles/variables.scss";
   .container {
     width: 800px;
     margin: 0 auto;
   }
+  .btn {
+    color: $btn-text-color;
+    font-size: 14px;
+    text-decoration: none;
+    padding: 6px 16px;
+    border: 1px solid $btn-border-color;
+    border-radius: 5px;
+  }
+
+  .btn-group {
+    display: flex;
+  }
+
+  .btn-group .btn:not(:last-child) {
+    border-right: none;
+  }
+
+  .btn-group .btn:first-child {
+    border-radius: 5px 0 0 5px;
+  }
+
+  .btn-group .btn:last-child {
+    border-radius: 0 5px 5px 0;
+  }
 
   .page-controls {
     display: flex;
-    justify-content: space-between;
-    margin: 12px;
+    justify-content: center;
+    margin: 24px 0;
   }
 </style>
diff --git a/web/pw-server/src/styles/variables.scss b/web/pw-server/src/styles/variables.scss
index 257a67e..5ff08b6 100644
--- a/web/pw-server/src/styles/variables.scss
+++ b/web/pw-server/src/styles/variables.scss
@@ -1 +1,4 @@
 $bg-color: rgb(41, 41, 41);
+
+$btn-text-color: rgb(9, 105, 218);
+$btn-border-color: rgba(27, 31, 36, 0.25);