Fix styling on unsync lyrics

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;
 `;
 

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>
   );
 };