Skip to content

Commit 8ea0854

Browse files
javiert-oktajaviert-okta
committed
update library card styling
1 parent 4220dbf commit 8ea0854

File tree

2 files changed

+104
-100
lines changed

2 files changed

+104
-100
lines changed

‎src/features/libraries/components/library-card/library-card..module.scss‎

Lines changed: 61 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,27 @@
44
grid-column: span 1;
55
display: flex;
66
flex-direction: column;
7-
8-
border-radius: 1rem;
9-
border: 1px solid var(--color_border_bold);
7+
background-color: var(--color_bg_layer);
8+
border-radius: 1.5rem;
9+
border: 1px solid var(--color_border_default);
1010
overflow: hidden;
11+
transition: all .3s ease-out;
1112
}
1213

1314
.header {
1415
display: flex;
1516
align-items: center;
16-
gap: 1rem;
17-
padding: 1rem 1.5rem;
18-
color: var(--color_fg_bold);
19-
20-
font-size: 1rem;
17+
gap: .5rem;
18+
padding: 1rem;
2119
font-style: normal;
22-
line-height: 1.25rem;
2320

24-
border-bottom: 1px solid var(--color_border_bold);
25-
background: var(--color_bg_layer_alternate);
21+
span {
22+
color: var(--color_fg_bold);
23+
font-size: .875rem;
24+
font-family: var(--font-primary);
25+
line-height: 1.35;
26+
font-weight: 700;
27+
}
2628
}
2729

2830
.logo {
@@ -34,20 +36,16 @@
3436

3537
.content {
3638
display: grid;
37-
grid-template-columns: repeat(2, 1fr);
38-
padding: 1.5rem;
39-
border-bottom: 1px solid var(--color_border_bold);
40-
background: var(--color_bg_layer_alternate);
39+
grid-template-columns: repeat(2,1fr);
40+
padding: 1.5rem 1.5rem 2.5rem;
4141
}
4242

4343
.minVersion {
44-
grid-column: 1 / -1;
45-
background-color: var(--color_bg_state_caution_subtle);
44+
grid-column: 1/-1;
4645
color: var(--color_fg_on_state_caution_subtle);
47-
padding: 0.5rem 1.5rem;
48-
text-transform: uppercase;
49-
font-size: 0.75rem;
50-
letter-spacing: 0.2px;
46+
padding: 1rem;
47+
font-size: .875rem;
48+
letter-spacing: .2px;
5149
display: flex;
5250
justify-content: space-between;
5351
}
@@ -63,47 +61,52 @@
6361
display: flex;
6462
flex-direction: column;
6563
list-style-type: none;
66-
gap: 0.75rem;
64+
gap: 0.5rem;
65+
66+
& svg {
67+
width: 1.25rem;
68+
height: 1.25rem;
69+
}
6770

6871
& li {
69-
height: 1.5rem;
72+
height: 1.25rem;
7073

7174
code {
72-
padding: 1px 0.125rem;
73-
border-radius: 0.125rem;
74-
color: var(--color_code_dark_blue);
75-
background-color: var(--color_bg_layer_bold);
76-
font-size: 0.875rem;
75+
padding: .125rem .25rem;
76+
border-radius: .5rem;
77+
color: var(--color_fg_bold);
78+
background-color: var(--color_bg_layer_alternate);
79+
box-shadow: 0 0 0 .5px rgba(0,0,0,.12),0 2px 2px -1px rgba(0,0,0,.04),0 4px 4px -2px rgba(0,0,0,.04);
80+
font-size: .75rem;
7781
font-style: normal;
7882
font-weight: 500;
79-
line-height: 1.25rem; /* 142.857% */
83+
line-height: 1.5;
8084
}
8185
}
8286
}
8387

