From 2a4a4c3caafbc1d08161815fc8047f8954900b8e Mon Sep 17 00:00:00 2001
From: Leonardo Segala <leonardosegala2006@gmail.com>
Date: Sat, 2 Aug 2025 04:34:45 +0200
Subject: [PATCH] Add minimal styling

---
 .../src/lib/components/SuggestionInput.svelte | 10 +++++--
 .../src/lib/components/SuggestionList.svelte  | 28 +++++++++++++------
 frontend/tailwind.config.ts                   | 22 +++++++++++++++
 3 files changed, 48 insertions(+), 12 deletions(-)
 create mode 100644 frontend/tailwind.config.ts

diff --git a/frontend/src/lib/components/SuggestionInput.svelte b/frontend/src/lib/components/SuggestionInput.svelte
index de8e437..09982fd 100644
--- a/frontend/src/lib/components/SuggestionInput.svelte
+++ b/frontend/src/lib/components/SuggestionInput.svelte
@@ -9,7 +9,11 @@
     }
 </script>
 
-<div class="flex h-full w-full flex-row items-center gap-2 rounded border-2 border-black p-4">
-    <input type="text" placeholder="Song & Artist" class="h-full w-3/4 rounded" bind:value={input} />
-    <button class="w-1/4 rounded" onclick={sendSong}>Send</button>
+<div class="bg-lime-500 flex h-full w-full flex-row items-center gap-2 rounded border-2 border-lime-600">
+    <input type="text" placeholder="Song & Artist" class="font-bold outline-none text-white h-[50px] px-4 w-3/4 rounded" bind:value={input} />
+    <button
+        class="shadow-xl hover:scale-105 w-1/4 h-[40px] cursor-pointer bg-lime-600 border-lime-700 font-semibold text-white border-2 i-lucide-check rounded active:scale-90 duration-100"
+        onclick={sendSong}>Add</button
+    >
+    <span class="i-lucide-chevrons-left"></span>
 </div>
diff --git a/frontend/src/lib/components/SuggestionList.svelte b/frontend/src/lib/components/SuggestionList.svelte
index 16cc08c..9c3d650 100644
--- a/frontend/src/lib/components/SuggestionList.svelte
+++ b/frontend/src/lib/components/SuggestionList.svelte
@@ -3,29 +3,39 @@
 
     let { suggestions, roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
 
-    async function vote(amount: number, songId: string) {
+    async function vote(idx: number, amount: number, songId: string) {
+        suggestions[idx].upvote += amount
         await fetch(`/api/song/voting?room=${roomId}&song=${songId}&increment=${amount}`, { method: "POST" })
     }
 </script>
 
 <div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
-    {#each suggestions as sug}
-        <div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-black p-2">
+    {#if suggestions.length == 0}
+        <p>No suggestions yet! Try to add a new one using the <b>Add</b> button</p>
+    {/if}
+
+    {#each suggestions as sug, idx}
+        <div class="shadow-md hover:bg-indigo-400 duration-100 bg-indigo-500 flex h-[80px] w-full flex-row gap-2 rounded border-2 border-indigo-600 p-2">
             <div class="flex w-3/4 flex-row gap-2">
                 <img class="w-[60px] min-w-[60px] rounded" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
-                <h1>{sug.title} - {sug.artist}</h1>
+                <div class="text-white">
+                    <p>{sug.title}</p>
+                    <p>{sug.artist}</p>
+                </div>
             </div>
             <div class="flex w-1/4 flex-row items-center justify-center gap-2">
                 <button
+                    class="grayscale"
                     onclick={() => {
-                        vote(1, sug.uuid)
-                    }}>+1</button
+                        vote(idx, 1, sug.uuid)
+                    }}>👍</button
                 >
-                <p>{sug.upvote}</p>
+                <p class="text-white font-semibold">{sug.upvote}</p>
                 <button
+                    class="hover:scale-150 duration-100"
                     onclick={() => {
-                        vote(-1, sug.uuid)
-                    }}>-1</button
+                        vote(idx, -1, sug.uuid)
+                    }}><div class="rotate-180">👍</div></button
                 >
             </div>
         </div>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
new file mode 100644
index 0000000..16951d0
--- /dev/null
+++ b/frontend/tailwind.config.ts
@@ -0,0 +1,22 @@
+import type { Config } from "tailwindcss"
+const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
+
+export default {
+    content: ["./src/**/*.{html,js,svelte,ts}"],
+
+    theme: {
+        extend: {},
+    },
+
+    plugins: [
+        iconsPlugin({
+            // Select the icon collections you want to use
+            // You can also ignore this option to automatically discover all individual icon packages you have installed
+            // If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
+            collections: getIconCollections(["lucide"]),
+            // If you want to use all icons from @iconify/json, you can do this:
+            // collections: getIconCollections("all"),
+            // and the more recommended way is to use `dynamicIconsPlugin`, see below.
+        }),
+    ],
+} satisfies Config