[feature] fix light theme issues

This commit is contained in:
MathieuG-P
2024-07-01 20:54:10 +02:00
parent 65bf528a11
commit 517db1d056
3 changed files with 8 additions and 8 deletions
@@ -90,7 +90,7 @@ export const LocalPlaylistDetailsModal: ModalComponent<void, Props> = ({resolver
return (
<div className="grow flex justify-center items-center flex-col">
<BsmImage image={BeatConflict} className="size-28"/>
<div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
<div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
<p>{t("playlist.playlist-contain-no-maps")}</p>
</div>
</div>
@@ -101,7 +101,7 @@ export const LocalPlaylistDetailsModal: ModalComponent<void, Props> = ({resolver
return (
<div className="grow flex justify-center items-center flex-col">
<BsmImage image={BeatConflict} className="size-28"/>
<div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
<div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
<p>{t("playlist.no-map-installed-for-playlist")}</p>
<BsmButton withBar={false} onClick={installPlaylist} className="rounded-md h-8 flex items-center justify-center px-4" typeColor="primary" text="playlist.download-maps"/>
</div>
@@ -113,7 +113,7 @@ export const LocalPlaylistDetailsModal: ModalComponent<void, Props> = ({resolver
return (
<div className="grow flex justify-center items-center flex-col">
<BsmImage image={BeatConflict} className="size-28"/>
<div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
<div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center -translate-y-5">
<p>{t("playlist.playlist-is-waiting-to-download")}</p>
</div>
</div>
@@ -46,7 +46,7 @@ export function PlaylistDetailsTemplate({title, imagebase64, imageUrl, author, d
})();
return (
<div className="flex flex-col w-screen max-w-2xl h-screen max-h-[calc(100vh-1.25rem)] translate-y-2.5 bg-main-color-1 rounded-t-lg overflow-hidden">
<div className="flex flex-col w-screen max-w-2xl h-screen max-h-[calc(100vh-1.25rem)] translate-y-2.5 bg-theme-1 rounded-t-lg overflow-hidden">
<header className="shrink-0 relative h-36 overflow-hidden flex flex-row p-3">
<button className="absolute top-2 right-2 z-[1]" onClickCapture={onClose}>
<CrossIcon className="size-3.5 text-gray-200"/>
@@ -27,7 +27,7 @@ export function PlaylistHeaderState({isPlaylistInQueue$, isPlaylistDownloading$,
return (
<>
<BsmImage image={BeatConflict} className="size-24"/>
<div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
<div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
<p>{t("playlist.playlist-is-downloading")}</p>
</div>
</>
@@ -38,7 +38,7 @@ export function PlaylistHeaderState({isPlaylistInQueue$, isPlaylistDownloading$,
return (
<>
<BsmImage image={BeatConflict} className="size-24"/>
<div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
<div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
<p>{t("playlist.playlist-is-waiting-to-download")}</p>
</div>
</>
@@ -48,7 +48,7 @@ export function PlaylistHeaderState({isPlaylistInQueue$, isPlaylistDownloading$,
return (
<>
<BsmImage image={BeatConflict} className="size-24"/>
<div className="text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
<div className="dark:text-white font-bold w-fit space-y-1.5 flex flex-col justify-center items-center">
<p>{t("playlist.some-playlist-maps-are-missing")}</p>
<BsmButton withBar={false} onClick={installPlaylist} className="rounded-md h-8 flex items-center justify-center px-4" typeColor="primary" text="playlist.download-missing-maps"/>
</div>
@@ -65,7 +65,7 @@ export function PlaylistHeaderState({isPlaylistInQueue$, isPlaylistDownloading$,
transition={{delay: .25, duration: .25}}
className="shrink-0 w-full text-center overflow-hidden flex justify-center items-center"
>
<div className="size-[calc(100%-1rem)] bg-main-color-2 rounded-md translate-y-1.5 flex flex-row justify-center items-center gap-3">
<div className="size-[calc(100%-1rem)] bg-theme-2 rounded-md translate-y-1.5 flex flex-row justify-center items-center gap-3 ">
{renderHeaderContent()}
</div>
</motion.div>}