Changing album layout to table

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/>

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;

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>

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>