From 8bf9ed65a92a1ad9444efe85f149daa4143eaa7a Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Wed, 15 Mar 2023 23:29:16 -0500
Subject: [PATCH] general UI improvements

---
 src/components/Header.tsx        | 14 +++++++++-----
 src/components/ResourceTable.tsx | 27 ++++++++++++++++++---------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index cc4edb3..4bd7427 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -11,10 +11,14 @@ interface NavBarLinkProps {
 
 const NavBarLink = ({href, label, dropdown}: NavBarLinkProps) => {
     return (
-        <li>
-            <Link href={href} className="space-x-[4px] flex flex-row">
-                <span className="font-bold text-lg py-2">{label}</span>
-                {dropdown ? <ChevronDownIcon className="w-4"/> : <></>}
+        <li className="">
+            <Link href={href} className="h-14 block hover:border-b-2 border-neutral-800 box-border">
+                <div className="h-full flex flex-row space-x-[4px]">
+                    <div className="inline-block my-auto">
+                        <span className="inline-block font-bold text-lg py-2 align-text-middle">{label}</span>
+                    </div>
+                    {dropdown ? <ChevronDownIcon className="w-4"/> : <></>}
+                </div>
             </Link>
         </li>
     );
@@ -22,7 +26,7 @@ const NavBarLink = ({href, label, dropdown}: NavBarLinkProps) => {
 
 const NavBar = () => {
     return (
-        <nav className="bg-gradient-to-b from-yellow-500 to-yellow-300 w-full shadow-black drop-shadow-md">
+        <nav className="bg-gradient-to-b from-yellow-400 to-yellow-300 w-full shadow-black drop-shadow-md">
             <li className="mx-auto max-w-5xl flex flex-row sm:justify-between px-4">
                 <ul id="left-nav-links" className="flex flex-row space-x-10">
                     <NavBarLink href='/' label='Home'/>
diff --git a/src/components/ResourceTable.tsx b/src/components/ResourceTable.tsx
index 41b283c..377ebcf 100644
--- a/src/components/ResourceTable.tsx
+++ b/src/components/ResourceTable.tsx
@@ -1,6 +1,6 @@
 import { type PaymentType } from '@prisma/client';
 import { CurrencyDollarIcon, ArrowPathRoundedSquareIcon } from '@heroicons/react/24/solid';
-import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline';
+import { ClipboardDocumentListIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -51,12 +51,21 @@ const ResourceDescription = () => {
 const ResourceSkills = () => {
     const SkillRanking = () => {
         return (
-            <div className='flex flex-row space-x-2'>
-                <div className="rounded-lg px-[1px] border-green-600 border-2 bg-green-300">
-                    <h2 className="text-neutral-900 italic text-sm font-bold text-right">Beginner</h2>
+            <div className='flex flex-row space-x-2 overflow-x-auto'>
+                <div className="rounded-lg px-[3px] border-green-600 border-2 bg-green-300">
+                    <h2 className="text-neutral-900 italic text-sm text-right">Beginner</h2>
                 </div>
-                <div className="rounded-lg px-[1px] border-orange-600 border-2 bg-orange-300">
-                    <h2 className="text-neutral-900 text-sm font-bold italic text-right">Intermediate</h2>
+                <div className="rounded-lg px-[3px] border-orange-600 border-2 bg-orange-300">
+                    <h2 className="text-neutral-900 text-sm italic text-right">Intermediate</h2>
+                </div>
+                <div className="rounded-lg px-[3px] border-orange-600 border-2 bg-orange-300">
+                    <h2 className="text-neutral-900 text-sm italic text-right">Intermediate</h2>
+                </div>
+                <div className="rounded-lg px-[3px] border-orange-600 border-2 bg-orange-300">
+                    <h2 className="text-neutral-900 text-sm italic text-right">Intermediate</h2>
+                </div>
+                <div className="rounded-lg px-[3px] border-orange-600 border-2 bg-orange-300">
+                    <h2 className="text-neutral-900 text-sm italic text-right">Intermediate</h2>
                 </div>
             </div>
         )
@@ -94,7 +103,7 @@ const ResourceTable = () => {
                 <td className="max-w-xs">
                     <ResourceInfo />
                 </td>
-                <td className="align-center">
+                <td className="w-1/4 align-center">
                     <ResourceSkills />
                 </td>
                 <td className="align-top">
@@ -107,7 +116,7 @@ const ResourceTable = () => {
     return(
     <div className="px-4 w-full">
         <div className="mx-auto max-w-6xl rounded-xl overflow-hidden border border-neutral-400">
-            <table className="w-full bg-neutral-200 drop-shadow-md">
+            <table className="w-full table-fixed bg-neutral-200 drop-shadow-md">
                 <thead className="bg-gradient-to-t from-neutral-900 to-neutral-700 rounded-xl overflow-hidden">
                     <tr>
                         <th className="w-1/3 max-w-xs">
@@ -121,7 +130,7 @@ const ResourceTable = () => {
                             </span>
                         </th>
                         <th>
-                            <span className="text-white block px-4 py-2 text-left">
+                            <span className="text-gray-300 block px-4 py-2 text-left">
                                 Description
                             </span>
                         </th>