Skip to content

Commit 6b49c24

Browse files
leo95oliveiraleo95oliveira
authored
Merge pull request #49 from code4rena-dev/leo95oliveira/contest-tile-tags
Contest Tag style fixes
2 parents f622063 + 9291c8e commit 6b49c24

File tree

6 files changed

+42
-38
lines changed

6 files changed

+42
-38
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@code4rena/components-library",
3-
"version": "3.1.0",
3+
"version": "3.1.1",
44
"description": "Code4rena's official components library ",
55
"types": "./dist/lib.d.ts",
66
"exports": {

‎src/lib/ContestTile/CompactTemplate.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ const IsContest = ({title, isDarkTile = true, contestData, sponsorUrl, sponsorIm
150150
<p className="amount">{amount}</p>
151151
</div>
152152
{((hasBotRace && contestTimelineObject && (contestTimelineObject.botRaceStatus === Status.UPCOMING ||
153-
contestTimelineObject.botRaceStatus === Status.LIVE)) || ecosystem || languages?.length > 0) && <div className="tags">
153+
contestTimelineObject.botRaceStatus === Status.LIVE)) || ecosystem || (languages && languages.length > 0)) && <div className="tags">
154154
{hasBotRace && contestTimelineObject &&
155155
(contestTimelineObject.botRaceStatus === Status.UPCOMING ||
156156
contestTimelineObject.botRaceStatus === Status.LIVE) && (
@@ -233,7 +233,7 @@ const IsBounty = ({title, isDarkTile = true, bountyData, sponsorUrl, sponsorImag
233233
<strong>Max Bounty</strong>
234234
<p className="amount">{amount}</p>
235235
</div>
236-
{(ecosystem || languages?.length > 0) && <div className="tags">
236+
{(ecosystem || (languages && languages.length > 0)) && <div className="tags">
237237
{ecosystem && <Tag
238238
variant={isDarkTile ? TagVariant.DEFAULT : TagVariant.WHITE_OUTLINE}
239239
label={ecosystem}

‎src/lib/ContestTile/ContestTile.scss

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -438,35 +438,37 @@
438438
}
439439

440440
.tags {
441-
padding: 0.24rem 0.5rem 0.5rem;
441+
padding: 0.25rem 0.5rem 0.5rem;
442442
display: flex;
443443
flex-direction: row;
444444
gap: 0.5rem;
445445
flex-wrap: wrap;
446446

447-
img {
448-
width: 0.75rem !important;
449-
height: 0.75rem !important;
450-
}
447+
.c4tag {
448+
height: 1.75rem;
451449

452-
.icon {
453-
svg {
454-
min-width: 1.125rem;
455-
min-height: 1.125rem;
456-
width: 1.125rem;
457-
height: 1.125rem;
450+
img {
451+
width: 0.75rem !important;
452+
height: 0.75rem !important;
458453
}
459-
}
460454

455+
.icon {
456+
svg {
457+
min-width: 1.125rem;
458+
min-height: 1.125rem;
459+
width: 1.125rem;
460+
height: 1.125rem;
461+
}
462+
}
461463

462-
.separator {
463-
height: 26px;
464-
}
465464

466-
p {
467-
padding-top: 5px;
468-
padding-bottom: 5px;
469-
font-size: 0.75rem !important;
465+
.separator {
466+
height: 26px;
467+
}
468+
469+
p {
470+
font-size: 0.75rem !important;
471+
}
470472
}
471473
}
472474

‎src/lib/ContestTile/ContestTile.types.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ export interface BountyTileData {
4343
/** Absolute url to the bounty's source code. */
4444
repoUrl: string;
4545
/** Ecosystem being deployed to for the current contest. */
46-
ecosystem: ContestEcosystem;
46+
ecosystem?: ContestEcosystem;
4747
/** Coding language for the current contest. */
48-
languages: CodingLanguage[];
48+
languages?: CodingLanguage[];
4949
/** Callback function to be triggered on bounty time/status changes. */
5050
updateBountyStatus?: () => void;
5151
}
@@ -66,9 +66,9 @@ export interface ContestTileData {
6666
/** Absolute url to the contest's findings. */
6767
botFindingsRepo?: string;
6868
/** Ecosystem being deployed to for the current contest. */
69-
ecosystem: ContestEcosystem;
69+
ecosystem?: ContestEcosystem;
7070
/** Coding language for the current contest. */
71-
languages: CodingLanguage[];
71+
languages?: CodingLanguage[];
7272
/** Reward pool for the current contest. */
7373
amount: string;
7474
/** Callback function to be triggered on contest time/status changes. */

‎src/lib/ContestTile/DefaultTemplate.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,7 @@ function IsContest({
310310
{((hasBotRace && contestTimelineObject && (contestTimelineObject.botRaceStatus === Status.UPCOMING ||
311311
contestTimelineObject.botRaceStatus === Status.LIVE))
312312
|| ecosystem
313-
|| languages?.length > 0) && <div className="tags">
313+
|| (languages && languages.length > 0)) && <div className="tags">
314314
{hasBotRace && contestTimelineObject &&
315315
(contestTimelineObject.botRaceStatus === Status.UPCOMING ||
316316
contestTimelineObject.botRaceStatus === Status.LIVE) && (
@@ -449,7 +449,7 @@ function IsBounty({
449449
{/* Contest description */}
450450
<p className="description">
451451
{description}
452-
{(ecosystem || languages?.length > 0) && <div className="tags">
452+
{(ecosystem || (languages && languages.length > 0)) && <div className="tags">
453453
{ecosystem && <Tag
454454
variant={isDarkTile ? TagVariant.DEFAULT : TagVariant.WHITE_OUTLINE}
455455
label={ecosystem}

‎src/lib/Tag/Tag.scss

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "../../styles/variables";
22

33
.c4tag, .tag--default {
4-
height: fit-content;
4+
height: 2rem;
55
width: fit-content;
66
font-family: $font__default;
77
font-size: 1rem;
@@ -19,18 +19,18 @@
1919
background: $color__n-80;
2020

2121
.separator {
22-
height: 30px;
22+
height: 32px;
2323
width: 1px;
2424
background: $color__n-40;
2525
border: 0px;
2626
}
2727

2828
img {
29-
margin: $spacing__xs 0 $spacing__xs 0.5rem;
29+
margin-left: 0.5rem;
3030
}
3131

3232
.icon {
33-
padding: $spacing__xs 0 $spacing__xs 0.5rem;
33+
padding-left: 0.5rem;
3434

3535
svg {
3636
display: block;
@@ -43,33 +43,35 @@
4343

4444
p {
4545
margin: 0;
46-
padding: $spacing__xs 0.75rem $spacing__xs 0;
47-
line-height: normal;
46+
padding-right: 0.75rem;
47+
line-height: 100%;
4848

4949
&:not(.has-icon) {
5050
padding-left: 0.75rem;
5151
}
5252
}
5353

5454
&.wide {
55+
height: 40px;
56+
5557
.separator {
56-
height: 38px;
58+
height: 40px;
5759
}
5860

5961
p {
60-
padding: $spacing__s $spacing__m $spacing__s 0;
62+
padding-right: $spacing__m;
6163

6264
&:not(.has-icon) {
6365
padding-left: $spacing__m;
6466
}
6567
}
6668

6769
img {
68-
margin: $spacing__s 0 $spacing__s $spacing__s;
70+
margin-left: $spacing__s;
6971
}
7072

7173
.icon {
72-
padding: $spacing__s 0 $spacing__s $spacing__s;
74+
padding-left: $spacing__s;
7375
}
7476
}
7577

0 commit comments

Comments
 (0)