Add newer and older posts buttons

lib/pleroma/web/templates/static_fe/static_fe/profile.html.eex

@@ -64,20 +64,17 @@
     </div>
     <% end %>
   </div>
+  <%= if @prev_page_id do %>
+  <%= link "Show newer", to: "?min_id=" <> @prev_page_id, class: "load-posts" %>
+  <% end %>
   <div class="activity-stream">
     <%= for activity <- @timeline do %>
     <%= render("_notice.html", Map.put(activity, :selected, false)) %>
     <% end %>
-    <p id="pagination">
-      <%= if @prev_page_id do %>
-        <%= link "«", to: "?min_id=" <> @prev_page_id %>
-      <% end %>
-      <%= if @prev_page_id && @next_page_id, do: " | " %>
-      <%= if @next_page_id do %>
-        <%= link "»", to: "?max_id=" <> @next_page_id %>
-      <% end %>
-    </p>
   </div>
+  <%= if @next_page_id do %>
+  <%= link "Show older", to: "?max_id=" <> @next_page_id, class: "load-posts" %>
+  <% end %>
 </div>
 
 <style>

priv/static/static-fe/static-fe.css

@@ -4,7 +4,8 @@ :root {
 	--wallpaper: rgba(11, 16, 23, 1);
     --alertNeutralText: rgba(255, 255, 255, 1);
     --avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7);
-
+	--loadPostsSelected: rgba(23, 34, 46, 1);
+    --loadPostsSelectedText: rgba(185, 185, 186, 1);
     --profileBg: rgba(7, 12, 17, 1);
     --profileTint: rgba(15, 22, 30, 0.5);
     --btnText: rgba(185, 185, 186, 1);
@@ -301,6 +302,7 @@ .button-default {
 
 .button-default:hover {
     box-shadow: var(--btnHoverShadow);
+	cursor: pointer;
 }
 
 .user-bio {
@@ -402,3 +404,18 @@ .user-role {
 .bottom-line {
 	display: flex;
 }
+
+.load-posts {
+	display: block;
+    box-sizing: border-box;
+    height: 3.5em;
+    line-height: 3.5em;
+    padding: 0 1em;
+    width: 100%;
+    text-align: center;
+}
+
+.load-posts:hover {
+	background-color: var(--loadPostsSelected);
+    color: var(--loadPostsSelectedText);
+}