84-
.listItem {
88+
.listItem, .metadata {
8589
display: flex;
8690
align-items: center;
87-
gap: 0.5rem;
8891
color: var(--color_fg_default);
92+
font-size: .875rem;
93+
font-weight: 500;
94+
}
95+
96+
.listItem {
97+
gap: 0.5rem;
8998
}
9099

91100
.metadata {
92-
display: flex;
93-
align-items: center;
94101
justify-content: space-between;
95-
padding: 1.25rem 1.5rem;
96-
97-
border-bottom: 1px solid var(--color_border_bold);
102+
padding: .5rem;
103+
width: calc(100% - 1rem);
104+
margin: 0 auto;
105+
border-radius: .5rem;
98106
background: var(--color_bg_layer_alternate);
99-
100-
color: var(--color_fg_default);
101-
font-size: 0.75rem;
102107
font-style: normal;
103-
font-weight: 500;
104108
line-height: 140%;
105-
letter-spacing: 0.18px;
106-
white-space: nowrap;
109+
letter-spacing: .18px;
107110

108111
svg {
109112
path {
@@ -125,7 +128,7 @@
125128

126129
.repo {
127130
display: flex;
128-
gap: 1rem;
131+
gap: 0.5rem;
129132
}
130133

131134
.repo__stars {
@@ -139,23 +142,24 @@
139142
display: flex;
140143
align-items: center;
141144
line-height: 0;
142-
gap: 0.25rem;
145+
padding: .25rem .5rem;
146+
border-radius: 9999px;
147+
transition: all .2s ease-out;
143148
}
144149

145150
.command {
146-
flex: 1;
147151
display: flex;
148152
flex-direction: column;
149-
padding: 1.5rem;
150-
151-
background: var(--color_bg_code-editor);
152-
color: var(--color_code_inverse);
153-
text-wrap: wrap;
154-
overflow: hidden;
155-
word-break: break-word;
156-
157-
font-size: 0.75rem;
158-
font-style: normal;
159-
font-weight: 500;
160-
line-height: 1.25rem;
153+
padding: 1rem 1.5rem;
154+
border-bottom: 1px solid var(--color_border_bold);
155+
p {
156+
color: var(--color_fg_bold);
157+
text-wrap: wrap;
158+
overflow: hidden;
159+
word-break: break-word;
160+
font-size: .75rem;
161+
font-style: normal;
162+
font-weight: 300;
163+
line-height: 1.5;
164+
}
161165
}

‎src/features/libraries/components/library-card/library-card.component.tsx‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,48 @@ export const LibraryCardComponent: React.FC<LibraryCardComponentProps> = ({
117117
<span className={getLocalizedSecondaryFont(languageCode)}>
118118
{library.gitHubRepoPath || library.altRepoPath || name}
119119
</span>
120+
</div>
121+
<div className={styles.metadata}>
122+
{authorUrl ? (
123+
<Link
124+
href={authorUrl}
125+
target="_blank"
126+
rel="noopener noreferrer"
127+
className={styles.author}
128+
>
129+
<div className={styles.author__name}>
130+
<UserIconComponent />
131+
<span>{authorName}</span>
132+
</div>
133+
</Link>
134+
) : (
135+
<div className={styles.author}>
136+
<div className={styles.author__name}>
137+
<UserIconComponent />
138+
<span>{authorName}</span>
139+
</div>
140+
</div>
141+
)}
142+
<div className={styles.repo}>
143+
{support && (
144+
<div className={styles.repo__stars}>
145+
<StarIconComponent />
146+
<span>{stars}</span>
147+
</div>
148+
)}
149+
<a
150+
className={styles.repo__url}
151+
href={repoUrl}
152+
target="_blank"
153+
rel="noreferrer noopener"
154+
>
155+
<GithubIconComponent />
156+
<span>{dictionary.viewRepo.label}</span>
157+
</a>
158+
</div>
159+
</div>
160+
<div className={clsx(styles.command, MonoFont.className)}>
161+
<ReactMarkdown rehypePlugins={[rehypeRaw]}>{command}</ReactMarkdown>
120162
</div>
121163
<div className={styles.content}>
122164
<ul className={styles.config}>
@@ -187,47 +229,8 @@ export const LibraryCardComponent: React.FC<LibraryCardComponentProps> = ({
187229
<AlgItemComponent label="EdDSA" isSupported={support.eddsa} />
188230
</ul>
189231
</div>
190-
<div className={styles.metadata}>
191-
{authorUrl ? (
192-
<Link
193-
href={authorUrl}
194-
target="_blank"
195-
rel="noopener noreferrer"
196-
className={styles.author}
197-
>
198-
<div className={styles.author__name}>
199-
<UserIconComponent />
200-
<span>{authorName}</span>
201-
</div>
202-
</Link>
203-
) : (
204-
<div className={styles.author}>
205-
<div className={styles.author__name}>
206-
<UserIconComponent />
207-
<span>{authorName}</span>
208-
</div>
209-
</div>
210-
)}
211-
<div className={styles.repo}>
212-
{support && (
213-
<div className={styles.repo__stars}>
214-
<StarIconComponent />
215-
<span>{stars}</span>
216-
</div>
217-
)}
218-
<a
219-
className={styles.repo__url}
220-
href={repoUrl}
221-
target="_blank"
222-
rel="noreferrer noopener"
223-
>
224-
<GithubIconComponent />
225-
<span>{dictionary.viewRepo.label}</span>
226-
</a>
227-
</div>
228-
</div>
229232
{minimumVersion && (
230-
<div className={clsx(styles.minVersion, MonoFont.className)}>
233+
<div className={styles.minVersion}>
231234
<span>{`${dictionary.minimumVersion.label} ${minimumVersion}`}</span>
232235
<Link
233236
target="_blank"
@@ -239,9 +242,6 @@ export const LibraryCardComponent: React.FC<LibraryCardComponentProps> = ({
239242
</Link>
240243
</div>
241244
)}
242-
<div className={clsx(styles.command, MonoFont.className)}>
243-
<ReactMarkdown rehypePlugins={[rehypeRaw]}>{command}</ReactMarkdown>
244-
</div>
245245
</div>
246246
);
247247
};

0 commit comments

Comments
 (0)