From 4444db0d4614cd9ebc4e11982a304a96d815567b Mon Sep 17 00:00:00 2001 From: Mathea Liv Date: Thu, 17 Sep 2026 15:39:09 +0200 Subject: [PATCH 1/2] =?UTF-8?q?fargepalett=20og=20typografi=20lagt=20til,?= =?UTF-8?q?=20spacing=20lagt=20til,=20enndret=20st=C3=B8rrelse=20p=C3=A5?= =?UTF-8?q?=20knapper,=20hover=20funksjon=20lagt=20til,=20flyttet=20forrig?= =?UTF-8?q?e/neste=20knapp?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 93 ++++++++++++++++++++++++++++++++++++- src/App.tsx | 19 ++++---- src/components/SongCard.tsx | 4 +- src/components/SongList.tsx | 5 +- 4 files changed, 107 insertions(+), 14 deletions(-) diff --git a/src/App.css b/src/App.css index 393b616..9a78f4b 100644 --- a/src/App.css +++ b/src/App.css @@ -6,7 +6,17 @@ } .app-header { - margin-bottom: 24px; + background-color: #fce4ec; + padding: 24px; + text-align: center; + margin: -24px -24px 24px -24px; +} + +.app-header h1 { + color: #c2185b; + font-family: Georgia, serif; + font-size: 32px; + margin: 0; } .app-content { @@ -27,6 +37,87 @@ min-width: 0; } +.song-controls { + display: flex; + gap: 12px; + margin-bottom: 24px; +} + +.sidebar button, +.sidebar select { + background-color: #fce4ec; + width: 100%; + padding: 8px 12px; + border: none; + cursor: pointer; + transition: background-color 0.2s; + display: inline-flex; + align-items: center; +} + +.sidebar button:hover { + background-color: #f48fb1; +} + +.sidebar button:active { + background-color: #f48fb1; +} + +.sidebar button.active { + background-color: #f48fb1; +} + +.sidebar ul { + list-style: none; + padding: 0; +} + +.sidebar li { + margin-bottom: 8px; +} + +.sidebar > section > div { + margin-bottom: 16px; +} + +.song-controls { + align-items: center; +} + +.song-controls button { + padding: 8px 12px; + border: none; + cursor: pointer; + transition: background-color 0.2s; + display: inline-flex; + align-items: center; +} + +.song-controls nav { + display: flex; + gap: 12px; +} + +.song-controls nav button { + background-color: #e0e0e0; + padding: 8px 16px; +} + +.song-controls nav button:hover { + background-color: #b3b3b3; +} + +.song-controls nav button:active { + background-color: #b3b3b3; +} + +.song-controls nav button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* album image styling removed per user request */ + @media (max-width: 768px) { .app { padding: 16px; diff --git a/src/App.tsx b/src/App.tsx index be860e4..b2f86a7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -51,21 +51,22 @@ function App() {
- handleToggleFavorites(currentSong.id)}/> +
+ handleToggleFavorites(currentSong.id)}/> + setCurrentSongIndex(currentSongIndex - 1)} + onNext={() => setCurrentSongIndex(currentSongIndex + 1)} + /> +
- setCurrentSongIndex(currentSongIndex - 1)} - onNext={() => setCurrentSongIndex(currentSongIndex + 1)} - /> -
diff --git a/src/components/SongCard.tsx b/src/components/SongCard.tsx index 2db4850..ce44d35 100644 --- a/src/components/SongCard.tsx +++ b/src/components/SongCard.tsx @@ -12,8 +12,8 @@ export function SongCard({ song }: SongCardProps) { return (

{song.title}

-

{song.artist}

-

{song.album}

+

Artist: {song.artist}

+

Album: {song.album}

{isLoading ? 'Laster…' : error || data?.error ? 'Fant ingen sangtekst for denne sangen' : data?.lyrics}

diff --git a/src/components/SongList.tsx b/src/components/SongList.tsx index fbfb0b3..8c7d071 100644 --- a/src/components/SongList.tsx +++ b/src/components/SongList.tsx @@ -3,9 +3,10 @@ import type { Song } from '../data/songs' type SongListProps = { songs: Song[] onSelectSong: (song: Song) => void + currentSong: Song } -export function SongList({songs, onSelectSong}: SongListProps) { +export function SongList({songs, onSelectSong, currentSong}: SongListProps) { return (

@@ -15,7 +16,7 @@ export function SongList({songs, onSelectSong}: SongListProps) {