From a5bdce4ea62c75a03a473202e64720534e4a9ada Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Sun, 6 Oct 2024 20:42:35 -0400
Subject: [PATCH] make the doc footer buttons look better

Took 8 minutes
---
 src/components/docs-footer.tsx     | 23 ++++++++++++++++-------
 src/components/sidebar/sidebar.tsx |  2 +-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/docs-footer.tsx b/src/components/docs-footer.tsx
index 2145d7f..960071e 100644
--- a/src/components/docs-footer.tsx
+++ b/src/components/docs-footer.tsx
@@ -22,27 +22,36 @@ const DocsFooter = ({
         current < pages.length - 1 ? pages[current + 1] : undefined;
 
     return (
-        <footer className="xs:mx-5 sm:mx-10 my-5 flex flex-col select-none transition-all transform-gpu">
+        <footer className="xs:mx-5 sm:mx-10 my-2 flex flex-col select-none transition-all transform-gpu">
             <Separator className="mb-4" />
             <div className="flex justify-between">
+                {/* Previous */}
                 {previous && (
                     <Link
-                        className="flex gap-2 items-center hover:opacity-75 transition-all transform-gpu group"
+                        className="flex gap-2 items-end hover:opacity-75 transition-all transform-gpu group"
                         href={`/${previous.slug}` || "#"}
                         draggable={false}
                     >
-                        <ChevronLeftIcon className="w-4 h-4 group-hover:-translate-x-0.5 transition-all transform-gpu" />
-                        {previous.title}
+                        <ChevronLeftIcon className="pb-1 w-4 h-4 group-hover:-translate-x-0.5 transition-all transform-gpu" />
+                        <div className="flex flex-col">
+                            <h1 className="text-sm opacity-75">Previous</h1>
+                            <p>{previous.title}</p>
+                        </div>
                     </Link>
                 )}
+
+                {/* Next */}
                 {next && (
                     <Link
-                        className="ml-auto flex gap-2 items-center hover:opacity-75 transition-all transform-gpu group"
+                        className="ml-auto flex gap-2 items-end hover:opacity-75 transition-all transform-gpu group"
                         href={`/${next.slug}` || "#"}
                         draggable={false}
                     >
-                        {next.title}
-                        <ChevronRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
+                        <div className="flex flex-col">
+                            <h1 className="text-sm opacity-75">Next</h1>
+                            <p>{next.title}</p>
+                        </div>
+                        <ChevronRightIcon className="pb-1 w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
                     </Link>
                 )}
             </div>
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 101dd8c..1e06f1d 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -22,7 +22,7 @@ const Sidebar = (): ReactElement => (
         </div>
 
         {/* Desktop */}
-        <div className="hidden fixed top-[4.3rem] inset-y-0 min-w-32 w-40 sm:w-52 py-3 xs:flex flex-col justify-between transition-all transform-gpu">
+        <div className="hidden fixed top-[4.3rem] inset-y-0 min-w-32 w-40 sm:w-52 py-5 xs:flex flex-col justify-between transition-all transform-gpu">
             <SidebarContent />
         </div>
     </>