From 6d121fb7b4b2a5630576c5a989525bd38ba23cc3 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Fri, 4 Feb 2022 12:57:11 +0100
Subject: [PATCH] Add styling to the load more button (#16).

---
 source/scss/components/_search-bar.scss | 13 +++++++++++++
 source/ts/components/search-bar.ts      |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/source/scss/components/_search-bar.scss b/source/scss/components/_search-bar.scss
index 1dc3eaf..8602c92 100644
--- a/source/scss/components/_search-bar.scss
+++ b/source/scss/components/_search-bar.scss
@@ -47,4 +47,17 @@
       vertical-align: middle;
     }
   }
+
+  .load-more {
+    background-color: var(--background-1);
+    border: var(--border-size) solid var(--foreground-1);
+    color: var(--foreground-1);
+    cursor: pointer;
+    padding: 0.5rem;
+
+    &:hover {
+      background-color: var(--foreground-1);
+      color: var(--background-1);
+    }
+  }
 }
diff --git a/source/ts/components/search-bar.ts b/source/ts/components/search-bar.ts
index 33a148f..af2bde0 100644
--- a/source/ts/components/search-bar.ts
+++ b/source/ts/components/search-bar.ts
@@ -101,7 +101,7 @@ export default class SearchBar extends Component<Props, State> {
       results.push(
         html`
           <li class="search-state">
-            <button onClick=${this.searchMore}>Load more…</button>
+            <button class="load-more" onClick=${this.searchMore}>Load more…</button>
           </li>
         `,
       );