From 9bad9fbefbc9c961585db30f2cb57774d467015b Mon Sep 17 00:00:00 2001
From: Tsiry Sandratraina <tsirysndr>
Date: Tue, 23 Sep 2025 20:13:40 +0300
Subject: [PATCH] feat: update SongCover component styles and structure for
 improved layout

---
 .../src/components/SongCover/SongCover.tsx    | 49 ++++++++-----------
 apps/web/src/pages/home/feed/Feed.tsx         |  1 +
 2 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/components/SongCover/SongCover.tsx b/apps/web/src/components/SongCover/SongCover.tsx
index 5c435e01..2c00ced1 100644
--- a/apps/web/src/components/SongCover/SongCover.tsx
+++ b/apps/web/src/components/SongCover/SongCover.tsx
@@ -7,24 +7,19 @@ const Cover = styled.img<{ size?: number }>`
   width: 240px;
   margin-bottom: 10px;
   ${(props) =>
-    props.size &&
-    css`
+		props.size &&
+		css`
       height: ${props.size}px;
       width: ${props.size}px;
     `}
 `;
 
 const SongTitle = styled.div`
-  color: #fff;
-  font-size: 18px;
-  text-decoration-color: rgb(255, 255, 255);
+  font-size: 16px;
   text-decoration-line: none;
-  text-decoration-style: solid;
-  text-decoration-thickness: auto;
   text-size-adjust: 100%;
-  font-weight: 600;
+  font-weight: 400;
   font-family: RockfordSansRegular;
-  text-shadow: rgba(0, 0, 0, 1) 0px 0px 12px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -49,34 +44,30 @@ const Artist = styled.div`
   max-width: 210px;
 `;
 
-const Metadata = styled.div`
-  position: absolute;
-  bottom: 15px;
-  padding: 15px;
-`;
-
 const CoverWrapper = styled.div`
   position: relative;
 `;
 
 export type SongCoverProps = {
-  cover: string;
-  title?: string;
-  artist?: string;
-  size?: number;
+	cover: string;
+	title?: string;
+	artist?: string;
+	size?: number;
 };
 
 function SongCover(props: SongCoverProps) {
-  const { title, artist, cover, size } = props;
-  return (
-    <CoverWrapper>
-      <Cover src={cover} size={size} />
-      <Metadata>
-        <SongTitle>{title}</SongTitle>
-        <Artist>{artist}</Artist>
-      </Metadata>
-    </CoverWrapper>
-  );
+	const { title, artist, cover, size } = props;
+	return (
+		<CoverWrapper>
+			<Cover src={cover} size={size} />
+			<div className="mb-[13px]">
+				<SongTitle className="!text-[var(--color-text-primary)]">
+					{title}
+				</SongTitle>
+				<Artist>{artist}</Artist>
+			</div>
+		</CoverWrapper>
+	);
 }
 
 export default SongCover;
diff --git a/apps/web/src/pages/home/feed/Feed.tsx b/apps/web/src/pages/home/feed/Feed.tsx
index e1dc10a1..49d81bde 100644
--- a/apps/web/src/pages/home/feed/Feed.tsx
+++ b/apps/web/src/pages/home/feed/Feed.tsx
@@ -83,6 +83,7 @@ function Feed() {
 											did: song.uri?.split("at://")[1]?.split("/")[0] || "",
 											rkey: song.uri?.split("/").pop() || "",
 										}}
+										className="no-underline text-[var(--color-text-primary)]"
 									>
 										<SongCover
 											cover={song.cover}
-- 
2.51.2