From c16243df76b2ab1627c91ef95ed23fe9c00dbd9e Mon Sep 17 00:00:00 2001
From: Jorge Vargas <jorgev259@outlook.es>
Date: Thu, 20 Feb 2025 20:02:44 -0600
Subject: [PATCH] General fixes

---
 .vscode/extensions.json                           |  6 ++++--
 src/components/header/Dropdown.astro              |  2 +-
 src/components/header/NavButton.astro             | 10 +++++-----
 src/components/sidebar/CommentCarousel.astro      | 11 ++---------
 src/components/sidebar/CommentCarousel/Looper.tsx |  5 +----
 src/pages/index.astro                             | 15 +++------------
 src/styles/global.css                             | 15 +++++++++++++++
 7 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 3a53a84..294da63 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -4,6 +4,8 @@
     "inlang.vs-code-extension",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "bradlc.vscode-tailwindcss"
+    "bradlc.vscode-tailwindcss",
+    "prisma.prisma",
+    "csstools.postcss"
   ]
-}
\ No newline at end of file
+}
diff --git a/src/components/header/Dropdown.astro b/src/components/header/Dropdown.astro
index 935e219..a08c7f2 100644
--- a/src/components/header/Dropdown.astro
+++ b/src/components/header/Dropdown.astro
@@ -6,7 +6,7 @@ import NavButton from './NavButton.astro'
   <NavButton class='dropdown-btn group relative px-0'>
     <div class='after:content-["▼"] after:text-xs'><slot /></div>
     <div
-      class='dropdown-items md:absolute flex-col bg-gray hidden md:group-hover:flex top-full left-0 py-1 min-w-36 rounded-md md:rounded-t-none mt-1.5 md:mt-0'
+      class='dropdown-items md:absolute flex-col bg-gray hidden md:group-hover:flex top-full left-0 min-w-36 rounded-md md:rounded-t-none mt-1.5 md:mt-0'
     >
       <slot name='items' />
     </div>
diff --git a/src/components/header/NavButton.astro b/src/components/header/NavButton.astro
index 6572750..ede444c 100644
--- a/src/components/header/NavButton.astro
+++ b/src/components/header/NavButton.astro
@@ -5,11 +5,11 @@ import clsx from 'clsx'
 const { class: className } = Astro.props
 ---
 
-<Button
-  className={clsx(
-    'w-full md:w-fit md:h-full bg-dark hover:bg-dark-hover py-3.5 md:py-1 px-2 rounded-none text-left md:text-center',
+<button
+  class:list={[
+    'w-full md:w-fit md:h-full bg-dark hover:bg-gray py-3.5 md:py-1 px-2 rounded-none text-left md:text-center',
     className
-  )}
+  ]}
 >
   <slot />
-</Button>
+</button>
diff --git a/src/components/sidebar/CommentCarousel.astro b/src/components/sidebar/CommentCarousel.astro
index d638047..7ffb15f 100644
--- a/src/components/sidebar/CommentCarousel.astro
+++ b/src/components/sidebar/CommentCarousel.astro
@@ -14,14 +14,7 @@ const comments = await prismaClient.comments.findMany({
 
 <SidebarSection>
   <Looper comments={comments} client:only='react'>
-    <Icon name='arrow-right' slot='arrowRight' class='group-hover:fill-black' height={30} width={15} fill='white' />
-    <Icon
-      name='arrow-right'
-      slot='arrowLeft'
-      class='group-hover:fill-black scale-x-[-1]'
-      height={30}
-      width={15}
-      fill='white'
-    />
+    <Icon name='arrow-right' slot='arrowLeft' class='scale-x-[-1]' height={30} width={15} />
+    <Icon name='arrow-right' slot='arrowRight' height={30} width={15} />
   </Looper>
 </SidebarSection>
diff --git a/src/components/sidebar/CommentCarousel/Looper.tsx b/src/components/sidebar/CommentCarousel/Looper.tsx
index 66ae6f2..e94102a 100644
--- a/src/components/sidebar/CommentCarousel/Looper.tsx
+++ b/src/components/sidebar/CommentCarousel/Looper.tsx
@@ -37,10 +37,7 @@ export default function Looper(props: Props) {
     <div className='text-md/6 font-extralight'>
       <div>{comment.text}</div>
       <div className='mt-1'>
-        -{' '}
-        <a href={`/album/${comment.albums?.id}`} className='hover:text-hover-link hover:underline'>
-          {comment.albums?.title}
-        </a>
+        - <a href={`/album/${comment.albums?.id}`}>{comment.albums?.title}</a>
       </div>
       {isMultiple ? (
         <div className='flex mt-2.5'>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2581b7f..7d00b9a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -32,14 +32,8 @@ const lastAlbums = await prismaClient.albums.findMany({
         }
       </div>
       <div class='flex gap-x-2 py-4'>
-        <button
-          class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-1/2 hover:text-hover-link hover:underline'
-          >{m.moreGameReleases}</button
-        >
-        <button
-          class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-1/2 hover:text-hover-link hover:underline'
-          >{m.moreAnimReleases}</button
-        >
+        <a class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-1/2'>{m.moreGameReleases}</a>
+        <a class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-1/2'>{m.moreAnimReleases}</a>
       </div>
       <hr />
       <h1 class='uppercase font-medium tracking-wide text-5xl drop-shadow-2xl mt-5 mb-2 text-center'>
@@ -53,10 +47,7 @@ const lastAlbums = await prismaClient.albums.findMany({
         }
       </div>
       <div class='flex gap-x-2 py-4'>
-        <button
-          class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-full hover:text-hover-link hover:underline'
-          >{m.moreLastAdded}</button
-        >
+        <a class='bg-dark uppercase rounded-md text-2xl p-1.5 font-semibold w-full'>{m.moreLastAdded}</a>
       </div>
     </div>
     <Sidebar />
diff --git a/src/styles/global.css b/src/styles/global.css
index 2c3a3c9..cae017e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -27,4 +27,19 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
+
+  button,
+  a {
+    cursor: pointer;
+    text-align: center;
+
+    :disabled {
+      cursor: none;
+    }
+  }
+
+  a:hover {
+    color: var(--color-hover-link);
+    text-decoration-line: underline;
+  }
 }