From 48f5c6f2e2c6b700fb4732107a75326210e01b2e Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Sat, 4 Feb 2023 08:00:30 -0500
Subject: [PATCH 01/13] Add tailwind prettier plugin and run format

---
 .prettierrc                                   |   4 -
 app/components/Dialog/Dialog.tsx              |  10 +-
 app/components/Input/Input.tsx                |   2 +-
 app/components/MarkingInput/MarkingInput.tsx  |   4 +-
 app/components/NavBar/NavBar.tsx              |  18 +-
 app/components/Search/Search.tsx              |   6 +-
 app/components/Select/Select.tsx              |   4 +-
 app/components/Stanza/Stanza.tsx              |   8 +-
 app/components/Textarea/Textarea.tsx          |   2 +-
 app/components/dialogs/AddSongs/AddSongs.tsx  |   2 +-
 app/components/forms/logout/index.tsx         |   2 +-
 app/components/forms/setlist/SetlistForm.tsx  |  10 +-
 .../forms/song/LineFields/LineFields.tsx      |  10 +-
 app/components/forms/song/SongForm.tsx        |   4 +-
 .../forms/song/StanzaFields/StanzaFields.tsx  |  14 +-
 app/routes/__app.tsx                          |   2 +-
 app/routes/__app/setlists/$id/index.tsx       |  28 +--
 app/routes/__app/setlists/index.tsx           |  14 +-
 app/routes/__app/songs/$id/edit.tsx           |   4 +-
 app/routes/__app/songs/$id/index.tsx          |   8 +-
 app/routes/__app/songs/index.tsx              |  12 +-
 app/routes/__app/songs/new.tsx                |   2 +-
 app/routes/auth/auth0.tsx                     |   2 +-
 app/routes/index.tsx                          |   6 +-
 app/styles/tailwind.css                       | 214 ++++++++++--------
 package-lock.json                             |  77 +++++++
 package.json                                  |   1 +
 prettier.config.js                            |   6 +
 28 files changed, 294 insertions(+), 182 deletions(-)
 delete mode 100644 .prettierrc
 create mode 100644 prettier.config.js

diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index dc6958f..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "singleQuote": false,
-  "semi": true
-}
diff --git a/app/components/Dialog/Dialog.tsx b/app/components/Dialog/Dialog.tsx
index 86c4652..bd5f6ab 100644
--- a/app/components/Dialog/Dialog.tsx
+++ b/app/components/Dialog/Dialog.tsx
@@ -25,17 +25,17 @@ export const Dialog: React.FC<PropsWithChildren<Props>> = ({
       data-testid="dialog"
     >
       <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">
+      <div className="fixed inset-0 min-h-screen overflow-y-auto md:min-h-min">
+        <div className="flex h-full justify-center pt-4 text-center md:px-4 md:pb-4 ">
+          <HeadlessDialog.Panel className="relative h-full w-full transform overflow-hidden rounded-2xl bg-white p-8 text-left align-middle shadow-xl transition-all md:h-auto md:max-w-md">
             <Button
-              className="rounded-full absolute top-2 right-2 w-8 h-8 px-0 py-0"
+              className="absolute top-2 right-2 h-8 w-8 rounded-full px-0 py-0"
               variant="secondary"
               size="lg"
               aria-label="Close dialog"
               onClick={onClose}
             >
-              <div className="relative w-8 h-8">
+              <div className="relative h-8 w-8">
                 <span className="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
diff --git a/app/components/Input/Input.tsx b/app/components/Input/Input.tsx
index 699c51e..b109f1a 100644
--- a/app/components/Input/Input.tsx
+++ b/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-neutral-400",
+          "w-full bg-inherit placeholder-neutral-400 focus:outline-none",
           className,
         ].join(" ")}
         {...props}
