From 190dd71b3c1f29c89bffae0700cc0c873768b18a Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 4 Jun 2023 16:19:13 -0700
Subject: [PATCH] Fix styling on unsync lyrics

---
 src/renderer/features/lyrics/lyric-line.tsx    |  4 ++++
 .../features/lyrics/unsynchronized-lyrics.tsx  | 18 ++++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/renderer/features/lyrics/lyric-line.tsx b/src/renderer/features/lyrics/lyric-line.tsx
index 2fdd56a5..5a5a23d2 100644
--- a/src/renderer/features/lyrics/lyric-line.tsx
+++ b/src/renderer/features/lyrics/lyric-line.tsx
@@ -20,6 +20,10 @@ const StyledText = styled(TextTitle)`
     opacity: 1;
   }
 
+  &.active.unsynchronized {
+    opacity: 0.8;
+  }
+
   transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 `;
 
diff --git a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
index eb93b417..3276785c 100644
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Text } from '/@/renderer/components';
+import styled from 'styled-components';
 import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
 
 interface UnsynchronizedLyricsProps {
@@ -7,21 +7,31 @@ interface UnsynchronizedLyricsProps {
   source: string | null;
 }
 
+const UnsynchronizedLyricsContainer = styled.div`
+  padding: 5rem 0;
+`;
+
 export const UnsynchronizedLyrics = ({ lyrics, source }: UnsynchronizedLyricsProps) => {
   const lines = useMemo(() => {
     return lyrics.split('\n');
   }, [lyrics]);
 
   return (
-    <div className="unsynchronized-lyrics">
-      {source && <Text $noSelect>Lyrics provided by {source}</Text>}
+    <UnsynchronizedLyricsContainer className="unsynchronized-lyrics">
+      {source && (
+        <LyricLine
+          className="lyric-credit"
+          text={`Lyrics provided by ${source}`}
+        />
+      )}
       {lines.map((text, idx) => (
         <LyricLine
           key={idx}
+          className="unsynchronized active"
           id={`lyric-${idx}`}
           text={text}
         />
       ))}
-    </div>
+    </UnsynchronizedLyricsContainer>
   );
 };