From 51be0153d331041acd89dbdf60fb400fa2bc806d Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 21 Sep 2023 17:34:39 -0700
Subject: [PATCH] Adjust fullscreen player styles

- Remove opacity on metadata section
- Add text shadow to metadata text
- Add padding under title
- Uppercase artists and album name
---
 .../components/full-screen-player-image.tsx   | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/renderer/features/player/components/full-screen-player-image.tsx b/src/renderer/features/player/components/full-screen-player-image.tsx
index 870c22a2..77bd98b7 100644
--- a/src/renderer/features/player/components/full-screen-player-image.tsx
+++ b/src/renderer/features/player/components/full-screen-player-image.tsx
@@ -19,18 +19,19 @@ import {
 
 const Image = styled(motion.img)<{ $useAspectRatio: boolean }>`
     position: absolute;
+    max-width: 100%;
     height: 100%;
-    object-fit: ${({ $useAspectRatio }) => ($useAspectRatio ? 'contain' : 'cover')};
-    object-position: 50% 100%;
     filter: drop-shadow(0 0 5px rgb(0 0 0 / 40%)) drop-shadow(0 0 5px rgb(0 0 0 / 40%));
     border-radius: 5px;
-    max-width: 100%;
+    object-fit: ${({ $useAspectRatio }) => ($useAspectRatio ? 'contain' : 'cover')};
+    object-position: 50% 100%;
 `;
 
 const ImageContainer = styled(motion.div)`
     position: relative;
     display: flex;
     align-items: flex-end;
+    justify-content: center;
     max-width: 100%;
     height: 65%;
     aspect-ratio: 1/1;
@@ -43,7 +44,6 @@ interface TransparentMetadataContainer {
 
 const MetadataContainer = styled(Stack)<TransparentMetadataContainer>`
     padding: 1rem;
-    background: rgb(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
     border-radius: 5px;
 
     h1 {
@@ -223,6 +223,10 @@ export const FullScreenPlayerImage = () => {
                     align="center"
                     order={1}
                     overflow="hidden"
+                    pb="0.5rem"
+                    style={{
+                        textShadow: '0 0 5px rgb(0 0 0 / 100%)',
+                    }}
                     w="100%"
                     weight={900}
                 >
@@ -230,14 +234,17 @@ export const FullScreenPlayerImage = () => {
                 </TextTitle>
                 <TextTitle
                     $link
-                    $secondary
                     align="center"
                     component={Link}
-                    order={2}
+                    order={3}
                     overflow="hidden"
+                    style={{
+                        textShadow: '0 0 5px rgb(0 0 0 / 100%)',
+                    }}
                     to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
                         albumId: currentSong?.albumId || '',
                     })}
+                    transform="uppercase"
                     w="100%"
                     weight={600}
                 >
@@ -246,9 +253,12 @@ export const FullScreenPlayerImage = () => {
                 {currentSong?.artists?.map((artist, index) => (
                     <TextTitle
                         key={`fs-artist-${artist.id}`}
-                        $secondary
                         align="center"
-                        order={4}
+                        order={3}
+                        style={{
+                            textShadow: '0 0 5px rgb(0 0 0 / 100%)',
+                        }}
+                        transform="uppercase"
                     >
                         {index > 0 && (
                             <Text
@@ -262,11 +272,14 @@ export const FullScreenPlayerImage = () => {
                         )}
                         <Text
                             $link
-                            $secondary
                             component={Link}
+                            style={{
+                                textShadow: '0 0 5px rgb(0 0 0 / 100%)',
+                            }}
                             to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                                 albumArtistId: artist.id,
                             })}
+                            transform="uppercase"
                             weight={600}
                         >
                             {artist.name}