From 12d10d43551df544dd9eac4b2e3c1979af811819 Mon Sep 17 00:00:00 2001
From: Alessio <me@playfulpachyderm.com>
Date: Sat, 2 Mar 2024 13:39:25 -0800
Subject: [PATCH] Make 'show more' button look nicer

---
 internal/webserver/static/styles.css           | 18 ++++++++++++++++--
 .../tpl/tweet_page_includes/timeline.tpl       | 10 ++--------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/internal/webserver/static/styles.css b/internal/webserver/static/styles.css
index 8c5fdf7..3ebf10d 100644
--- a/internal/webserver/static/styles.css
+++ b/internal/webserver/static/styles.css
@@ -2,6 +2,7 @@
     --color-twitter-text-gray: #536171;
     --color-twitter-blue: #1b95e0;  /* hsl(203, 78%, 49%) */
     --color-twitter-blue-light: #7cc5f6; /* hsl(204, 87%, 73%) */
+    --color-twitter-blue-extra-light: hsl(204, 95%, 92%);
     --color-twitter-off-white: #f7f9f9; /* hsl(180, 14%, 97%) */
     --color-twitter-off-white-dark: #dae5e5; /* hsl(180, 17%, 88%) */
     --color-outline-gray: #dcdcdc;
@@ -450,12 +451,25 @@ ul.quick-links {
     /* not for nested (i.e., quoted) tweets */
     border-bottom: 1px solid var(--color-twitter-off-white-dark);
 }
-.timeline .eof-indicator {
+
+.timeline .timeline-bottom-container {
     text-align: center;
-    color: var(--color-twitter-text-gray);
     font-size: 1.2em;
     padding: 1em 0;
 }
+.timeline .timeline-bottom-container .eof-indicator {
+    color: var(--color-twitter-text-gray);
+}
+.timeline .timeline-bottom-container .show-more {
+    padding: 0em 0.8em;
+    display: inline-block;
+    border: 2px solid var(--color-twitter-blue);
+    color: var(--color-twitter-text-gray);
+    font-size: 0.9em;
+}
+.timeline .timeline-bottom-container .show-more:not(:hover):not(:active) {
+    background-color: var(--color-twitter-blue-extra-light);
+}
 
 .top-bar {
     display: flex;
diff --git a/internal/webserver/tpl/tweet_page_includes/timeline.tpl b/internal/webserver/tpl/tweet_page_includes/timeline.tpl
index 98ea437..30e6d11 100644
--- a/internal/webserver/tpl/tweet_page_includes/timeline.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/timeline.tpl
@@ -2,12 +2,6 @@
   {{range .Items}}
     {{template "tweet" .}}
   {{end}}
-  {{if .CursorBottom.CursorPosition.IsEnd}}
-    <div class="eof-indicator">End of feed</div>
-  {{else}}
-    <button class="show-more"
-      hx-get="?{{(cursor_to_query_params .CursorBottom)}}"
-      hx-swap="outerHTML"
-    >Show more</button>
-  {{end}}
+
+  {{template "timeline-bottom" .CursorBottom}}
 {{end}}