Minimal aesthetic upgrades

frontend/src/lib/components/SuggestionList.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Suggestion } from "$lib/types"
+    import { ThumbsUp, ThumbsDown } from "@lucide/svelte"
 
     let { suggestions = $bindable(), roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
 
@@ -16,26 +17,26 @@
 
     {#each suggestions as sug, idx}
         <div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-indigo-600 bg-indigo-500 p-2 shadow-md duration-100 hover:bg-indigo-400">
-            <div class="flex w-3/4 flex-row gap-2">
+            <div class="flex w-3/4 flex-row gap-2 items-center">
                 <img class="w-[60px] min-w-[60px] rounded" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
-                <div class="text-white">
-                    <p>{sug.title}</p>
+                <div class="text-white flex-col w-fit h-fit">
+                    <b>{sug.title}</b>
                     <p>{sug.artist}</p>
                 </div>
             </div>
             <div class="flex w-1/4 flex-row items-center justify-center gap-2">
                 <button
-                    class="grayscale"
+                    class="text-green-500"
                     onclick={() => {
                         vote(idx, 1, sug.uuid)
-                    }}>👍</button
+                    }}><ThumbsUp /></button
                 >
                 <p class="font-semibold text-white">{sug.upvote}</p>
                 <button
-                    class="duration-100 hover:scale-150"
+                    class="duration-100 hover:scale-150 text-red-500"
                     onclick={() => {
                         vote(idx, -1, sug.uuid)
-                    }}><div class="rotate-180">👍</div></button
+                    }}><ThumbsDown /></button
                 >
             </div>
         </div>

frontend/src/routes/+layout.svelte

@@ -4,6 +4,6 @@
     let { children } = $props()
 </script>
 
-<div class="min-h-screen w-full bg-light-pine-base px-6 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text">
+<div class="min-h-screen w-full bg-light-pine-base px-1 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text">
     {@render children()}
 </div>

frontend/src/routes/room/[id]/+page.svelte

@@ -69,7 +69,7 @@
 {#if returnError}
     <Error {returnError} />
 {:else}
-    <div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
+    <div class="flex w-full flex-col items-center justify-center py-4 px-2 lg:p-10">
         <QueueSlider {queueSongs} {playingIndex} />
         <div class="w-full py-6 lg:w-[30vw]">
             <SuggestionInput roomId={data.roomId} />