Styles for homepage

frontend/src/icons/ArrowClockwiseIcon.tsx

@@ -0,0 +1,11 @@
+export function ArrowClockwiseIcon(props: {
+    fill: string,
+    class?: string,
+    size?: number,
+}) {
+    return (
+        <svg class={props.class} width={props.size ?? 32} height={props.size ?? 32} fill={props.fill} viewBox="0 0 256 256">
+            <path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1-5.66-13.66l17-17-10.55-9.65-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,1,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60l10.93,10L226.34,50.3A8,8,0,0,1,240,56Z" />
+        </svg>
+    );
+}

frontend/src/icons/PlayIcon.tsx

@@ -0,0 +1,12 @@
+
+export function PlayIcon(props: {
+    fill: string,
+    class?: string,
+    size?: number,
+}) {
+    return (
+        <svg class={props.class} width={props.size ?? 32} height={props.size ?? 32} fill={props.fill} viewBox="0 0 256 256">
+            <path d="M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z" />
+        </svg>
+    );
+}

frontend/src/index.css

@@ -15,10 +15,15 @@
         --c-on-bg: #09090b;
         --c-border-1: #a1a1aa;
 
+        --c-bg-inversed: rgba(39, 39, 42, 0.75);
+
         --c-primary: #7c3aed;
         --c-on-primary: white;
 
         --c-primary-bg: #f5f3ff;
+        --c-primary-bg-2: #ede9fe;
+        --c-on-primary-bg: #110627;
+
         --c-primary-border: #c4b5fd;
     }
 }

frontend/src/routes/Home.tsx

@@ -2,6 +2,8 @@ import { batch, createEffect, createMemo, createResource, createSignal, onMount
 import { GetAlbumCover, GetRandomAlbums, TriggerAlbumReload } from "../../wailsjs/go/main/App";
 import { main } from "../../wailsjs/go/models";
 import { createStore } from "solid-js/store";
+import { ArrowClockwiseIcon } from "../icons/ArrowClockwiseIcon";
+import { PlayIcon } from "../icons/PlayIcon";
 
 type AlbumsData = {
     status: "loading" | "ok",
@@ -24,7 +26,7 @@ export function Home() {
     });
 
     // Loads the random albums from Go.
-    // This function, when called multiple times, returns the same set.
+    // This function returns the same set when called multiple times.
     const loadAlbums = async() => {
         const response = await GetRandomAlbums();
 
@@ -54,16 +56,16 @@ export function Home() {
 
     return (
         <div class={`min-h-screen ${hidden() ? "opacity-0" : "opacity-100"} transition-opacity`}>
-            <h1 class="font-black text-2xl pt-6 pb-4 pl-2">
-                Random albums
+            <h1 class="font-title font-black text-2xl pt-6 pb-4 pl-2">
+                <span class="text-c-primary">Random albums</span>
                 <button
-                    class="text-xs font-normal mx-1 p-1 rounded underline hover:bg-zinc-900"
+                    class="mx-1 p-1 rounded underline hover:bg-c-primary-bg-2 cursor-pointer"
                     onClick={triggerAlbumReload}
                 >
-                    Reload
+                    <ArrowClockwiseIcon class="h-4 w-4 inline-block" fill="var(--c-primary)" />
                 </button>
             </h1>
-            <div class="pb-4 overflow-scroll whitespace-nowrap">
+            <div class="pb-1 overflow-x-scroll whitespace-nowrap">
                 {els}
             </div>
         </div>
@@ -109,22 +111,30 @@ function Album(props: { albums: Array<main.Album | null>, idx: number }) {
     const imgOpacity = createMemo(() => (imgReady() && !isNull() ? "opacity-100" : "opacity-0"));
 
     return (
-        <div class="inline-block mx-2 p-1 w-32 rounded bg-zinc-900">
-            <div class="w-30 h-30" >
+        <div class="inline-block mx-1 p-1 w-32 rounded bg-c-primary-bg text-c-on-primary-bg
+                hover:shadow hover:bg-c-primary-bg-2 transition-shadow group"
+        >
+            <div class="w-30 h-30 relative" >
                 <img
                     class={`inline-block rounded w-30 h-30 transition-opacity ${imgOpacity()}`}
                     src={imageBase64()}
                     alt=""
                 />
+
+                <button
+                    class="inline-block absolute bottom-1 right-1 bg-[var(--c-bg-inversed)] z-10 cursor-pointer h-8 w-8 rounded-full
+                    hover:bg-c-primary transition-all opacity-0 group-hover:opacity-100"
+                >
+                    <PlayIcon class="inline-block p-2 h-full w-full" fill="var(--c-primary-bg)" />
+                </button>
             </div>
 
-            <div class={`text-sm overflow-hidden overflow-ellipsis pt-1 ${opacity()}`} title={albumName()}>
+            <div class={`font-title font-medium text-sm overflow-hidden overflow-ellipsis pt-1 ${opacity()}`} title={albumName()}>
                 {albumName()}
             </div>
             <div class={`text-xs overflow-hidden overflow-ellipsis ${opacity()}`} title={artistName()}>
                 {artistName()}
             </div>
-
         </div>
     );
 }

frontend/tailwind.config.mjs

@@ -18,6 +18,8 @@ export default {
                 "c-primary": "var(--c-primary)",
                 "c-on-primary": "var(--c-on-primary)",
                 "c-primary-bg": "var(--c-primary-bg)",
+                "c-primary-bg-2": "var(--c-primary-bg-2)",
+                "c-on-primary-bg": "var(--c-on-primary-bg)",
                 "c-primary-border": "var(--c-primary-border)",
             },
         },