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 (