diff --git a/frontend/src/icons/ArrowClockwiseIcon.tsx b/frontend/src/icons/ArrowClockwiseIcon.tsx new file mode 100644 index 0000000..31dc779 --- /dev/null +++ b/frontend/src/icons/ArrowClockwiseIcon.tsx @@ -0,0 +1,11 @@ +export function ArrowClockwiseIcon(props: { + fill: string, + class?: string, + size?: number, +}) { + return ( + + + + ); +} diff --git a/frontend/src/icons/PlayIcon.tsx b/frontend/src/icons/PlayIcon.tsx new file mode 100644 index 0000000..6ff5cbd --- /dev/null +++ b/frontend/src/icons/PlayIcon.tsx @@ -0,0 +1,12 @@ + +export function PlayIcon(props: { + fill: string, + class?: string, + size?: number, +}) { + return ( + + + + ); +} diff --git a/frontend/src/index.css b/frontend/src/index.css index 60417c1..4996b1e 100644 --- a/frontend/src/index.css +++ b/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; } } diff --git a/frontend/src/routes/Home.tsx b/frontend/src/routes/Home.tsx index 88e3373..5b223bd 100644 --- a/frontend/src/routes/Home.tsx +++ b/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 (
-

- Random albums +

+ Random albums

-
+
{els}
@@ -109,22 +111,30 @@ function Album(props: { albums: Array, idx: number }) { const imgOpacity = createMemo(() => (imgReady() && !isNull() ? "opacity-100" : "opacity-0")); return ( -
-
+
+
+ +
-
+
{albumName()}
{artistName()}
-
); } diff --git a/frontend/tailwind.config.mjs b/frontend/tailwind.config.mjs index 4ba38ed..c49532f 100644 --- a/frontend/tailwind.config.mjs +++ b/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)", }, },