From 5877b8cc6f7cb5c23bcb42f0f356b4772c5ebeae Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 13 Jun 2023 18:38:55 -0700
Subject: [PATCH] Fix feature carousel dynamic styles

---
 .../components/feature-carousel/index.tsx     | 85 +++++++++----------
 1 file changed, 42 insertions(+), 43 deletions(-)

diff --git a/src/renderer/components/feature-carousel/index.tsx b/src/renderer/components/feature-carousel/index.tsx
index a4df9112..78e5a1a7 100644
--- a/src/renderer/components/feature-carousel/index.tsx
+++ b/src/renderer/components/feature-carousel/index.tsx
@@ -171,10 +171,10 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                 >
                   <TitleWrapper>
                     <TextTitle
-                      lh="5rem"
+                      lh="3.5rem"
                       order={1}
                       overflow="hidden"
-                      sx={{ fontSize: '4rem' }}
+                      sx={{ fontSize: '3.5rem' }}
                       weight={900}
                     >
                       {currentItem?.name}
@@ -203,6 +203,46 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                     <Badge size="lg">{currentItem?.releaseYear}</Badge>
                     <Badge size="lg">{currentItem?.songCount} tracks</Badge>
                   </Group>
+                  <Group position="apart">
+                    <Button
+                      size="lg"
+                      style={{ borderRadius: '5rem' }}
+                      variant="outline"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (!currentItem) return;
+
+                        handlePlayQueueAdd?.({
+                          byItemType: {
+                            id: [currentItem.id],
+                            type: LibraryItem.ALBUM,
+                          },
+                          playType: Play.NOW,
+                        });
+                      }}
+                    >
+                      Play
+                    </Button>
+                    <Group spacing="sm">
+                      <Button
+                        radius="lg"
+                        size="sm"
+                        variant="outline"
+                        onClick={handlePrevious}
+                      >
+                        <RiArrowLeftSLine size="2rem" />
+                      </Button>
+                      <Button
+                        radius="lg"
+                        size="sm"
+                        variant="outline"
+                        onClick={handleNext}
+                      >
+                        <RiArrowRightSLine size="2rem" />
+                      </Button>
+                    </Group>
+                  </Group>
                 </Stack>
               </InfoColumn>
             </Grid>
@@ -214,47 +254,6 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
           </Carousel>
         )}
       </AnimatePresence>
-      <Group
-        spacing="sm"
-        sx={{ bottom: '1rem', position: 'absolute', right: '1rem', zIndex: 20 }}
-      >
-        <Button
-          radius="lg"
-          size="md"
-          variant="outline"
-          onClick={handlePrevious}
-        >
-          <RiArrowLeftSLine size="2rem" />
-        </Button>
-        <Button
-          radius="lg"
-          size="md"
-          variant="outline"
-          onClick={handleNext}
-        >
-          <RiArrowRightSLine size="2rem" />
-        </Button>
-        <Button
-          radius="lg"
-          size="md"
-          variant="outline"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (!currentItem) return;
-
-            handlePlayQueueAdd?.({
-              byItemType: {
-                id: [currentItem.id],
-                type: LibraryItem.ALBUM,
-              },
-              playType: Play.NOW,
-            });
-          }}
-        >
-          Play
-        </Button>
-      </Group>
     </Wrapper>
   );
 };