From 631a486e8c98b88ffd66c17b1d1b13019adb93ea Mon Sep 17 00:00:00 2001
From: Phill Pover <phill@anatid.net>
Date: Sat, 5 Apr 2025 09:38:07 +0100
Subject: [PATCH] Changing album layout to table

---
 frontend/src/app/album/page.tsx               | 35 ++++++++++++++-----
 .../components/navigation/navbar/button.tsx   |  2 +-
 .../components/navigation/navbar/index.tsx    |  8 ++---
 .../app/components/navigation/navbar/logo.tsx |  4 +--
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/album/page.tsx b/frontend/src/app/album/page.tsx
index 59d1858..a751e8c 100644
--- a/frontend/src/app/album/page.tsx
+++ b/frontend/src/app/album/page.tsx
@@ -33,17 +33,34 @@ export default function Page() {
 
   return (
     <div className="container">
-      <ul>
+      <table className="u-full-width">
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Artist</th>
+            <th>Genre</th>
+          </tr>
+        </thead>
+        <tbody>
         {albums.map((album: Album) => (
-          <li key={album.id}>
-            <Link
-              href={{
-                pathname: `/album/${album.id}`
-              }}
-            >{album.title}
-            </Link> by {album.artist} ({album.genre})</li>
+          <tr key={album.id}>
+            <td>
+              <Link
+                href={{
+                  pathname: `/album/${album.id}`
+                }}>{album.title}
+              </Link>
+            </td>
+            <td>
+              {album.artist}
+            </td>
+            <td>
+              {album.genre})
+            </td>
+          </tr>
         ))}
-      </ul>
+        </tbody>
+      </table>
       <form onSubmit={onSubmit}>
         <span>Album Title</span><input type="text" name="title" /><br/>
         <span>Artist</span><input type="text" name="artist" /><br/>
diff --git a/frontend/src/app/components/navigation/navbar/button.tsx b/frontend/src/app/components/navigation/navbar/button.tsx
index a2a7866..f16c599 100644
--- a/frontend/src/app/components/navigation/navbar/button.tsx
+++ b/frontend/src/app/components/navigation/navbar/button.tsx
@@ -1,6 +1,6 @@
 const Button = () => {
   return (
-    <button className="h-12 rounded-lg bg-white font-bold px-5">Sign In</button>
+    <button className="button-primary">Sign In</button>
   );
 };
 export default Button;
diff --git a/frontend/src/app/components/navigation/navbar/index.tsx b/frontend/src/app/components/navigation/navbar/index.tsx
index 4b03bcc..b209dd6 100644
--- a/frontend/src/app/components/navigation/navbar/index.tsx
+++ b/frontend/src/app/components/navigation/navbar/index.tsx
@@ -6,13 +6,13 @@ import Button from "./button";
 const Navbar = () => {
   return (
     <nav className="navbar">
-      <div className="w-full h-20 bg-emerald-800 sticky top-0">
+      <div className="container">
         <div className="container mx-auto px-4 h-full">
           <div className="flex justify-between items-center h-full">
             <Logo />
-            <ul className="hidden md:flex gap-x-6 text-white ">
-              <li>
-                <Link href="/album">
+            <ul className="navbar-list">
+              <li className="navbar-item">
+                <Link href="/album" className="navbar-link">
                   <p>Albums</p>
                 </Link>
               </li>
diff --git a/frontend/src/app/components/navigation/navbar/logo.tsx b/frontend/src/app/components/navigation/navbar/logo.tsx
index 760c2b0..de7fbf0 100644
--- a/frontend/src/app/components/navigation/navbar/logo.tsx
+++ b/frontend/src/app/components/navigation/navbar/logo.tsx
@@ -37,8 +37,8 @@ const Logo = () => {
         <Image
           src="/images/logo.jpg"
           alt="Logo"
-          width={width < 1024 ? "150" : "250"}
-          height={width < 1024 ? "150" : "250"}
+          width={width < 1024 ? "50" : "120"}
+          height={width < 1024 ? "50" : "120"}
           className="relative"
         />
       </Link>