16-styling-og-visuelt-uttrykk-1

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;

src/App.tsx

@@ -51,21 +51,22 @@ function App() {
       <section className='app-content'>
         <aside className='sidebar'>
           <FilterSortBar selectedAlbum={selectedAlbum} onAlbumChange={handleAlbumChange} sortBy={sortBy} onSortByChange={handleSortByChange}/>
-          <SongList songs={sortedSongs} onSelectSong={handleSelectSong} />
+          <SongList songs={sortedSongs} onSelectSong={handleSelectSong} currentSong={currentSong} />
         </aside>
 
         <section className='song-section' aria-label='Valgt sang'>
-          <FavoriteButton isFavorite={favorites.includes(currentSong.id)} onToggle={() => handleToggleFavorites(currentSong.id)}/>
+          <div className='song-controls'>
+            <FavoriteButton isFavorite={favorites.includes(currentSong.id)} onToggle={() => handleToggleFavorites(currentSong.id)}/>
+            <Navigation 
+              isFirst={currentSongIndex == 0} 
+              isLast={currentSongIndex == sortedSongs.length - 1}
+              onPrevious={() => setCurrentSongIndex(currentSongIndex - 1)}
+              onNext={() => setCurrentSongIndex(currentSongIndex + 1)}
+            />
+          </div>
 
           <SongCard song={currentSong} />
 
-          <Navigation 
-            isFirst={currentSongIndex == 0} 
-            isLast={currentSongIndex == sortedSongs.length - 1}
-            onPrevious={() => setCurrentSongIndex(currentSongIndex - 1)}
-            onNext={() => setCurrentSongIndex(currentSongIndex + 1)}
-          />
-
         </section>
 
       </section>

src/components/SongCard.tsx

@@ -12,8 +12,8 @@ export function SongCard({ song }: SongCardProps) {
   return (
     <article>
       <h2>{song.title}</h2>
-      <p>{song.artist}</p>
-      <p>{song.album}</p>
+      <p>Artist: {song.artist}</p>
+      <p>Album: {song.album}</p>
 
       <div>
         <p>{isLoading ? 'Laster…' : error || data?.error ? 'Fant ingen sangtekst for denne sangen' : data?.lyrics}</p>

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 (
     <section aria-labelledby='song-list-heading'>
       <h2 id="song-list-heading">
@@ -15,7 +16,7 @@ export function SongList({songs, onSelectSong}: SongListProps) {
       <ul>
         {songs.map((song) => (
           <li key={song.id}>
-            <button type='button' onClick={() => onSelectSong(song)}>
+            <button type='button' onClick={() => onSelectSong(song)} className={song.id === currentSong.id ? 'active' : ''}>
               {song.title} - {song.artist}
             </button>
           </li>