Dark mode button changes.

espidev · Jul 26, 2023 · d4b4d12 · d4b4d12
1 parent a557f49
commit d4b4d12
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/website/app/collection/albums/[albumId]/page.tsx b/website/app/collection/albums/[albumId]/page.tsx
@@ -110,7 +110,11 @@ export default function CollectionAlbumPage({params} : {params: {albumId: string
             <Typography variant="subtitle2">{trackLength} {suffix} • {totalTime}</Typography>
             <Button 
               variant="outlined"  
-              style={{ width: '5vw', marginTop: '2em' }}
+              style={{
+                width: '5vw',
+                marginTop: '2em',
+                color: appState.theme === "dark" ? "white" : "",
+                borderColor: appState.theme === "dark" ? "white" : "" }}
               onClick={() => {
                 appState.changeQueue(tracks, 0);
                 appState.playCurrentTrack();

diff --git a/website/app/collection/artists/[artistId]/page.tsx b/website/app/collection/artists/[artistId]/page.tsx
@@ -137,7 +137,12 @@ export default function CollectionArtistPage({
             </Typography>
             <Button
               variant="outlined"
-              style={{ width: "5vw", marginTop: "2em"}}
+              style={{
+                width: "5vw",
+                marginTop: "2em",
+                color: appState.theme === "dark" ? "white" : "",
+                borderColor: appState.theme === "dark" ? "white" : ""
+              }}
               onClick={() => {
                 appState.changeQueue(tracks, 0);
                 appState.playCurrentTrack();

diff --git a/website/app/collection/playlists/[playlistId]/page.tsx b/website/app/collection/playlists/[playlistId]/page.tsx
@@ -108,7 +108,12 @@ export default function CollectionPlaylistPage({params} : {params: {playlistId:
             <Typography variant="subtitle2">{tracks.length} {suffix} • {totalTime}</Typography>
             <Button 
               variant="outlined"  
-              style={{ width: '5vw', marginTop: '2em' }}
+              style={{
+                width: "5vw",
+                marginTop: "2em",
+                color: appState.theme === "dark" ? "white" : "",
+                borderColor: appState.theme === "dark" ? "white" : ""
+              }}
               onClick={() => {
                 appState.changeQueue(tracks, 0);
                 appState.playCurrentTrack();

diff --git a/website/app/collection/playlists/page.tsx b/website/app/collection/playlists/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from "react";
+import { use, useEffect, useState } from "react";
 import { apiGetCollectionPlaylists, apiPostCreatePlaylist } from "@/components/apiclient";
 import { useLoginStateContext } from "@/components/loginstateprovider";
 import { useRouter } from "next/navigation";
@@ -9,9 +9,11 @@ import AlertComponent, { AlertEntry } from "@/components/alerts";
 import { Typography, Grid, Modal, TextField, Button, Dialog, DialogTitle, DialogContent, DialogActions } from "@mui/material";
 import PlaylistCard from "@/components/playlistCard";
 import CreatePlaylistDialog from "@/components/createPlaylistDialog";
+import { useAppStateContext } from "@/components/appstateprovider";
 
 export default function CollectionPlaylistsPage() {
   const loginState = useLoginStateContext();
+  const appState = useAppStateContext();
   const router = useRouter();
 
   const [playlists, setPlaylists] = useState([] as APIPlaylist[]);
@@ -74,7 +76,10 @@ export default function CollectionPlaylistsPage() {
       <Grid sx={{ padding: 2 }} container direction="row" justifyContent="space-between">
         <Typography variant="h6">Playlists</Typography>
 
-        <Button variant="outlined" onClick={handleCreatePlaylist}>
+        <Button variant="outlined" onClick={handleCreatePlaylist}
+          sx={{
+            color: appState.theme === "dark" ? "white" : "",
+            borderColor: appState.theme === "dark" ? "white" : ""}}>
           Create Playlist
         </Button>
       </Grid>