diff --git a/app/components/MarkingInput/MarkingInput.tsx b/app/components/MarkingInput/MarkingInput.tsx
index db16b03..cad1e90 100644
--- a/app/components/MarkingInput/MarkingInput.tsx
+++ b/app/components/MarkingInput/MarkingInput.tsx
@@ -43,7 +43,7 @@ export const MarkingInput: React.FC<Props> = ({ marking, deleteMark }) => {
 
   return (
     <div
-      className="absolute z-10 group/marking font-mono"
+      className="group/marking absolute z-10 font-mono"
       style={{
         left: `${indent}ch`,
       }}
@@ -67,7 +67,7 @@ export const MarkingInput: React.FC<Props> = ({ marking, deleteMark }) => {
           style={{
             width: `${mark.length || 1}ch`,
           }}
-          className="font-mono rounded-sm !bg-neutral-200 w-auto"
+          className="w-auto rounded-sm !bg-neutral-200 font-mono"
         />
         <Button
           variant="text"
diff --git a/app/components/NavBar/NavBar.tsx b/app/components/NavBar/NavBar.tsx
index 54c26c1..d119e91 100644
--- a/app/components/NavBar/NavBar.tsx
+++ b/app/components/NavBar/NavBar.tsx
@@ -7,14 +7,14 @@ type Props = {};
 export const NavBar: React.FC<Props> = () => {
   return (
     <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="container mx-auto flex max-w-xl items-center rounded-2xl bg-neutral-50 px-4 py-3 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"
+                className="w-7 object-contain"
               />
             </div>
             {/* <div className="flex-1">TuneBinder</div> */}
@@ -26,9 +26,9 @@ export const NavBar: React.FC<Props> = () => {
             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`
+                  ? "border-primary-500 font-medium text-primary-600"
+                  : "text-neutral-500 hover:text-primary-600 hover:opacity-80"
+              } border-b-2 border-transparent text-sm uppercase transition-all`
             }
           >
             Songs
@@ -38,15 +38,15 @@ export const NavBar: React.FC<Props> = () => {
             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`
+                  ? "border-primary-500 font-medium text-primary-600"
+                  : "text-neutral-500 hover:text-primary-600 hover:opacity-80"
+              } border-b-2 border-transparent text-sm uppercase transition-all`
             }
           >
             Setlists
           </NavLink>
         </div>
-        <div className="flex-1 flex justify-end">
+        <div className="flex flex-1 justify-end">
           <LogoutButton />
         </div>
       </div>
diff --git a/app/components/Search/Search.tsx b/app/components/Search/Search.tsx
index 1629adf..713e350 100644
--- a/app/components/Search/Search.tsx
+++ b/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-neutral-400 border rounded-md px-3 py-2 flex items-center focus-within:border-neutral-800 flex-row-reverse transition-colors"
+      className="flex flex-row-reverse items-center rounded-md border border-neutral-400 px-3 py-2 transition-colors focus-within:border-neutral-800"
       data-testid="search"
     >
       <input
         type={"search"}
-        className="peer bg-inherit placeholder-neutral-500 w-full outline-none"
+        className="peer w-full bg-inherit placeholder-neutral-500 outline-none"
         placeholder="Search"
         onChange={onSearch}
         {...props}
       />
-      <div className="pr-3 text-neutral-500 peer-focus:text-neutral-700 transition-colors">
+      <div className="pr-3 text-neutral-500 transition-colors peer-focus:text-neutral-700">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
diff --git a/app/components/Select/Select.tsx b/app/components/Select/Select.tsx
index 5c7be70..1053765 100644
--- a/app/components/Select/Select.tsx
+++ b/app/components/Select/Select.tsx
@@ -75,7 +75,7 @@ export function Select({
               </>
             )}
           </Listbox.Button>
-          <Listbox.Options className="absolute z-30 bg-inherit mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-full">
+          <Listbox.Options className="absolute z-30 mt-1 max-h-60 w-full overflow-auto rounded-md bg-inherit bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
             {options.map((option) => (
               <Listbox.Option
                 key={option.value}
@@ -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-neutral-600 text-sm">
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-sm text-neutral-600">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           fill="none"
diff --git a/app/components/Stanza/Stanza.tsx b/app/components/Stanza/Stanza.tsx
index 051f48f..8648fb3 100644
--- a/app/components/Stanza/Stanza.tsx
+++ b/app/components/Stanza/Stanza.tsx
@@ -8,19 +8,19 @@ type Props = {
 export const Stanza: React.FC<Props> = ({ stanza }) => {
   return (
     <div className="space-y-1" data-testid="stanza">
-      <p className="font-bold uppercase w-auto text-sm">{stanza.type}</p>
+      <p className="w-auto text-sm font-bold uppercase">{stanza.type}</p>
       <div className="space-y-3">
         {stanza.lines.map((line) => {
           return (
             <div key={line.id}>
-              <div className="font-mono relative">
-                <div className="opacity-0 cursor-default" aria-hidden>
+              <div className="relative font-mono">
+                <div className="cursor-default opacity-0" aria-hidden>
                   Hidden Spacer
                 </div>
                 {line.markings?.map((mark) => (
                   <div
                     key={mark.id}
-                    className="inline-block text-center bg-neutral-200 text-neutral-800 font-mono outline-none rounded-sm absolute top-0"
+                    className="absolute top-0 inline-block rounded-sm bg-neutral-200 text-center font-mono text-neutral-800 outline-none"
                     style={{ left: `${mark.indent}ch` }}
                   >
                     {mark.mark}
diff --git a/app/components/Textarea/Textarea.tsx b/app/components/Textarea/Textarea.tsx
index 5d3d2e7..5706a33 100644
--- a/app/components/Textarea/Textarea.tsx
+++ b/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-neutral-400",
+          "w-full resize-none overflow-hidden bg-inherit placeholder-neutral-400 focus:outline-none",
           className,
         ].join(" ")}
       />
diff --git a/app/components/dialogs/AddSongs/AddSongs.tsx b/app/components/dialogs/AddSongs/AddSongs.tsx
index 30c3f9c..ab37086 100644
--- a/app/components/dialogs/AddSongs/AddSongs.tsx
+++ b/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-neutral-500 text-xs uppercase font-bold">
+              <p className="text-xs font-bold uppercase text-neutral-500">
                 {song.attribution}
               </p>
             </div>
diff --git a/app/components/forms/logout/index.tsx b/app/components/forms/logout/index.tsx
index 23cf74d..9545456 100644
--- a/app/components/forms/logout/index.tsx
+++ b/app/components/forms/logout/index.tsx
@@ -4,7 +4,7 @@ import { Button } from "~/components/Button";
 export const LogoutButton = () => {
   return (
     <Form action="/logout" method="post">
-      <Button variant="text" size="sm" className="opacity-50 uppercase text-xs">
+      <Button variant="text" size="sm" className="text-xs uppercase opacity-50">
         Logout
       </Button>
     </Form>
diff --git a/app/components/forms/setlist/SetlistForm.tsx b/app/components/forms/setlist/SetlistForm.tsx
index 782315c..3e6cf56 100644
--- a/app/components/forms/setlist/SetlistForm.tsx
+++ b/app/components/forms/setlist/SetlistForm.tsx
@@ -19,7 +19,7 @@ const SetlistForm = forwardRef<
       className="space-y-3"
     >
       <div className="space-y-1">
-        <label className="uppercase text-xs font-medium text-neutral-400">
+        <label className="text-xs font-medium uppercase text-neutral-400">
           Name
         </label>
         <Input
@@ -27,22 +27,22 @@ const SetlistForm = forwardRef<
           defaultValue={setlist?.name}
           placeholder="Rapunzels 10/9/23"
           autoFocus
-          className="border border-neutral-200 px-4 py-3 rounded-md focus:border-neutral-400"
+          className="rounded-md border border-neutral-200 px-4 py-3 focus:border-neutral-400"
         />
       </div>
       <div className="space-y-1">
-        <label className="uppercase text-xs font-medium text-neutral-400">
+        <label className="text-xs font-medium uppercase 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-neutral-200 px-4 py-3 rounded-md focus:border-neutral-400"
+          className="rounded-md border border-neutral-200 px-4 py-3 focus:border-neutral-400"
         />
       </div>
       <div>
-        <div className="flex items-center mt-6">
+        <div className="mt-6 flex items-center">
           <div className="flex-1">
             <Button onClick={close} size="lg" variant="text">
               Cancel
diff --git a/app/components/forms/song/LineFields/LineFields.tsx b/app/components/forms/song/LineFields/LineFields.tsx
index 3373605..f3b2819 100644
--- a/app/components/forms/song/LineFields/LineFields.tsx
+++ b/app/components/forms/song/LineFields/LineFields.tsx
@@ -82,12 +82,12 @@ export const LineFields: React.FC<Props> = ({
       <div className="group relative" ref={setReferenceElement}>
         <Menu>
           <div
-            className="opacity-0 h-full transition-opacity group-hover:opacity-100 z-20 flex items-center pr-5"
+            className="z-20 flex h-full items-center pr-5 opacity-0 transition-opacity group-hover:opacity-100"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <Menu.Button className="bg-neutral-200 h-full rounded-sm text-neutral-600 text-sm px-0.5">
+            <Menu.Button className="h-full rounded-sm bg-neutral-200 px-0.5 text-sm text-neutral-600">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -105,7 +105,7 @@ export const LineFields: React.FC<Props> = ({
               </svg>
             </Menu.Button>
           </div>
-          <Menu.Items className="absolute -translate-x-9 w-28 origin-top-left divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10 sm:text-sm">
+          <Menu.Items className="divide-gray-100 absolute z-10 w-28 origin-top-left -translate-x-9 divide-y rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
             <Menu.Item>
               {({ active }) => (
                 <button
@@ -153,7 +153,7 @@ export const LineFields: React.FC<Props> = ({
               <button
                 key={index}
                 onClick={insertMark(index)}
-                className="bg-neutral-200 text-neutral-500 opacity-0 transition-opacity active:opacity-60 hover:opacity-100 focus:opacity-100 font-mono rounded-sm"
+                className="rounded-sm bg-neutral-200 font-mono text-neutral-500 opacity-0 transition-opacity hover:opacity-100 focus:opacity-100 active:opacity-60"
               >
                 +
               </button>
@@ -170,7 +170,7 @@ export const LineFields: React.FC<Props> = ({
         <Input
           name="notes"
           placeholder="Stylistic notes"
-          className="opacity-75 text-sm"
+          className="text-sm opacity-75"
           hidden={!showNotes}
           defaultValue={line.notes}
           onKeyDown={newLineOnEnterKey}
diff --git a/app/components/forms/song/SongForm.tsx b/app/components/forms/song/SongForm.tsx
index 7d20391..4ba016b 100644
--- a/app/components/forms/song/SongForm.tsx
+++ b/app/components/forms/song/SongForm.tsx
@@ -37,14 +37,14 @@ const SongForm = forwardRef<
       <Textarea
         name="title"
         defaultValue={song.title}
-        className="text-4xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none"
+        className="w-full resize-none bg-inherit py-1 text-4xl outline-none hover:cursor-text"
         placeholder="Title"
       />
       <Textarea
         name="attribution"
         placeholder="Attribution"
         defaultValue={song.attribution}
-        className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none"
+        className="w-full resize-none bg-inherit py-1 text-xl outline-none hover:cursor-text"
       />
       <Input name="id" hidden readOnly defaultValue={song.id} />
       <div>
diff --git a/app/components/forms/song/StanzaFields/StanzaFields.tsx b/app/components/forms/song/StanzaFields/StanzaFields.tsx
index a37b9a7..814d3c5 100644
--- a/app/components/forms/song/StanzaFields/StanzaFields.tsx
+++ b/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-neutral-200 hover:border-neutral-200 border-transparent transition-all">
+      <div className="group/stanza border-y-2 border-transparent py-2 transition-all focus-within:border-neutral-200 hover:border-neutral-200">
         <div className="flex">
           <div className="flex-1">
             <Select
@@ -53,20 +53,20 @@ export const StanzaFields: React.FC<{
                 { name: "Bridge", value: "bridge" },
               ]}
               name="type"
-              className="font-bold uppercase w-auto"
+              className="w-auto font-bold uppercase"
               defaultValue={stanza.type}
             />
           </div>
           <div>
             <button
               type="button"
-              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"
+              className="inline-flex items-center whitespace-nowrap rounded-sm p-2 text-sm text-neutral-600 opacity-0 transition-colors hover:bg-neutral-200 group-hover/stanza:opacity-100"
               onClick={confirmAndDelete}
             >
               <span className="mr-1">
                 <TrashIcon width={"1em"} />
               </span>
-              <span className="uppercase text-xs">Delete</span>
+              <span className="text-xs uppercase">Delete</span>
             </button>
           </div>
         </div>
@@ -84,7 +84,7 @@ export const StanzaFields: React.FC<{
               type="button"
               aria-label="Add Line"
               onClick={insertLine(index)}
-              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"
+              className="block h-2 w-full rounded-sm bg-neutral-200 py-1 font-mono text-sm leading-none text-neutral-600 opacity-0 transition-all hover:h-6 hover:opacity-100"
             >
               + Add Line
             </button>
@@ -95,7 +95,7 @@ export const StanzaFields: React.FC<{
             type="button"
             aria-label="Add Line"
             onClick={insertLine(0)}
-            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"
+            className="block h-2 w-full rounded-sm bg-neutral-200 py-1 font-mono text-sm leading-none text-neutral-600 opacity-0 transition-all hover:h-6 hover:opacity-100"
           >
             + Add Line
           </button>
@@ -105,7 +105,7 @@ export const StanzaFields: React.FC<{
         type="button"
         aria-label="Add Line"
         onClick={insertStanza}
-        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"
+        className="block h-2 w-full rounded-sm bg-neutral-200 py-1 font-mono text-sm leading-none text-neutral-600 opacity-0 transition-all hover:h-6 hover:opacity-100"
       >
         + New Stanza
       </button>
diff --git a/app/routes/__app.tsx b/app/routes/__app.tsx
index de5eb5d..25f4755 100644
--- a/app/routes/__app.tsx
+++ b/app/routes/__app.tsx
@@ -9,7 +9,7 @@ export default function App() {
   return (
     <>
       <NavBar />
-      <main className="bg-neutral-200 min-h-screen py-4 px-2 md:px-0">
+      <main className="min-h-screen bg-neutral-200 py-4 px-2 md:px-0">
         <Outlet />
       </main>
       <ModalRouter>
diff --git a/app/routes/__app/setlists/$id/index.tsx b/app/routes/__app/setlists/$id/index.tsx
index 94e4777..7d8a9e9 100644
--- a/app/routes/__app/setlists/$id/index.tsx
+++ b/app/routes/__app/setlists/$id/index.tsx
@@ -30,7 +30,7 @@ export default function ViewSetlist() {
   const { setlist } = useTypedLoaderData<typeof loader>();
   const { submit } = useFetcher();
   return (
-    <div className="space-y-4 max-w-xl mx-auto">
+    <div className="mx-auto max-w-xl space-y-4">
       <div className="flex items-center">
         <div className="flex-1">
           <Button.Link
@@ -60,10 +60,10 @@ export default function ViewSetlist() {
           </Button.Link>
         </div>
       </div>
-      <div className="bg-neutral-50  rounded-lg shadow-lg p-8 flex relative">
+      <div className="relative  flex rounded-lg bg-neutral-50 p-8 shadow-lg">
         <Button.Link
           to={`/setlists/${setlist.id}?modal=edit-setlist`}
-          className="absolute top-2 right-4 text-xs flex items-center"
+          className="absolute top-2 right-4 flex items-center text-xs"
           size="sm"
           variant="outlined"
         >
@@ -86,19 +86,19 @@ export default function ViewSetlist() {
           </span>
           Edit Details
         </Button.Link>
-        <div className="text-9xl mr-4">
+        <div className="mr-4 text-9xl">
           <span dangerouslySetInnerHTML={{ __html: setlist.qrcode }}></span>
         </div>
         <div className="flex-1">
           <h1 className="text-4xl">{setlist.name}</h1>
           <p className="mb-2">{setlist.description}</p>
-          <p className="text-neutral-500 text-xs">
+          <p className="text-xs text-neutral-500">
             {setlist.songs.length} Songs
           </p>
         </div>
       </div>
       <div className="flex">
-        <h2 className="text-2xl flex-1">Songs</h2>
+        <h2 className="flex-1 text-2xl">Songs</h2>
         <Button.Link
           to="?modal=add-songs"
           variant="secondary"
@@ -159,17 +159,17 @@ const SetlistSong: React.FC<{
   return (
     <Disclosure key={song.id}>
       {({ open }) => (
-        <div className="shadow-md transition-all relative">
+        <div className="relative shadow-md transition-all">
           <div
-            className={`bg-white sticky top-0 bg-inherit w-full outline-none  ${
+            className={`sticky top-0 w-full bg-white bg-inherit outline-none  ${
               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"}
+              className={"group flex flex-1 items-center py-5 pl-4"}
             >
-              <div className="mr-3 p-2 group-hover:bg-neutral-200 transition-all rounded-full">
+              <div className="mr-3 rounded-full p-2 transition-all group-hover:bg-neutral-200">
                 <PlayIcon
                   className={`${open && "rotate-90"} text-neutral-600`}
                   width="1em"
@@ -179,18 +179,18 @@ const SetlistSong: React.FC<{
                 <h2 className="text-lg">
                   {song.title || `Untitled ${song.createdAt.toLocaleString()}`}
                 </h2>
-                <p className="text-xs font-bold text-neutral-500 uppercase">
+                <p className="text-xs font-bold uppercase text-neutral-500">
                   {song.attribution || "Unknown Artist"}
                 </p>
               </div>
             </Disclosure.Button>
-            <Menu as="div" className="relative inline-block text-left pr-3">
+            <Menu as="div" className="relative inline-block pr-3 text-left">
               <Menu.Button as="div">
                 <Button icon variant="text" size="sm" type="button">
                   <EllipsisVerticalIcon width={"1.25em"} />
                 </Button>
               </Menu.Button>
-              <Menu.Items className="absolute right-2 top-0 w-44 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20">
+              <Menu.Items className="divide-gray-100 absolute right-2 top-0 z-20 w-44 divide-y rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                 <div className="px-1 py-1 ">
                   <Menu.Item>
                     {({ active }) => (
@@ -233,7 +233,7 @@ const SetlistSong: React.FC<{
 
           <Disclosure.Panel
             as="div"
-            className={"px-7 py-5 bg-white rounded-b-md"}
+            className={"rounded-b-md bg-white px-7 py-5"}
           >
             <div className="space-y-7">
               {stanzas.map((stanza) => (
diff --git a/app/routes/__app/setlists/index.tsx b/app/routes/__app/setlists/index.tsx
index 266b987..d43b4c4 100644
--- a/app/routes/__app/setlists/index.tsx
+++ b/app/routes/__app/setlists/index.tsx
@@ -20,9 +20,9 @@ export default function SetlistsIndex() {
     keys: ["name", "venue"],
   });
   return (
-    <div className="space-y-4 max-w-xl mx-auto">
+    <div className="mx-auto max-w-xl space-y-4">
       <div className="flex items-center">
-        <h1 className="text-3xl flex-1">Setlists</h1>
+        <h1 className="flex-1 text-3xl">Setlists</h1>
 
         <Button.Link
           to={"?modal=new-setlist"}
@@ -51,8 +51,8 @@ export default function SetlistsIndex() {
       <Search onSearch={onSearch} />
       <div className="space-y-2">
         {!setlists.length && (
-          <div className="border-2 border-primary-500 rounded-md p-8">
-            <h2 className="text-2xl font-medium mb-4 text-primary-700">
+          <div className=" rounded-md bg-white p-8 shadow-md">
+            <h2 className="mb-4 text-2xl font-medium text-neutral-700">
               Easily share a group of songs with friends and bandmates.
             </h2>
             <Form method="post" action="/setlists/new">
@@ -69,7 +69,7 @@ export default function SetlistsIndex() {
           <Link
             to={`/setlists/${setlist.id}`}
             key={setlist.id}
-            className="bg-neutralal-100 px-7 py-5 rounded-md shadow-md hover:shadow-xl hover:bg-white transition-all flex items-start"
+            className="bg-neutralal-100 flex items-start rounded-md px-7 py-5 shadow-md transition-all hover:bg-white hover:shadow-xl"
           >
             <div className="mr-2">
               <span
@@ -82,10 +82,10 @@ export default function SetlistsIndex() {
                 {setlist.name ||
                   `Untitled ${setlist.createdAt.toLocaleString()}`}
               </h2>
-              <p className="text-sm text-neutralal-500 mb-2">
+              <p className="text-neutralal-500 mb-2 text-sm">
                 {setlist.description}
               </p>
-              <p className="text-xs text-neutralal-500">
+              <p className="text-neutralal-500 text-xs">
                 {setlist.songs.length} Songs
               </p>
             </div>
diff --git a/app/routes/__app/songs/$id/edit.tsx b/app/routes/__app/songs/$id/edit.tsx
index d21cddf..a509334 100644
--- a/app/routes/__app/songs/$id/edit.tsx
+++ b/app/routes/__app/songs/$id/edit.tsx
@@ -31,7 +31,7 @@ export default function EditSong() {
   const fetcher = useFetcher();
   const { formRef, hasUnsavedChanges } = useAutoSave(fetcher.submit);
   return (
-    <div className="max-w-xl mx-auto space-y-2">
+    <div className="mx-auto max-w-xl space-y-2">
       <div className="flex items-center">
         <div className="flex-1">
           <Button.Link
@@ -74,7 +74,7 @@ export default function EditSong() {
           </Button.Link>
         </div>
       </div>
-      <div className="bg-neutral-50  rounded-lg shadow-lg relative">
+      <div className="relative  rounded-lg bg-neutral-50 shadow-lg">
         <ClientOnly>
           {() => (
             <div className="absolute top-4 right-4 text-xs text-neutral-400">
diff --git a/app/routes/__app/songs/$id/index.tsx b/app/routes/__app/songs/$id/index.tsx
index 6781ed7..cfb8957 100644
--- a/app/routes/__app/songs/$id/index.tsx
+++ b/app/routes/__app/songs/$id/index.tsx
@@ -21,7 +21,7 @@ export default function () {
   const { song } = useTypedLoaderData<typeof loader>();
 
   return (
-    <div className="max-w-xl mx-auto space-y-2">
+    <div className="mx-auto max-w-xl space-y-2">
       <div className="flex items-center">
         <div className="flex-1">
           <Button.Link
@@ -78,13 +78,13 @@ export default function () {
           </Button.Link>
         </div>
       </div>
-      <div className="bg-neutral-50  rounded-lg shadow-lg relative">
+      <div className="relative  rounded-lg bg-neutral-50 shadow-lg">
         <div className="px-10 py-8">
           <div className="mb-4">
-            <h1 className="text-4xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none">
+            <h1 className="w-full resize-none bg-inherit py-1 text-4xl outline-none hover:cursor-text">
               {song.title}
             </h1>
-            <p className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none text-neutral-500">
+            <p className="w-full resize-none bg-inherit py-1 text-xl text-neutral-500 outline-none hover:cursor-text">
               {song.attribution}
             </p>
           </div>
diff --git a/app/routes/__app/songs/index.tsx b/app/routes/__app/songs/index.tsx
index 427d78d..7601875 100644
--- a/app/routes/__app/songs/index.tsx
+++ b/app/routes/__app/songs/index.tsx
@@ -20,9 +20,9 @@ export default function SongsIndex() {
     keys: ["title", "attribution"],
   });
   return (
-    <div className="space-y-4 max-w-xl mx-auto">
+    <div className="mx-auto max-w-xl space-y-4">
       <div className="flex items-center">
-        <h1 className="text-3xl flex-1">Songs</h1>
+        <h1 className="flex-1 text-3xl">Songs</h1>
         <Form method="post" action="/songs/new">
           <Button type="submit" className="inline-flex items-center">
             <span className="mr-2">
@@ -35,8 +35,8 @@ export default function SongsIndex() {
       <Search onSearch={onSearch} />
       <div className="space-y-2">
         {!songs.length && (
-          <div className="border-2 border-primary-500 rounded-md p-8">
-            <h2 className="text-2xl font-medium mb-4 text-primary-700">
+          <div className=" rounded-md bg-white p-8 shadow-md">
+            <h2 className="mb-4 text-2xl font-medium text-neutral-700">
               Add a song and start jamming!
             </h2>
             <Form method="post" action="/songs/new">
@@ -53,12 +53,12 @@ export default function SongsIndex() {
           <Link
             to={`/songs/${song.id}`}
             key={song.id}
-            className="block bg-white px-7 py-5 rounded-md shadow-md hover:shadow-xl hover:bg-white transition-all"
+            className="block rounded-md bg-white px-7 py-5 shadow-md transition-all hover:bg-white hover:shadow-xl"
           >
             <h2 className="text-lg">
               {song.title || `Untitled ${song.createdAt.toLocaleString()}`}
             </h2>
-            <p className="text-xs font-bold text-neutral-500 uppercase">
+            <p className="text-xs font-bold uppercase text-neutral-500">
               {song.attribution || "Unknown Artist"}
             </p>
           </Link>
diff --git a/app/routes/__app/songs/new.tsx b/app/routes/__app/songs/new.tsx
index 3e5f1ed..95e66f8 100644
--- a/app/routes/__app/songs/new.tsx
+++ b/app/routes/__app/songs/new.tsx
@@ -1,4 +1,4 @@
-import type { LoaderArgs} from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import { createSong } from "~/db/song.db";
 import { currentAuthedUser } from "~/utils/auth.server";
diff --git a/app/routes/auth/auth0.tsx b/app/routes/auth/auth0.tsx
index 57c3530..3a9ac41 100644
--- a/app/routes/auth/auth0.tsx
+++ b/app/routes/auth/auth0.tsx
@@ -1,4 +1,4 @@
-import type { ActionFunction, LoaderFunction} from "@remix-run/node";
+import type { ActionFunction, LoaderFunction } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 
 import { processAuthentication } from "~/utils/auth.server";
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index cb590e4..18d0286 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -12,9 +12,9 @@ export const loader = async ({ request }: LoaderArgs) => {
 
 export default function Landing() {
   return (
-    <div className="h-screen flex items-center flex-col justify-center bg-neutral-300">
-      <h1 className="text-center text-3xl mb-4">👋 Welcome to TuneBinder</h1>
-      <div className="flex flex-col md:flex-row md:space-y-0 space-y-3 items-center justify-center md:space-x-3">
+    <div className="flex h-screen flex-col items-center justify-center bg-neutral-300">
+      <h1 className="mb-4 text-center text-3xl">👋 Welcome to TuneBinder</h1>
+      <div className="flex flex-col items-center justify-center space-y-3 md:flex-row md:space-y-0 md:space-x-3">
         <SignupButton />
         <LoginButton />
       </div>
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index a93dcab..424882d 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -22,7 +22,7 @@
 
 ::before,
 ::after {
-  --tw-content: '';
+  --tw-content: "";
 }
 
 /*
@@ -41,9 +41,11 @@ html {
   -moz-tab-size: 4;
   /* 3 */
   -o-tab-size: 4;
-     tab-size: 4;
+  tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -82,7 +84,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
+  text-decoration: underline dotted;
 }
 
 /*
@@ -126,7 +128,8 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
   /* 1 */
   font-size: 1em;
   /* 2 */
@@ -217,9 +220,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+[type="button"],
+[type="reset"],
+[type="submit"] {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -266,7 +269,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 2. Correct the outline style in Safari.
 */
 
-[type='search'] {
+[type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
@@ -351,7 +354,8 @@ textarea {
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 
-input::-moz-placeholder, textarea::-moz-placeholder {
+input::-moz-placeholder,
+textarea::-moz-placeholder {
   opacity: 1;
   /* 1 */
   color: #9ca3af;
@@ -419,7 +423,9 @@ video {
   display: none;
 }
 
-*, ::before, ::after {
+*,
+::before,
+::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -429,16 +435,16 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -446,24 +452,24 @@ video {
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
 }
 
 ::backdrop {
@@ -476,16 +482,16 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -493,24 +499,24 @@ video {
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
 }
 
 .container {
@@ -778,16 +784,22 @@ video {
 
 .-translate-x-9 {
   --tw-translate-x: -2.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .rotate-90 {
   --tw-rotate: 90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .cursor-default {
@@ -796,8 +808,8 @@ video {
 
 .select-none {
   -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 
 .resize-none {
@@ -1086,7 +1098,7 @@ video {
 
 .object-contain {
   -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 
 .p-2 {
@@ -1238,7 +1250,8 @@ video {
 }
 
 .font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
 }
 
 .text-3xl {
@@ -1424,27 +1437,36 @@ video {
 }
 
 .shadow-xl {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
+    0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+    0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
+    0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .outline-none {
@@ -1453,9 +1475,12 @@ video {
 }
 
 .ring-1 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
 }
 
 .ring-black {
@@ -1474,7 +1499,8 @@ video {
 }
 
 .transition-colors {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -1547,9 +1573,12 @@ video {
 }
 
 .hover\:shadow-xl:hover {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
+    0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .focus\:border-neutral-400:focus {
@@ -1567,9 +1596,12 @@ video {
 }
 
 .focus-visible\:ring-1:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
 }
 
 .focus-visible\:ring-neutral-300:focus-visible {
diff --git a/package-lock.json b/package-lock.json
index 00440e3..8c09790 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,6 +58,7 @@
         "npm-run-all": "^4.1.5",
         "plop": "^3.1.1",
         "postcss": "^8.4.19",
+        "prettier-plugin-tailwindcss": "^0.2.2",
         "start-server-and-test": "^1.14.0",
         "tailwindcss": "^3.2.4",
         "ts-node": "^10.9.1",
@@ -14800,6 +14801,76 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.2.tgz",
+      "integrity": "sha512-5RjUbWRe305pUpc48MosoIp6uxZvZxrM6GyOgsbGLTce+ehePKNm7ziW2dLG2air9aXbGuXlHVSQQw4Lbosq3w==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "@prettier/plugin-php": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@shufo/prettier-plugin-blade": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": ">=2.2.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*",
+        "prettier-plugin-twig-melody": "*"
+      },
+      "peerDependenciesMeta": {
+        "@prettier/plugin-php": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@shufo/prettier-plugin-blade": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -30014,6 +30085,12 @@
       "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true
     },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.2.tgz",
+      "integrity": "sha512-5RjUbWRe305pUpc48MosoIp6uxZvZxrM6GyOgsbGLTce+ehePKNm7ziW2dLG2air9aXbGuXlHVSQQw4Lbosq3w==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index 9269636..0de6413 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "npm-run-all": "^4.1.5",
     "plop": "^3.1.1",
     "postcss": "^8.4.19",
+    "prettier-plugin-tailwindcss": "^0.2.2",
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000..e44a717
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,6 @@
+// prettier.config.js
+module.exports = {
+  plugins: [require("prettier-plugin-tailwindcss")],
+  singleQuote: false,
+  semi: true,
+};

From 556c0a038685d952ffd71db38371478c6dbf0624 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Sat, 4 Feb 2023 08:41:21 -0500
Subject: [PATCH 02/13] Fix bug creating new setlist

---
 app/routes/__app/setlists/index.tsx |  20 +--
 app/styles/tailwind.css             | 214 ++++++++++++----------------
 2 files changed, 102 insertions(+), 132 deletions(-)

diff --git a/app/routes/__app/setlists/index.tsx b/app/routes/__app/setlists/index.tsx
index d43b4c4..6471011 100644
--- a/app/routes/__app/setlists/index.tsx
+++ b/app/routes/__app/setlists/index.tsx
@@ -55,21 +55,23 @@ export default function SetlistsIndex() {
             <h2 className="mb-4 text-2xl font-medium text-neutral-700">
               Easily share a group of songs with friends and bandmates.
             </h2>
-            <Form method="post" action="/setlists/new">
-              <Button type="submit" className="inline-flex items-center">
-                <span className="mr-2">
-                  <PlusIcon width={"1em"} />
-                </span>
-                Create A Setlist
-              </Button>
-            </Form>
+
+            <Button.Link
+              to={"?modal=new-setlist"}
+              className="inline-flex items-center"
+            >
+              <span className="mr-2">
+                <PlusIcon width={"1em"} />
+              </span>
+              Create A Setlist
+            </Button.Link>
           </div>
         )}
         {results.map((setlist) => (
           <Link
             to={`/setlists/${setlist.id}`}
             key={setlist.id}
-            className="bg-neutralal-100 flex items-start rounded-md px-7 py-5 shadow-md transition-all hover:bg-white hover:shadow-xl"
+            className="flex items-start rounded-md bg-white px-7 py-5 shadow-md transition-all  hover:shadow-xl"
           >
             <div className="mr-2">
               <span
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 424882d..a93dcab 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -22,7 +22,7 @@
 
 ::before,
 ::after {
-  --tw-content: "";
+  --tw-content: '';
 }
 
 /*
@@ -41,11 +41,9 @@ html {
   -moz-tab-size: 4;
   /* 3 */
   -o-tab-size: 4;
-  tab-size: 4;
+     tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -84,7 +82,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
+          text-decoration: underline dotted;
 }
 
 /*
@@ -128,8 +126,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
   font-size: 1em;
   /* 2 */
@@ -220,9 +217,9 @@ select {
 */
 
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -269,7 +266,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 2. Correct the outline style in Safari.
 */
 
-[type="search"] {
+[type='search'] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
@@ -354,8 +351,7 @@ textarea {
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 
-input::-moz-placeholder,
-textarea::-moz-placeholder {
+input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1;
   /* 1 */
   color: #9ca3af;
@@ -423,9 +419,7 @@ video {
   display: none;
 }
 
-*,
-::before,
-::after {
+*, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -435,16 +429,16 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -452,24 +446,24 @@ video {
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
 }
 
 ::backdrop {
@@ -482,16 +476,16 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -499,24 +493,24 @@ video {
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
 }
 
 .container {
@@ -784,22 +778,16 @@ video {
 
 .-translate-x-9 {
   --tw-translate-x: -2.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .rotate-90 {
   --tw-rotate: 90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .cursor-default {
@@ -808,8 +796,8 @@ video {
 
 .select-none {
   -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .resize-none {
@@ -1098,7 +1086,7 @@ video {
 
 .object-contain {
   -o-object-fit: contain;
-  object-fit: contain;
+     object-fit: contain;
 }
 
 .p-2 {
@@ -1250,8 +1238,7 @@ video {
 }
 
 .font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 .text-3xl {
@@ -1437,36 +1424,27 @@ video {
 }
 
 .shadow-xl {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
-    0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
-    0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
-    0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .outline-none {
@@ -1475,12 +1453,9 @@ video {
 }
 
 .ring-1 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .ring-black {
@@ -1499,8 +1474,7 @@ video {
 }
 
 .transition-colors {
-  transition-property: color, background-color, border-color,
-    text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -1573,12 +1547,9 @@ video {
 }
 
 .hover\:shadow-xl:hover {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
-    0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .focus\:border-neutral-400:focus {
@@ -1596,12 +1567,9 @@ video {
 }
 
 .focus-visible\:ring-1:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .focus-visible\:ring-neutral-300:focus-visible {

From b69a5f129e89e06158c3e7a5f7a20a052e74db9d Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Sat, 4 Feb 2023 08:48:38 -0500
Subject: [PATCH 03/13] Add blank list handler for setlist songs

---
 app/routes/__app/setlists/$id/index.tsx | 73 +++++++++++--------------
 1 file changed, 33 insertions(+), 40 deletions(-)

diff --git a/app/routes/__app/setlists/$id/index.tsx b/app/routes/__app/setlists/$id/index.tsx
index 7d8a9e9..25c22df 100644
--- a/app/routes/__app/setlists/$id/index.tsx
+++ b/app/routes/__app/setlists/$id/index.tsx
@@ -3,6 +3,8 @@ import { Disclosure, Menu } from "@headlessui/react";
 import {
   EllipsisVerticalIcon,
   PencilIcon,
+  PencilSquareIcon,
+  PlusIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
 import { PlayIcon } from "@heroicons/react/24/solid";
@@ -65,24 +67,10 @@ export default function ViewSetlist() {
           to={`/setlists/${setlist.id}?modal=edit-setlist`}
           className="absolute top-2 right-4 flex items-center text-xs"
           size="sm"
-          variant="outlined"
+          variant="text"
         >
           <span className="mr-2">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              width={"1em"}
-              height={"1em"}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-              />
-            </svg>
+            <PencilSquareIcon width={"1em"} />
           </span>
           Edit Details
         </Button.Link>
@@ -99,32 +87,37 @@ export default function ViewSetlist() {
       </div>
       <div className="flex">
         <h2 className="flex-1 text-2xl">Songs</h2>
-        <Button.Link
-          to="?modal=add-songs"
-          variant="secondary"
-          className="inline-flex items-center"
-        >
-          <span className="mr-2">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              width={"1em"}
-              height={"1em"}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M12 4.5v15m7.5-7.5h-15"
-              />
-            </svg>
-          </span>
-          Add Songs
-        </Button.Link>
+        {!!setlist.songs.length && (
+          <Button.Link
+            to="?modal=add-songs"
+            variant="primary"
+            className="inline-flex items-center"
+          >
+            <span className="mr-2">
+              <PlusIcon width={"1em"} />
+            </span>
+            Add Songs
+          </Button.Link>
+        )}
       </div>
       <div className="space-y-4">
+        {!setlist.songs.length && (
+          <div className=" rounded-md bg-white p-8 shadow-md">
+            <h2 className="mb-4 text-2xl font-medium text-neutral-700">
+              Start adding songs to this setlist.
+            </h2>
+            <Button.Link
+              to="?modal=add-songs"
+              variant="primary"
+              className="inline-flex items-center"
+            >
+              <span className="mr-2">
+                <PlusIcon width={"1em"} />
+              </span>
+              Add Songs
+            </Button.Link>
+          </div>
+        )}
         {setlist.songs.map((song, index) => {
           function removeSong() {
             submit(

From b975837a7ab5bd89bcba889dee13c38806186c26 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Sat, 4 Feb 2023 11:50:50 -0500
Subject: [PATCH 04/13] Fix qrcode logic

---
 app/db/setlist.db.ts                    | 6 ++----
 app/routes/__app/setlists/$id/index.tsx | 2 +-
 app/routes/__app/setlists/index.tsx     | 2 +-
 app/styles/tailwind.css                 | 4 ++++
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/db/setlist.db.ts b/app/db/setlist.db.ts
index 3daf806..beeb7ac 100644
--- a/app/db/setlist.db.ts
+++ b/app/db/setlist.db.ts
@@ -45,15 +45,13 @@ export async function setQRCode(
         light: "#FFFFFF",
         dark: "#000000",
       },
+      margin: 0,
     }
   );
   qrcode = qrcode
     .replace("#000000", "currentColor")
     .replace("#FFFFFF", "none")
-    .replace(
-      'viewBox="0 0 45 45"',
-      "width='1em' height='1em' viewBox='2 2 41 41'"
-    );
+    .replace("<svg", "<svg width='1em' height='1em' ");
 
   return await prisma.setlist.update({
     where: {
diff --git a/app/routes/__app/setlists/$id/index.tsx b/app/routes/__app/setlists/$id/index.tsx
index 25c22df..c9c8c17 100644
--- a/app/routes/__app/setlists/$id/index.tsx
+++ b/app/routes/__app/setlists/$id/index.tsx
@@ -74,7 +74,7 @@ export default function ViewSetlist() {
           </span>
           Edit Details
         </Button.Link>
-        <div className="mr-4 text-9xl">
+        <div className="mr-5 text-9xl">
           <span dangerouslySetInnerHTML={{ __html: setlist.qrcode }}></span>
         </div>
         <div className="flex-1">
diff --git a/app/routes/__app/setlists/index.tsx b/app/routes/__app/setlists/index.tsx
index 6471011..1003849 100644
--- a/app/routes/__app/setlists/index.tsx
+++ b/app/routes/__app/setlists/index.tsx
@@ -73,7 +73,7 @@ export default function SetlistsIndex() {
             key={setlist.id}
             className="flex items-start rounded-md bg-white px-7 py-5 shadow-md transition-all  hover:shadow-xl"
           >
-            <div className="mr-2">
+            <div className="mr-4">
               <span
                 className="text-7xl"
                 dangerouslySetInnerHTML={{ __html: setlist.qrcode }}
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index a93dcab..a871109 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -684,6 +684,10 @@ video {
   margin-right: 0.75rem;
 }
 
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }

From 5ddfacc4d2a533f045cdded13df26b7b4da3801d Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Sat, 4 Feb 2023 11:52:55 -0500
Subject: [PATCH 05/13] Update qrcode when update setlist

---
 app/routes/__app/setlists/$id/edit.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/routes/__app/setlists/$id/edit.tsx b/app/routes/__app/setlists/$id/edit.tsx
index 54ef05b..42a906b 100644
--- a/app/routes/__app/setlists/$id/edit.tsx
+++ b/app/routes/__app/setlists/$id/edit.tsx
@@ -1,7 +1,7 @@
 import type { Setlist } from "@prisma/client";
 import type { ActionArgs } from "@remix-run/node";
 import { redirect } from "remix-typedjson";
-import { updateSetlist } from "~/db/setlist.db";
+import { setQRCode, updateSetlist } from "~/db/setlist.db";
 import { formDataToJson } from "~/helpers/formDataToJson";
 
 export async function action({ request, params }: ActionArgs) {
@@ -21,6 +21,7 @@ export async function action({ request, params }: ActionArgs) {
         description,
       },
     });
+    await setQRCode(updatedSetlist, request);
     return redirect(`/setlists/${updatedSetlist.id}`);
   } catch (e) {
     throw new Response("Internal error", { status: 500 });

From 1decbd8caf93d37eea8a6e2d0d6a92c059675dd7 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Sat, 4 Feb 2023 11:59:57 -0500
Subject: [PATCH 06/13] Add icons to song and setlist pages

---
 app/routes/__app/setlists/index.tsx |  9 +++++++--
 app/routes/__app/songs/index.tsx    |  9 +++++++--
 app/styles/tailwind.css             | 12 ++++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/routes/__app/setlists/index.tsx b/app/routes/__app/setlists/index.tsx
index 1003849..8fd4795 100644
--- a/app/routes/__app/setlists/index.tsx
+++ b/app/routes/__app/setlists/index.tsx
@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/24/solid";
+import { PlusIcon, QueueListIcon } from "@heroicons/react/24/solid";
 import type { Setlist } from "@prisma/client";
 import { Form, Link } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -22,7 +22,12 @@ export default function SetlistsIndex() {
   return (
     <div className="mx-auto max-w-xl space-y-4">
       <div className="flex items-center">
-        <h1 className="flex-1 text-3xl">Setlists</h1>
+        <h1 className="flex flex-1 items-center text-3xl">
+          <span className="mr-2 inline-block">
+            <QueueListIcon width={"1em"} />
+          </span>{" "}
+          Setlists
+        </h1>
 
         <Button.Link
           to={"?modal=new-setlist"}
diff --git a/app/routes/__app/songs/index.tsx b/app/routes/__app/songs/index.tsx
index 7601875..86d038c 100644
--- a/app/routes/__app/songs/index.tsx
+++ b/app/routes/__app/songs/index.tsx
@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/24/solid";
+import { MusicalNoteIcon, PlusIcon } from "@heroicons/react/24/solid";
 import type { Song } from "@prisma/client";
 import type { LoaderArgs } from "@remix-run/node";
 import { Form, Link } from "@remix-run/react";
@@ -22,7 +22,12 @@ export default function SongsIndex() {
   return (
     <div className="mx-auto max-w-xl space-y-4">
       <div className="flex items-center">
-        <h1 className="flex-1 text-3xl">Songs</h1>
+        <h1 className="flex flex-1 items-center text-3xl">
+          <span className="mr-2 inline-block">
+            <MusicalNoteIcon width={"1em"} />
+          </span>{" "}
+          Songs
+        </h1>
         <Form method="post" action="/songs/new">
           <Button type="submit" className="inline-flex items-center">
             <span className="mr-2">
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index a871109..0f580de 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -639,6 +639,10 @@ video {
   z-index: 20;
 }
 
+.m-0 {
+  margin: 0px;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -700,6 +704,10 @@ video {
   display: inline-block;
 }
 
+.inline {
+  display: inline;
+}
+
 .flex {
   display: flex;
 }
@@ -828,6 +836,10 @@ video {
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .justify-end {
   justify-content: flex-end;
 }

From 3b3a9fc783f85c0f3f6c079e200179a277e384e0 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Tue, 7 Feb 2023 14:51:17 -0500
Subject: [PATCH 07/13] Refactor onEnter handler to handle case of putting
 lyrics on a new line

---
 .../forms/song/LineFields/LineFields.tsx      | 36 ++++++++++++-------
 .../forms/song/StanzaFields/StanzaFields.tsx  | 10 +++---
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/app/components/forms/song/LineFields/LineFields.tsx b/app/components/forms/song/LineFields/LineFields.tsx
index f3b2819..911b796 100644
--- a/app/components/forms/song/LineFields/LineFields.tsx
+++ b/app/components/forms/song/LineFields/LineFields.tsx
@@ -1,6 +1,6 @@
 import type { ILine, IMarking } from "@/types/song";
 import { Menu } from "@headlessui/react";
-import type { KeyboardEvent } from "react";
+import type { ClipboardEvent, KeyboardEvent } from "react";
 import { useState } from "react";
 import { usePopper } from "react-popper";
 import { Input } from "~/components/Input";
@@ -12,7 +12,7 @@ import uniqid from "uniqid";
 
 type Props = {
   line: ILine;
-  insertLine?: () => void;
+  insertLine?: (lyric?: string) => void;
   deleteLine?: () => void;
 };
 
@@ -44,28 +44,40 @@ export const LineFields: React.FC<Props> = ({
     placement: "left",
   });
 
-  const insertMark = (index: number) => {
+  function insertMark(index: number) {
     return () => {
       const length = markingsFieldArray.length;
       push({ indent: index, id: uniqid(), mark: "" } as IMarking);
       focus(`input[name="${namespace}markings[${length}].mark"]`);
     };
-  };
+  }
 
-  const removeMark = (index: number) => {
+  function removeMark(index: number) {
     return () => {
       remove(index);
     };
-  };
+  }
 
-  const newLineOnEnterKey = (e: KeyboardEvent<HTMLInputElement>) => {
+  function newLineOnEnterKey(e: KeyboardEvent<HTMLInputElement>) {
     if (e.key === "Enter") {
       e.preventDefault();
-      if (insertLine) insertLine();
+      const target = e.target as HTMLInputElement;
+      // Get text after the current cursor position
+      const afterCursorText = target.value.slice(
+        target.selectionStart ?? undefined
+      );
+      // Remove the text after the cursor from current lyrics input
+      target.value = target.value.slice(0, target.selectionStart ?? undefined);
+      // Insert line with text after the cursor
+      if (insertLine) insertLine(afterCursorText);
     }
-  };
+  }
 
-  const confirmAndDelete = () => {
+  function onPasteLyrics(e: ClipboardEvent<HTMLInputElement>) {
+    // Trigger handlePaste from StanzaContext
+  }
+
+  function confirmAndDelete() {
     if (
       confirm(
         "Are you sure you want to delete this line?\nYou can't undo this action."
@@ -73,12 +85,11 @@ export const LineFields: React.FC<Props> = ({
     ) {
       if (deleteLine) deleteLine();
     }
-  };
+  }
 
   return (
     <div className="w-full whitespace-nowrap" data-testid="line-fields">
       <Input name="id" hidden readOnly defaultValue={line.id} />
-
       <div className="group relative" ref={setReferenceElement}>
         <Menu>
           <div
@@ -166,6 +177,7 @@ export const LineFields: React.FC<Props> = ({
           className="font-mono"
           defaultValue={line.lyrics}
           onKeyDown={newLineOnEnterKey}
+          onPaste={onPasteLyrics}
         />
         <Input
           name="notes"
diff --git a/app/components/forms/song/StanzaFields/StanzaFields.tsx b/app/components/forms/song/StanzaFields/StanzaFields.tsx
index 814d3c5..6301b6b 100644
--- a/app/components/forms/song/StanzaFields/StanzaFields.tsx
+++ b/app/components/forms/song/StanzaFields/StanzaFields.tsx
@@ -19,8 +19,10 @@ export const StanzaFields: React.FC<{
   const namespace = useNamespace("");
 
   const insertLine = (index: number) => {
-    return () => {
-      insert(index + 1, createMockStanza({}).lines[0]);
+    return (lyrics?: string) => {
+      const lineToInsert = createMockStanza({}).lines[0];
+      lineToInsert.lyrics = lyrics || "";
+      insert(index + 1, lineToInsert);
       focus(`input[name="${namespace}lines[${index + 1}].lyrics"]`);
     };
   };
@@ -83,7 +85,7 @@ export const StanzaFields: React.FC<{
             <button
               type="button"
               aria-label="Add Line"
-              onClick={insertLine(index)}
+              onClick={() => insertLine(index)()}
               className="block h-2 w-full rounded-sm bg-neutral-200 py-1 font-mono text-sm leading-none text-neutral-600 opacity-0 transition-all hover:h-6 hover:opacity-100"
             >
               + Add Line
@@ -94,7 +96,7 @@ export const StanzaFields: React.FC<{
           <button
             type="button"
             aria-label="Add Line"
-            onClick={insertLine(0)}
+            onClick={() => insertLine(0)()}
             className="block h-2 w-full rounded-sm bg-neutral-200 py-1 font-mono text-sm leading-none text-neutral-600 opacity-0 transition-all hover:h-6 hover:opacity-100"
           >
             + Add Line

From 1e805b627f0ccf418dbb468253c4e4f57a706d98 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Tue, 7 Feb 2023 18:25:38 -0500
Subject: [PATCH 08/13] Convert plain text to stanzas

---
 app/helpers/convertPlainTextToStanzas.test.ts | 98 +++++++++++++++++++
 app/helpers/convertPlainTextToStanzas.ts      | 21 ++++
 test/factories/song.factory.ts                | 21 ++--
 3 files changed, 131 insertions(+), 9 deletions(-)
 create mode 100644 app/helpers/convertPlainTextToStanzas.test.ts
 create mode 100644 app/helpers/convertPlainTextToStanzas.ts

diff --git a/app/helpers/convertPlainTextToStanzas.test.ts b/app/helpers/convertPlainTextToStanzas.test.ts
new file mode 100644
index 0000000..46f4c5c
--- /dev/null
+++ b/app/helpers/convertPlainTextToStanzas.test.ts
@@ -0,0 +1,98 @@
+import type { IStanza } from "@/types/song";
+import { convertPlainTextToStanzas } from "./convertPlainTextToStanzas";
+
+const singleStanzaText =
+  "This is a song\nWith an single stanza\nThis is a song";
+
+const singleStanzaConverted: IStanza[] = [
+  {
+    type: expect.anything(),
+    id: expect.any(String),
+    lines: [
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "With an single stanza",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+    ],
+  },
+];
+
+test("Should convert to list with single stanza", () => {
+  expect(convertPlainTextToStanzas(singleStanzaText)).toMatchObject(
+    singleStanzaConverted
+  );
+});
+
+const multipleStanzaText =
+  "This is a song\nWith an single stanza\nThis is a song\n\nThis is a song\nWith an single stanza\nThis is a song";
+
+const multipleStanzaConverted: IStanza[] = [
+  {
+    type: expect.anything(),
+    id: expect.any(String),
+    lines: [
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "With an single stanza",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+    ],
+  },
+  {
+    type: expect.anything(),
+    id: expect.any(String),
+    lines: [
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "With an single stanza",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+    ],
+  },
+];
+
+test("Should convert to list with multiple stanzas", () => {
+  expect(convertPlainTextToStanzas(multipleStanzaText)).toMatchObject(
+    multipleStanzaConverted
+  );
+});
diff --git a/app/helpers/convertPlainTextToStanzas.ts b/app/helpers/convertPlainTextToStanzas.ts
new file mode 100644
index 0000000..8457027
--- /dev/null
+++ b/app/helpers/convertPlainTextToStanzas.ts
@@ -0,0 +1,21 @@
+import {
+  createMockLine,
+  createMockStanza,
+} from "@/test/factories/song.factory";
+import type { ILine, IStanza } from "@/types/song";
+
+export function convertPlainTextToStanzas(text: string) {
+  // Split text into Stanzas
+  const textSplitByStanzas = text.split("\n\n");
+  const stanzas = [] as IStanza[];
+  textSplitByStanzas.forEach((stanzaText) => {
+    const textSplitIntoLyrics = stanzaText.split("\n");
+    const lines = [] as ILine[];
+    textSplitIntoLyrics.forEach((lyrics) => {
+      lines.push(createMockLine({ lyrics }));
+    });
+    stanzas.push(createMockStanza({ lines }));
+  });
+
+  return stanzas;
+}
diff --git a/test/factories/song.factory.ts b/test/factories/song.factory.ts
index e8e75b2..765360c 100644
--- a/test/factories/song.factory.ts
+++ b/test/factories/song.factory.ts
@@ -1,4 +1,4 @@
-import type { IMarking, IStanza } from "@/types/song";
+import type { ILine, IMarking, IStanza } from "@/types/song";
 import type { Song } from "@prisma/client";
 import uniqid from "uniqid";
 
@@ -99,14 +99,17 @@ export function createMockStanza(p: Partial<IStanza>): IStanza {
   return {
     id: uniqid(),
     type: "verse",
-    lines: [
-      {
-        id: uniqid(),
-        lyrics: "",
-        markings: [],
-        notes: "",
-      },
-    ],
+    lines: [createMockLine()],
+    ...p,
+  };
+}
+
+export function createMockLine(p?: Partial<ILine>): ILine {
+  return {
+    id: uniqid(),
+    lyrics: "",
+    markings: [],
+    notes: "",
     ...p,
   };
 }

From d56df8a3bda6282ad7d7c86de91480e425868517 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Wed, 8 Feb 2023 15:39:59 -0500
Subject: [PATCH 09/13] Add findIndex function to useArray

---
 app/lib/useArray.test.ts | 13 +++++++++++++
 app/lib/useArray.ts      |  6 +++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/lib/useArray.test.ts b/app/lib/useArray.test.ts
index b7c7f4e..8316392 100644
--- a/app/lib/useArray.test.ts
+++ b/app/lib/useArray.test.ts
@@ -54,3 +54,16 @@ test("can delete items", () => {
   expect(result.current.items[0]).toBe(1);
   expect(result.current.items.length).toBe(1);
 });
+
+test("can findIndex", () => {
+  const { result } = renderHook(() => useArray([{ id: 0 }, { id: 1 }]));
+
+  expect(result.current.findIndex((value) => value.id === 0)).toBe(0);
+  expect(result.current.findIndex((value) => value.id === 1)).toBe(1);
+
+  act(() => {
+    result.current.insert(1, { id: 3 });
+  });
+
+  expect(result.current.findIndex((value) => value.id === 3)).toBe(1);
+});
diff --git a/app/lib/useArray.ts b/app/lib/useArray.ts
index 97477c6..52d8970 100644
--- a/app/lib/useArray.ts
+++ b/app/lib/useArray.ts
@@ -35,6 +35,10 @@ export function useArray<T>(initialItems: T[]) {
     });
   };
 
+  const findIndex = (predicate: (value: T) => unknown) => {
+    return items.findIndex(predicate);
+  };
+
   const swap = (indexA: number, indexB: number) => {
     setItems((oldItems) => {
       const items = [...oldItems];
@@ -43,5 +47,5 @@ export function useArray<T>(initialItems: T[]) {
     });
   };
 
-  return { items, remove, push, replace, insert, swap };
+  return { items, remove, push, replace, insert, swap, findIndex };
 }

From 4e9bd41cbcf860e620b8f511fbf309d8e0d1c65a Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Wed, 8 Feb 2023 15:40:12 -0500
Subject: [PATCH 10/13] Add red color to tailwind config

---
 tailwind.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index ce877dd..e91404c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
       neutral: colors.stone,
       primary: colors.orange,
       secondary: colors.cyan,
+      red: colors.red,
     },
   },
   plugins: [],

From a0430d1cb02f3426728c4212b8f849c321177ef2 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Wed, 8 Feb 2023 16:15:25 -0500
Subject: [PATCH 11/13] Handle pasting lyrics

---
 .../forms/song/LineFields/LineFields.tsx      | 23 ++++-
 .../forms/song/StanzaFields/StanzaFields.tsx  |  9 +-
 app/helpers/convertPlainTextToLines.test.ts   | 32 ++++++
 app/helpers/convertPlainTextToLines.ts        | 14 +++
 app/helpers/convertPlainTextToStanzas.test.ts | 98 -------------------
 app/helpers/convertPlainTextToStanzas.ts      | 21 ----
 app/lib/useArray.test.ts                      | 15 +++
 app/lib/useArray.ts                           | 10 +-
 8 files changed, 99 insertions(+), 123 deletions(-)
 create mode 100644 app/helpers/convertPlainTextToLines.test.ts
 create mode 100644 app/helpers/convertPlainTextToLines.ts
 delete mode 100644 app/helpers/convertPlainTextToStanzas.test.ts
 delete mode 100644 app/helpers/convertPlainTextToStanzas.ts

diff --git a/app/components/forms/song/LineFields/LineFields.tsx b/app/components/forms/song/LineFields/LineFields.tsx
index 911b796..2527b70 100644
--- a/app/components/forms/song/LineFields/LineFields.tsx
+++ b/app/components/forms/song/LineFields/LineFields.tsx
@@ -9,10 +9,12 @@ import { Fieldset, useNamespace } from "~/lib/fieldset";
 import { useArray } from "~/lib/useArray";
 import { useFocus } from "~/lib/useFocus";
 import uniqid from "uniqid";
+import { convertPlainTextToLines } from "~/helpers/convertPlainTextToLines";
 
 type Props = {
   line: ILine;
   insertLine?: (lyric?: string) => void;
+  updateLine?: (lyric: string) => void;
   deleteLine?: () => void;
 };
 
@@ -20,6 +22,7 @@ export const LineFields: React.FC<Props> = ({
   line,
   insertLine,
   deleteLine,
+  updateLine,
 }) => {
   const {
     items: markingsFieldArray,
@@ -73,7 +76,23 @@ export const LineFields: React.FC<Props> = ({
     }
   }
 
-  function onPasteLyrics(e: ClipboardEvent<HTMLInputElement>) {
+  async function onPasteLyrics(e: ClipboardEvent<HTMLInputElement>) {
+    const pastedText = e.clipboardData.getData("text/plain");
+    const target = e.target as HTMLInputElement;
+    // If input is blank and pasted text includes an end return
+    if (!target.value && pastedText.includes("\n")) {
+      // Prevent default paste
+      e.preventDefault();
+      const linesToAdd = convertPlainTextToLines(pastedText);
+      // Reverse the array for adding it to the lyrics linearly
+      linesToAdd.reverse();
+      if (updateLine) updateLine(linesToAdd.pop()?.lyrics || "");
+      // Insert the new lyrics in reverse order
+      linesToAdd.forEach((line) => {
+        if (insertLine) insertLine(line.lyrics);
+      });
+    }
+
     // Trigger handlePaste from StanzaContext
   }
 
@@ -116,7 +135,7 @@ export const LineFields: React.FC<Props> = ({
               </svg>
             </Menu.Button>
           </div>
-          <Menu.Items className="divide-gray-100 absolute z-10 w-28 origin-top-left -translate-x-9 divide-y rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+          <Menu.Items className="absolute z-20 w-28 origin-top-left -translate-x-9 divide-y divide-neutral-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
             <Menu.Item>
               {({ active }) => (
                 <button
diff --git a/app/components/forms/song/StanzaFields/StanzaFields.tsx b/app/components/forms/song/StanzaFields/StanzaFields.tsx
index 6301b6b..5bfcc0f 100644
--- a/app/components/forms/song/StanzaFields/StanzaFields.tsx
+++ b/app/components/forms/song/StanzaFields/StanzaFields.tsx
@@ -13,7 +13,7 @@ export const StanzaFields: React.FC<{
   insertStanza?: () => void;
   deleteStanza?: () => void;
 }> = ({ stanza, insertStanza, deleteStanza }) => {
-  const { items: lines, insert, remove } = useArray(stanza.lines);
+  const { items: lines, insert, remove, update } = useArray(stanza.lines);
 
   const focus = useFocus();
   const namespace = useNamespace("");
@@ -33,6 +33,12 @@ export const StanzaFields: React.FC<{
     };
   };
 
+  const updateLine = (index: number) => {
+    return (lyrics: string) => {
+      update(index, { lyrics });
+    };
+  };
+
   const confirmAndDelete = () => {
     if (
       confirm(
@@ -78,6 +84,7 @@ export const StanzaFields: React.FC<{
             <Fieldset.Headless namespace={`lines[${index}]`}>
               <LineFields
                 line={line}
+                updateLine={updateLine(index)}
                 deleteLine={deleteLine(index)}
                 insertLine={insertLine(index)}
               />
diff --git a/app/helpers/convertPlainTextToLines.test.ts b/app/helpers/convertPlainTextToLines.test.ts
new file mode 100644
index 0000000..ad04099
--- /dev/null
+++ b/app/helpers/convertPlainTextToLines.test.ts
@@ -0,0 +1,32 @@
+import type { ILine } from "@/types/song";
+import { convertPlainTextToLines } from "./convertPlainTextToLines";
+
+const samplePastedText =
+  "This is a song\nWith an single stanza\nThis is a song";
+
+const singleStanzaConverted: ILine[] = [
+  {
+    id: expect.any(String),
+    lyrics: "This is a song",
+    markings: [],
+    notes: "",
+  },
+  {
+    id: expect.any(String),
+    lyrics: "With an single stanza",
+    markings: [],
+    notes: "",
+  },
+  {
+    id: expect.any(String),
+    lyrics: "This is a song",
+    markings: [],
+    notes: "",
+  },
+];
+
+test("Should convert to list with single stanza", () => {
+  expect(convertPlainTextToLines(samplePastedText)).toMatchObject(
+    singleStanzaConverted
+  );
+});
diff --git a/app/helpers/convertPlainTextToLines.ts b/app/helpers/convertPlainTextToLines.ts
new file mode 100644
index 0000000..4f6c012
--- /dev/null
+++ b/app/helpers/convertPlainTextToLines.ts
@@ -0,0 +1,14 @@
+import { createMockLine } from "@/test/factories/song.factory";
+import type { ILine } from "@/types/song";
+
+export function convertPlainTextToLines(text: string) {
+  // Split text into Lines
+
+  const textSplitIntoLyrics = text.split("\n");
+  const lines = [] as ILine[];
+  textSplitIntoLyrics.forEach((lyrics) => {
+    lines.push(createMockLine({ lyrics }));
+  });
+
+  return lines;
+}
diff --git a/app/helpers/convertPlainTextToStanzas.test.ts b/app/helpers/convertPlainTextToStanzas.test.ts
deleted file mode 100644
index 46f4c5c..0000000
--- a/app/helpers/convertPlainTextToStanzas.test.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import type { IStanza } from "@/types/song";
-import { convertPlainTextToStanzas } from "./convertPlainTextToStanzas";
-
-const singleStanzaText =
-  "This is a song\nWith an single stanza\nThis is a song";
-
-const singleStanzaConverted: IStanza[] = [
-  {
-    type: expect.anything(),
-    id: expect.any(String),
-    lines: [
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "With an single stanza",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-    ],
-  },
-];
-
-test("Should convert to list with single stanza", () => {
-  expect(convertPlainTextToStanzas(singleStanzaText)).toMatchObject(
-    singleStanzaConverted
-  );
-});
-
-const multipleStanzaText =
-  "This is a song\nWith an single stanza\nThis is a song\n\nThis is a song\nWith an single stanza\nThis is a song";
-
-const multipleStanzaConverted: IStanza[] = [
-  {
-    type: expect.anything(),
-    id: expect.any(String),
-    lines: [
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "With an single stanza",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-    ],
-  },
-  {
-    type: expect.anything(),
-    id: expect.any(String),
-    lines: [
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "With an single stanza",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-    ],
-  },
-];
-
-test("Should convert to list with multiple stanzas", () => {
-  expect(convertPlainTextToStanzas(multipleStanzaText)).toMatchObject(
-    multipleStanzaConverted
-  );
-});
diff --git a/app/helpers/convertPlainTextToStanzas.ts b/app/helpers/convertPlainTextToStanzas.ts
deleted file mode 100644
index 8457027..0000000
--- a/app/helpers/convertPlainTextToStanzas.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {
-  createMockLine,
-  createMockStanza,
-} from "@/test/factories/song.factory";
-import type { ILine, IStanza } from "@/types/song";
-
-export function convertPlainTextToStanzas(text: string) {
-  // Split text into Stanzas
-  const textSplitByStanzas = text.split("\n\n");
-  const stanzas = [] as IStanza[];
-  textSplitByStanzas.forEach((stanzaText) => {
-    const textSplitIntoLyrics = stanzaText.split("\n");
-    const lines = [] as ILine[];
-    textSplitIntoLyrics.forEach((lyrics) => {
-      lines.push(createMockLine({ lyrics }));
-    });
-    stanzas.push(createMockStanza({ lines }));
-  });
-
-  return stanzas;
-}
diff --git a/app/lib/useArray.test.ts b/app/lib/useArray.test.ts
index 8316392..172a51c 100644
--- a/app/lib/useArray.test.ts
+++ b/app/lib/useArray.test.ts
@@ -67,3 +67,18 @@ test("can findIndex", () => {
 
   expect(result.current.findIndex((value) => value.id === 3)).toBe(1);
 });
+
+test("can update object", () => {
+  const { result } = renderHook(() =>
+    useArray([
+      { id: 0, value: 0 },
+      { id: 1, value: 1 },
+    ])
+  );
+
+  act(() => {
+    result.current.update(1, { value: 2 });
+  });
+
+  expect(result.current.items[1]).toMatchObject({ id: 1, value: 2 });
+});
diff --git a/app/lib/useArray.ts b/app/lib/useArray.ts
index 52d8970..3b76a86 100644
--- a/app/lib/useArray.ts
+++ b/app/lib/useArray.ts
@@ -27,6 +27,14 @@ export function useArray<T>(initialItems: T[]) {
     });
   };
 
+  const update = (index: number, item: Partial<T>) => {
+    setItems((oldItems) => {
+      const items = [...oldItems];
+      items.splice(index, 1, { ...items[index], ...item });
+      return items;
+    });
+  };
+
   const push = (item: T) => {
     setItems((oldItems) => {
       const items = [...oldItems];
@@ -47,5 +55,5 @@ export function useArray<T>(initialItems: T[]) {
     });
   };
 
-  return { items, remove, push, replace, insert, swap, findIndex };
+  return { items, remove, push, replace, insert, swap, findIndex, update };
 }

From 7f358ee75f262e6e906b3b7a625ad8101de00646 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Wed, 8 Feb 2023 16:31:06 -0500
Subject: [PATCH 12/13] Add generate tailwind styles to gitignore

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index c78d9a4..29b6023 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,8 @@ node_modules
 /prisma/data.db-journal
 /postgres-data
 
+tailwind.css
+
 .DS_Store
 coverage
 build
\ No newline at end of file

From 8e9a5b4d85150c0d352af7acc6cc97f048a3a524 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Wed, 8 Feb 2023 16:31:38 -0500
Subject: [PATCH 13/13] Fix NavBar border styles

---
 app/components/NavBar/NavBar.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/NavBar/NavBar.tsx b/app/components/NavBar/NavBar.tsx
index d119e91..a7ebf60 100644
--- a/app/components/NavBar/NavBar.tsx
+++ b/app/components/NavBar/NavBar.tsx
@@ -26,9 +26,9 @@ export const NavBar: React.FC<Props> = () => {
             className={({ isActive }) =>
               `${
                 isActive
-                  ? "border-primary-500 font-medium text-primary-600"
-                  : "text-neutral-500 hover:text-primary-600 hover:opacity-80"
-              } border-b-2 border-transparent text-sm uppercase transition-all`
+                  ? " border-primary-500 font-medium text-primary-600"
+                  : "border-transparent text-neutral-500 hover:text-primary-600 hover:opacity-80"
+              } border-b-2  text-sm uppercase transition-all`
             }
           >
             Songs
@@ -38,9 +38,9 @@ export const NavBar: React.FC<Props> = () => {
             className={({ isActive }) =>
               `${
                 isActive
-                  ? "border-primary-500 font-medium text-primary-600"
-                  : "text-neutral-500 hover:text-primary-600 hover:opacity-80"
-              } border-b-2 border-transparent text-sm uppercase transition-all`
+                  ? " border-primary-500 font-medium text-primary-600"
+                  : "border-transparent text-neutral-500 hover:text-primary-600 hover:opacity-80"
+              } border-b-2 text-sm uppercase transition-all`
             }
           >
             Setlists