diff --git a/src/app/modal.module.css b/src/app/modal.module.css index 83af476..e123e09 100644 --- a/src/app/modal.module.css +++ b/src/app/modal.module.css @@ -1,18 +1,29 @@ .modal { + width: 100%; + height: 100%; + background: none; + border: none; +} + +.modal::backdrop { + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(10px); +} + +.container { + position: fixed; width: 90%; height: 90%; margin-left: 5%; margin-right: 5%; top: 5%; + border-style: solid; border-width: 1px; border-color: black; padding: 20px; border-radius: 20px; -} - -.modal::backdrop { - background: rgba(0, 0, 0, 0.6); - backdrop-filter: blur(10px); + background-color: white; + overflow: auto; } .header { diff --git a/src/app/modal.tsx b/src/app/modal.tsx index 692eb3a..5afb9a2 100644 --- a/src/app/modal.tsx +++ b/src/app/modal.tsx @@ -7,6 +7,7 @@ import { ReactNode, MouseEvent, } from "react"; +import { ToastContainer } from "react-toastify"; import styles from "./modal.module.css"; interface Props { @@ -55,17 +56,31 @@ export default function Modal({ title, children, isOpen, handleClose }: Props) { onClose={handleClose} onClick={handleClickOutside} > -
-
-

{title}

-
-
- +
+
+
+

{title}

+
+
+ +
+ {children}
- {children} + ); } diff --git a/src/app/search.tsx b/src/app/search.tsx index 3bc2d3b..d117269 100644 --- a/src/app/search.tsx +++ b/src/app/search.tsx @@ -3,7 +3,7 @@ import { useEffect, useState, FormEvent } from "react"; import { useRouter } from "next/navigation"; import * as Spotify from "spotify-api.js"; -import { ToastContainer, toast } from "react-toastify"; +import { toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import { pushTrack, searchTracks } from "./actions"; import { TrackHeader, TrackItem } from "./track_list"; @@ -38,13 +38,33 @@ export default function Search() { }, [query]); async function onTrackClick(track: Spotify.Track) { + const toastId = toast.info(`Adding "${track.name}"...`, { + autoClose: false, + closeButton: false, + draggable: false, + }); const success = await pushTrack(track.uri); - if (success) { - toast.success("Song added"); - router.refresh(); - } else { - toast.error("Failed to add song"); - } + + setTimeout(() => { + if (success) { + toast.update(toastId, { + render: `"${track.name}" added`, + type: toast.TYPE.SUCCESS, + autoClose: 2000, + closeButton: true, + draggable: false, + }); + router.refresh(); + } else { + toast.update(toastId, { + render: `Failed to add "${track.name}"`, + type: toast.TYPE.ERROR, + autoClose: 2000, + closeButton: true, + draggable: false, + }); + } + }, 500); } function onSubmit(event: FormEvent) { @@ -79,18 +99,6 @@ export default function Search() { )} - ); }