Some styling updates

app/components/Button/Button.tsx

@@ -68,23 +68,23 @@ function classNames({
 }): string {
   // Base classes
   let buttonStyles = `${
-    icon ? "rounded-full" : "rounded-md"
+    icon ? "rounded-full" : "rounded-md font-medium"
   } transition-all box-border`;
   // Set classes for different variants
   let variantStyles = "";
   switch (variant) {
     case "primary":
-      variantStyles = "text-white bg-stone-600 hover:opacity-80";
+      variantStyles = "text-white bg-primary-600 hover:opacity-80";
       break;
     case "secondary":
-      variantStyles = "text-stone-700 bg-stone-200 hover:opacity-80";
+      variantStyles = "text-neutral-800 bg-neutral-300 hover:opacity-80";
       break;
     case "outlined":
       variantStyles =
-        "bg-inherit text-stone-800 border-stone-400 border hover:bg-stone-200";
+        "bg-inherit text-primary-500 border-primary-500 border hover:bg-primary-100";
       break;
     case "text":
-      variantStyles = "hover:bg-stone-200 text-stone-700";
+      variantStyles = "hover:bg-neutral-200 text-neutral-700";
       break;
   }
   buttonStyles = append(buttonStyles, variantStyles);

app/components/Dialog/Dialog.tsx

@@ -24,7 +24,7 @@ export const Dialog: React.FC<PropsWithChildren<Props>> = ({
       className="relative z-10"
       data-testid="dialog"
     >
-      <div className="fixed inset-0 bg-stone-900 bg-opacity-25" />
+      <div className="fixed inset-0 bg-neutral-900 bg-opacity-25" />
       <div className="fixed inset-0 overflow-y-auto min-h-screen md:min-h-min">
         <div className="flex h-full justify-center pt-4 md:pb-4 md:px-4 text-center ">
           <HeadlessDialog.Panel className="w-full h-full md:h-auto md:max-w-md transform overflow-hidden rounded-2xl bg-white p-8 text-left align-middle shadow-xl transition-all relative">
@@ -57,13 +57,13 @@ export const Dialog: React.FC<PropsWithChildren<Props>> = ({
             </Button>
             <HeadlessDialog.Title
               as="h2"
-              className="text-3xl font-medium leading-6 text-stone-900"
+              className="text-3xl font-medium leading-6 text-neutral-900"
             >
               {title}
             </HeadlessDialog.Title>
             {description && (
               <div className="mt-2">
-                <p className="text-sm text-stone-500">{description}</p>
+                <p className="text-sm text-neutral-500">{description}</p>
               </div>
             )}
 

app/components/Input/Input.tsx

@@ -8,7 +8,7 @@ export const Input: React.FC<InputHTMLAttributes<HTMLInputElement>> =
         data-testid="input"
         className={[
           !props.hidden && "block",
-          "w-full bg-inherit focus:outline-none placeholder-stone-400",
+          "w-full bg-inherit focus:outline-none placeholder-neutral-400",
           className,
         ].join(" ")}
         {...props}

app/components/MarkingInput/MarkingInput.tsx

@@ -67,7 +67,7 @@ export const MarkingInput: React.FC<Props> = ({ marking, deleteMark }) => {
           style={{
             width: `${mark.length || 1}ch`,
           }}
-          className="font-mono rounded-sm !bg-stone-200 w-auto"
+          className="font-mono rounded-sm !bg-neutral-200 w-auto"
         />
         <Button
           variant="text"

app/components/NavBar/NavBar.tsx

@@ -6,19 +6,42 @@ type Props = {};
 
 export const NavBar: React.FC<Props> = () => {
   return (
-    <nav className="bg-stone-300 py-4 px-2" data-testid="navbar">
-      <div className="flex container max-w-xl mx-auto">
-        <div className="flex-1">PubJam</div>
+    <nav className="bg-neutral-200 py-4 px-2" data-testid="navbar">
+      <div className="flex container max-w-xl mx-auto bg-neutral-50 px-4 py-3 rounded-2xl items-center shadow-md">
+        <div className="flex-1">
+          <div className="flex items-center">
+            <div>
+              <img
+                src="/tune_binder_logo.svg"
+                alt="TuneBunder Logo"
+                className="object-contain w-7"
+              />
+            </div>
+            {/* <div className="flex-1">TuneBinder</div> */}
+          </div>
+        </div>
         <div className="space-x-6">
           <NavLink
             to={"/songs"}
-            className={({ isActive }) => `${isActive && "underline font-bold"}`}
+            className={({ isActive }) =>
+              `${
+                isActive
+                  ? "text-primary-600 border-primary-500 font-medium"
+                  : "text-neutral-500 hover:opacity-80 hover:text-primary-600"
+              } uppercase text-sm transition-all border-b-2 border-transparent`
+            }
           >
             Songs
           </NavLink>
           <NavLink
             to={"/setlists"}
-            className={({ isActive }) => `${isActive && "underline font-bold"}`}
+            className={({ isActive }) =>
+              `${
+                isActive
+                  ? "text-primary-600 border-primary-500 font-medium"
+                  : "text-neutral-500 hover:opacity-80 hover:text-primary-600"
+              } uppercase text-sm transition-all border-b-2 border-transparent`
+            }
           >
             Setlists
           </NavLink>

app/components/Search/Search.tsx

@@ -8,17 +8,17 @@ interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
 export const Search: React.FC<Props> = ({ onSearch, ...props }) => {
   return (
     <div
-      className="border-stone-400 border rounded-md px-3 py-2 flex items-center focus-within:border-stone-800 flex-row-reverse transition-colors"
+      className="border-neutral-400 border rounded-md px-3 py-2 flex items-center focus-within:border-neutral-800 flex-row-reverse transition-colors"
       data-testid="search"
     >
       <input
         type={"search"}
-        className="peer bg-inherit placeholder-stone-500 w-full outline-none"
+        className="peer bg-inherit placeholder-neutral-500 w-full outline-none"
         placeholder="Search"
         onChange={onSearch}
         {...props}
       />
-      <div className="pr-3 text-stone-500 peer-focus:text-stone-700 transition-colors">
+      <div className="pr-3 text-neutral-500 peer-focus:text-neutral-700 transition-colors">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"

app/components/Select/Select.tsx

@@ -1,5 +1,5 @@
 import { Listbox } from "@headlessui/react";
-import type { InputHTMLAttributes} from "react";
+import type { InputHTMLAttributes } from "react";
 import { useEffect } from "react";
 import React, { useState } from "react";
 import { Input } from "../Input";
@@ -48,7 +48,7 @@ export function Select({
         <div className="relative">
           <Listbox.Button
             className={[
-              "relative w-full cursor-default rounded-sm bg-inherit py-2 pr-10 text-left focus:outline-none focus-visible:ring-1 focus-visible:ring-stone-300 focus-visible:ring-offset-2 focus-visible:ring-offset-stone-300 sm:text-sm",
+              "relative w-full cursor-default rounded-sm bg-inherit py-2 pr-10 text-left focus:outline-none focus-visible:ring-1 focus-visible:ring-neutral-300 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-300 sm:text-sm",
               className,
             ].join(" ")}
           >
@@ -81,7 +81,7 @@ export function Select({
                 key={option.value}
                 className={({ active }) =>
                   `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                    active ? "bg-stone-100 text-stone-900" : "text-gray-900"
+                    active ? "bg-neutral-100 text-neutral-900" : "text-gray-900"
                   }`
                 }
                 value={option}
@@ -96,7 +96,7 @@ export function Select({
                       {option.name}
                     </span>
                     {selected ? (
-                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-stone-600 text-sm">
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-600 text-sm">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           fill="none"

app/components/Stanza/Stanza.tsx

@@ -20,7 +20,7 @@ export const Stanza: React.FC<Props> = ({ stanza }) => {
                 {line.markings?.map((mark) => (
                   <div
                     key={mark.id}
-                    className="inline-block text-center bg-stone-200 text-stone-800 font-mono outline-none rounded-sm absolute top-0"
+                    className="inline-block text-center bg-neutral-200 text-neutral-800 font-mono outline-none rounded-sm absolute top-0"
                     style={{ left: `${mark.indent}ch` }}
                   >
                     {mark.mark}

app/components/Textarea/Textarea.tsx

@@ -30,7 +30,7 @@ export const Textarea: React.FC<InputHTMLAttributes<HTMLTextAreaElement>> =
         wrap={"soft"}
         className={[
           !props.hidden && "block",
-          "w-full bg-inherit focus:outline-none resize-none overflow-hidden placeholder-stone-400",
+          "w-full bg-inherit focus:outline-none resize-none overflow-hidden placeholder-neutral-400",
           className,
         ].join(" ")}
       />

app/components/dialogs/AddSongs/AddSongs.tsx

@@ -46,7 +46,7 @@ export function AddSongs() {
           <div key={song.id} className="flex items-center">
             <div className="flex-1">
               <h3 className="text-xl">{song.title}</h3>
-              <p className="text-stone-500 text-xs uppercase font-bold">
+              <p className="text-neutral-500 text-xs uppercase font-bold">
                 {song.attribution}
               </p>
             </div>

app/components/forms/logout/index.tsx

@@ -4,7 +4,9 @@ import { Button } from "~/components/Button";
 export const LogoutButton = () => {
   return (
     <Form action="/logout" method="post">
-      <Button variant="text">Logout</Button>
+      <Button variant="text" size="sm" className="opacity-50 uppercase text-xs">
+        Logout
+      </Button>
     </Form>
   );
 };

app/components/forms/setlist/SetlistForm.tsx

@@ -19,26 +19,26 @@ const SetlistForm = forwardRef<
       className="space-y-3"
     >
       <div className="space-y-1">
-        <label className="uppercase text-xs font-medium text-stone-400">
+        <label className="uppercase text-xs font-medium text-neutral-400">
           Name
         </label>
         <Input
           name="name"
           defaultValue={setlist?.name}
           placeholder="Rapunzels 10/9/23"
           autoFocus
-          className="border border-stone-200 px-4 py-3 rounded-md focus:border-stone-400"
+          className="border border-neutral-200 px-4 py-3 rounded-md focus:border-neutral-400"
         />
       </div>
       <div className="space-y-1">
-        <label className="uppercase text-xs font-medium text-stone-400">
+        <label className="uppercase text-xs font-medium text-neutral-400">
           Description <span className="font-normal">(optional)</span>
         </label>
         <Textarea
           name="description"
           defaultValue={setlist?.description}
           placeholder="An all sea shanty show in honor of Lief Erickson Day."
-          className="border border-stone-200 px-4 py-3 rounded-md focus:border-stone-400"
+          className="border border-neutral-200 px-4 py-3 rounded-md focus:border-neutral-400"
         />
       </div>
       <div>

app/components/forms/song/LineFields/LineFields.tsx

@@ -87,7 +87,7 @@ export const LineFields: React.FC<Props> = ({
             style={styles.popper}
             {...attributes.popper}
           >
-            <Menu.Button className="bg-stone-200 h-full rounded-sm text-stone-600 text-sm px-0.5">
+            <Menu.Button className="bg-neutral-200 h-full rounded-sm text-neutral-600 text-sm px-0.5">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -111,7 +111,7 @@ export const LineFields: React.FC<Props> = ({
                 <button
                   type="button"
                   className={`${
-                    active ? "bg-stone-200" : "text-stone-900"
+                    active ? "bg-neutral-200" : "text-neutral-900"
                   } group flex w-full items-center rounded-md px-4 py-3`}
                   onClick={() => setShowNotes((x) => !x)}
                 >
@@ -153,7 +153,7 @@ export const LineFields: React.FC<Props> = ({
               <button
                 key={index}
                 onClick={insertMark(index)}
-                className="bg-stone-200 text-stone-500 opacity-0 transition-opacity active:opacity-60 hover:opacity-100 focus:opacity-100 font-mono rounded-sm"
+                className="bg-neutral-200 text-neutral-500 opacity-0 transition-opacity active:opacity-60 hover:opacity-100 focus:opacity-100 font-mono rounded-sm"
               >
                 +
               </button>

app/components/forms/song/SongForm.tsx

@@ -62,7 +62,7 @@ const SongForm = forwardRef<
       </div>
       {/* <button
           type="submit"
-          className="bg-stone-200 px-5 py-2 rounded-md text-stone-800 mt-4"
+          className="bg-neutral-200 px-5 py-2 rounded-md text-neutral-800 mt-4"
         >
           Save
         </button> */}

app/components/forms/song/StanzaFields/StanzaFields.tsx

@@ -43,7 +43,7 @@ export const StanzaFields: React.FC<{
 
   return (
     <>
-      <div className="group/stanza py-2 border-y-2 focus-within:border-stone-200 hover:border-stone-200 border-transparent transition-all">
+      <div className="group/stanza py-2 border-y-2 focus-within:border-neutral-200 hover:border-neutral-200 border-transparent transition-all">
         <div className="flex">
           <div className="flex-1">
             <Select
@@ -60,7 +60,7 @@ export const StanzaFields: React.FC<{
           <div>
             <button
               type="button"
-              className="hover:bg-stone-200 rounded-sm text-stone-600 text-sm p-2 group-hover/stanza:opacity-100 opacity-0 transition-colors whitespace-nowrap inline-flex items-center"
+              className="hover:bg-neutral-200 rounded-sm text-neutral-600 text-sm p-2 group-hover/stanza:opacity-100 opacity-0 transition-colors whitespace-nowrap inline-flex items-center"
               onClick={confirmAndDelete}
             >
               <span className="mr-1">
@@ -84,7 +84,7 @@ export const StanzaFields: React.FC<{
               type="button"
               aria-label="Add Line"
               onClick={insertLine(index)}
-              className="block bg-stone-200 text-stone-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
+              className="block bg-neutral-200 text-neutral-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
             >
               + Add Line
             </button>
@@ -95,7 +95,7 @@ export const StanzaFields: React.FC<{
             type="button"
             aria-label="Add Line"
             onClick={insertLine(0)}
-            className="block bg-stone-200 text-stone-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
+            className="block bg-neutral-200 text-neutral-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
           >
             + Add Line
           </button>
@@ -105,7 +105,7 @@ export const StanzaFields: React.FC<{
         type="button"
         aria-label="Add Line"
         onClick={insertStanza}
-        className="block bg-stone-200 text-stone-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
+        className="block bg-neutral-200 text-neutral-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
       >
         + New Stanza
       </button>

app/routes/__app.tsx

@@ -9,7 +9,7 @@ export default function App() {
   return (
     <>
       <NavBar />
-      <main className="bg-stone-300 min-h-screen py-4 px-2 md:px-0">
+      <main className="bg-neutral-200 min-h-screen py-4 px-2 md:px-0">
         <Outlet />
       </main>
       <ModalRouter>

app/routes/__app/setlists/$id/index.tsx

@@ -60,7 +60,7 @@ export default function ViewSetlist() {
           </Button.Link>
         </div>
       </div>
-      <div className="bg-stone-50  rounded-lg shadow-lg p-8 flex relative">
+      <div className="bg-neutral-50  rounded-lg shadow-lg p-8 flex relative">
         <Button.Link
           to={`/setlists/${setlist.id}?modal=edit-setlist`}
           className="absolute top-2 right-4 text-xs flex items-center"
@@ -92,7 +92,9 @@ export default function ViewSetlist() {
         <div className="flex-1">
           <h1 className="text-4xl">{setlist.name}</h1>
           <p className="mb-2">{setlist.description}</p>
-          <p className="text-stone-500 text-xs">{setlist.songs.length} Songs</p>
+          <p className="text-neutral-500 text-xs">
+            {setlist.songs.length} Songs
+          </p>
         </div>
       </div>
       <div className="flex">
@@ -160,24 +162,24 @@ const SetlistSong: React.FC<{
         <div className="shadow-md transition-all relative">
           <div
             className={`bg-white sticky top-0 bg-inherit w-full outline-none  ${
-              open && "border-b border-stone-300"
+              open && "border-b border-neutral-300"
             } ${open ? "rounded-t-md" : "rounded-md"} flex items-center`}
             style={{ zIndex: order }}
           >
             <Disclosure.Button
               className={"flex-1 pl-4 py-5 flex items-center group"}
             >
-              <div className="mr-3 p-2 group-hover:bg-stone-200 transition-all rounded-full">
+              <div className="mr-3 p-2 group-hover:bg-neutral-200 transition-all rounded-full">
                 <PlayIcon
-                  className={`${open && "rotate-90"} text-stone-600`}
+                  className={`${open && "rotate-90"} text-neutral-600`}
                   width="1em"
                 />
               </div>
               <div className="flex-1 text-left">
                 <h2 className="text-lg">
                   {song.title || `Untitled ${song.createdAt.toLocaleString()}`}
                 </h2>
-                <p className="text-xs font-bold text-stone-500 uppercase">
+                <p className="text-xs font-bold text-neutral-500 uppercase">
                   {song.attribution || "Unknown Artist"}
                 </p>
               </div>
@@ -195,7 +197,7 @@ const SetlistSong: React.FC<{
                       <Link
                         to={`/songs/${song.id}/edit`}
                         className={`${
-                          active && "bg-stone-200"
+                          active && "bg-neutral-200"
                         } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
                       >
                         <PencilIcon