rocksky.app
A decentralized music tracking and discovery platform built on AT Protocol 🎵
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
feat: update SongCover component styles and structure for improved layout
+20
-29
apps/web/src/components/SongCover/SongCover.tsx
+20
-29
apps/web/src/components/SongCover/SongCover.tsx
···
7
width: 240px;
8
margin-bottom: 10px;
9
${(props) =>
10
-
props.size &&
11
-
css`
12
height: ${props.size}px;
13
width: ${props.size}px;
14
`}
15
`;
16
17
const SongTitle = styled.div`
18
-
color: #fff;
19
-
font-size: 18px;
20
-
text-decoration-color: rgb(255, 255, 255);
21
text-decoration-line: none;
22
-
text-decoration-style: solid;
23
-
text-decoration-thickness: auto;
24
text-size-adjust: 100%;
25
-
font-weight: 600;
26
font-family: RockfordSansRegular;
27
-
text-shadow: rgba(0, 0, 0, 1) 0px 0px 12px;
28
overflow: hidden;
29
text-overflow: ellipsis;
30
white-space: nowrap;
···
49
max-width: 210px;
50
`;
51
52
-
const Metadata = styled.div`
53
-
position: absolute;
54
-
bottom: 15px;
55
-
padding: 15px;
56
-
`;
57
-
58
const CoverWrapper = styled.div`
59
position: relative;
60
`;
61
62
export type SongCoverProps = {
63
-
cover: string;
64
-
title?: string;
65
-
artist?: string;
66
-
size?: number;
67
};
68
69
function SongCover(props: SongCoverProps) {
70
-
const { title, artist, cover, size } = props;
71
-
return (
72
-
<CoverWrapper>
73
-
<Cover src={cover} size={size} />
74
-
<Metadata>
75
-
<SongTitle>{title}</SongTitle>
76
-
<Artist>{artist}</Artist>
77
-
</Metadata>
78
-
</CoverWrapper>
79
-
);
80
}
81
82
export default SongCover;
···
7
width: 240px;
8
margin-bottom: 10px;
9
${(props) =>
10
+
props.size &&
11
+
css`
12
height: ${props.size}px;
13
width: ${props.size}px;
14
`}
15
`;
16
17
const SongTitle = styled.div`
18
+
font-size: 16px;
19
text-decoration-line: none;
20
text-size-adjust: 100%;
21
+
font-weight: 400;
22
font-family: RockfordSansRegular;
23
overflow: hidden;
24
text-overflow: ellipsis;
25
white-space: nowrap;
···
44
max-width: 210px;
45
`;
46
47
const CoverWrapper = styled.div`
48
position: relative;
49
`;
50
51
export type SongCoverProps = {
52
+
cover: string;
53
+
title?: string;
54
+
artist?: string;
55
+
size?: number;
56
};
57
58
function SongCover(props: SongCoverProps) {
59
+
const { title, artist, cover, size } = props;
60
+
return (
61
+
<CoverWrapper>
62
+
<Cover src={cover} size={size} />
63
+
<div className="mb-[13px]">
64
+
<SongTitle className="!text-[var(--color-text-primary)]">
65
+
{title}
66
+
</SongTitle>
67
+
<Artist>{artist}</Artist>
68
+
</div>
69
+
</CoverWrapper>
70
+
);
71
}
72
73
export default SongCover;
+1
apps/web/src/pages/home/feed/Feed.tsx
+1
apps/web/src/pages/home/feed/Feed.tsx