Skip to content

Prod 3009 #6707

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 2, 2022
Merged

Prod 3009 #6707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3d16d70
fix: view submissions 2 lines
dedywahyudi Oct 6, 2022
7191f73
fix: buttons design system
dedywahyudi Oct 7, 2022
51ac9a4
fix: change the font-weight & letter
dedywahyudi Oct 8, 2022
8d6bca7
fix: button style upgrade
dedywahyudi Oct 10, 2022
e30724b
fix: focus style for buttons
dedywahyudi Oct 11, 2022
04a22c6
fix: add space before brackets
dedywahyudi Oct 11, 2022
8ff6d16
fix: button stylings
dedywahyudi Oct 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const AwardBadge = ({
}
<div styleName="title">
<span>
{/* eslint-disable-next-line react/no-danger */}
<div dangerouslySetInnerHTML={{ __html: title }} />
</span>
</div>
Expand Down
20 changes: 10 additions & 10 deletions src/shared/components/challenge-detail/Header/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,7 @@ export default function ChallengeHeader(props) {
onClick={unregisterFromChallenge}
theme={{
button: unregisterButtonDisabled
? style.submitButtonDisabled
? style.unregisterButtonDisabled
: style.unregisterButton,
}}
>
Expand All @@ -423,16 +423,16 @@ export default function ChallengeHeader(props) {
Submit
</PrimaryButton>
{
track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering
track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering
&& hasSubmissions && (
<PrimaryButton
theme={{ button: style.submitButton }}
to={`${challengesUrl}/${challengeId}/my-submissions`}
>
View Submissions
</PrimaryButton>
)
}
<PrimaryButton
theme={{ button: style.submitButton }}
to={`${challengesUrl}/${challengeId}/my-submissions`}
>
View Submissions
</PrimaryButton>
)
}
</div>
</div>
</div>
Expand Down
118 changes: 101 additions & 17 deletions src/shared/components/challenge-detail/Header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,66 +10,150 @@
padding: 0 25px !important;
}

.submitButton {
margin: $base-unit 0;
.challenge-ops-container .submitButton {
margin: 5px;
min-width: 0;
width: 100%;
border-radius: 50px !important;
height: 48px;
padding: 0 25px !important;
background: #137d60 !important;
color: #fff !important;
white-space: nowrap;
padding: 12px 24px !important;
font-size: 16px;
line-height: 24px;
font-weight: 700;
letter-spacing: 0.008em;

@include xs-to-sm {
width: fit-content;
}
}

.submitButtonDisabled {
margin: $base-unit 0;
.challenge-ops-container .submitButtonDisabled {
margin: 5px;
min-width: 0;
width: 100%;
border-radius: 50px !important;
height: 48px;
padding: 0 25px !important;
padding: 12px 24px !important;
color: #767676 !important;
background: #f4f4f4 !important;
font-size: 16px;
line-height: 24px;
font-weight: 700;
letter-spacing: 0.008em;

@include xs-to-sm {
width: fit-content;
}
}

.unregisterButton {
margin: $base-unit 0;
.challenge-ops-container .unregisterButton {
margin: 5px;
min-width: 0;
width: 100%;
border-radius: 50px !important;
height: 48px;
padding: 0 25px !important;
padding: 12px 24px !important;
color: #137d60 !important;
border-color: #137d60 !important;
border: 2px solid #137d60 !important;
background: #fff !important;
font-size: 16px;
line-height: 24px;
font-weight: 700;
letter-spacing: 0.008em;

@include xs-to-sm {
width: fit-content;
}
}

.registerBtn {
margin: $base-unit 0;
.challenge-ops-container .unregisterButtonDisabled {
margin: 5px;
min-width: 0;
width: 100%;
border-radius: 50px !important;
height: 48px;
padding: 0 25px !important;
padding: 12px 24px !important;
color: #767676 !important;
border: 2px solid #f4f4f4;
background: #fff !important;
font-size: 16px;
line-height: 24px;
font-weight: 700;
letter-spacing: 0.008em;

@include xs-to-sm {
width: fit-content;
}
}

.challenge-ops-container .registerBtn {
margin: 5px;
min-width: 0;
border-radius: 50px !important;
height: 48px;
padding: 12px 24px !important;
background-color: #137d60 !important;
font-size: 16px;
line-height: 24px;
font-weight: 700;
letter-spacing: 0.008em;

@include xs-to-sm {
width: fit-content;
}
}

.challenge-ops-container .submitButton:hover,
.challenge-ops-container .registerBtn:hover {
color: #fff !important;
background: #219174 !important;
border-color: #219174 !important;
}

.challenge-ops-container .unregisterButton:hover {
color: #219174 !important;
border-color: #219174 !important;
background: #fff !important;
}

.challenge-ops-container .submitButton:active,
.challenge-ops-container .registerBtn:active {
color: #fff !important;
background: #0d664e !important;
border-color: #0d664e !important;
}

.challenge-ops-container .unregisterButton:active {
outline: none !important;
box-shadow: none !important;
color: #0d664e !important;
border-color: #0d664e !important;
background: #fff !important;
}

.challenge-ops-container .submitButton:focus,
.challenge-ops-container .submitButton:focus-within,
.challenge-ops-container .submitButton:focus-visible {
outline: none !important;
box-shadow: none !important;
border-color: #0d664e;
}

.challenge-ops-container .registerBtn:focus,
.challenge-ops-container .registerBtn:focus-within,
.challenge-ops-container .registerBtn:focus-visible {
outline: none !important;
box-shadow: none !important;
border-color: #0d664e;
}

.challenge-ops-container .unregisterButton:focus,
.challenge-ops-container .unregisterButton:focus-within,
.challenge-ops-container .unregisterButton:focus-visible {
outline: none !important;
box-shadow: none !important;
border-color: #0d664e;
}

.challenge-ops-container {
display: flex;
margin-top: 32px;
Expand Down