diff --git a/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx b/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx index 39a2a126eb..1903b27c2f 100644 --- a/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx +++ b/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx @@ -17,6 +17,7 @@ const AwardBadge = ({ }
+ {/* eslint-disable-next-line react/no-danger */}
diff --git a/src/shared/components/challenge-detail/Header/index.jsx b/src/shared/components/challenge-detail/Header/index.jsx index a92b2e90a6..3cd0d3328f 100644 --- a/src/shared/components/challenge-detail/Header/index.jsx +++ b/src/shared/components/challenge-detail/Header/index.jsx @@ -397,7 +397,7 @@ export default function ChallengeHeader(props) { onClick={unregisterFromChallenge} theme={{ button: unregisterButtonDisabled - ? style.submitButtonDisabled + ? style.unregisterButtonDisabled : style.unregisterButton, }} > @@ -423,16 +423,16 @@ export default function ChallengeHeader(props) { Submit { - track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering + track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering && hasSubmissions && ( - - View Submissions - - ) - } + + View Submissions + + ) + }
diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index f97c457a6d..a3daf5e533 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -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;