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;