diff --git a/src/components/Challenge/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing.tsx
index 314d7cf52dc33ec0be9048f7c7454edf808e8935..6d0f31dca0523ef8fb7822da271c25107a2294ce 100644
--- a/src/components/Challenge/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing.tsx
@@ -1,8 +1,10 @@
+import { Button } from '@material-ui/core'
import defaultChallengeIcon from 'assets/icons/visu/challenge/CHALLENGE0001.svg'
import circleChecked from 'assets/icons/visu/challenge/circleChecked.svg'
import circleUnchecked from 'assets/icons/visu/challenge/circleUnchecked.svg'
import circleStar from 'assets/icons/visu/duel/circleStar.svg'
import defaultIcon from 'assets/icons/visu/duel/default.svg'
+import lockedDuel from 'assets/icons/visu/duel/locked.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Loader from 'components/Loader/Loader'
@@ -153,7 +155,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
}, [client, currentDataload, userChallenge, dispatch])
const quizButton = () => (
- <button
+ <Button
title={t('challenge.card.ongoing.quiz')}
tabIndex={userChallenge.progress.quizProgress === 5 ? -1 : 0}
className={classNames('smallCard', {
@@ -174,11 +176,11 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
<span>{t('challenge.card.ongoing.quiz')}</span>
<StarsContainer result={userChallenge.progress.quizProgress} />
</div>
- </button>
+ </Button>
)
const explorationButton = () => (
- <button
+ <Button
title={t('challenge.card.ongoing.exploration')}
tabIndex={userChallenge.progress.explorationProgress === 5 ? -1 : 0}
className={classNames('smallCard explorationCard', {
@@ -203,11 +205,11 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
<span>{t('challenge.card.ongoing.exploration')}</span>
<StarsContainer result={userChallenge.progress.explorationProgress} />
</div>
- </button>
+ </Button>
)
const actionButton = () => (
- <button
+ <Button
title={t('challenge.card.ongoing.action')}
tabIndex={userChallenge.progress.actionProgress === 5 ? -1 : 0}
className={classNames('smallCard actionCard', {
@@ -231,11 +233,11 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
<span>{t('challenge.card.ongoing.action')}</span>
<StarsContainer result={userChallenge.progress.actionProgress} />
</div>
- </button>
+ </Button>
)
const duelButton = (
- <button className="smallCard goDuel" onClick={goDuel}>
+ <Button className="smallCard goDuel" onClick={goDuel}>
{isLoading ? (
<div className="spinner-container">
<Loader color="black" />
@@ -250,14 +252,14 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
/>
</>
)}
- </button>
+ </Button>
)
const duelCard = (content: JSX.Element, extraClassName = '') => (
- <div className={`smallCard duelCard ${extraClassName}`} onClick={goDuel}>
+ <Button className={`smallCard duelCard ${extraClassName}`} onClick={goDuel}>
{content}
<StyledIcon className="circleStar" icon={challengeIcon} size={60} />
- </div>
+ </Button>
)
const duelContainer = () => {
@@ -290,14 +292,17 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
'active'
)
} else {
- return duelCard(
- <p className="starCount">
- <StyledIcon icon={circleStar} size={30} />
- <span className="blueNumber">
- {quizProgress + explorationProgress + actionProgress}
- </span>
- <span>{` / ${target}`}</span>
- </p>
+ return (
+ <Button className={`smallCard duelCard duelLocked`} disabled>
+ <div className="starCount">
+ <StyledIcon icon={circleStar} size={30} />
+ <span className="blueNumber">
+ {quizProgress + explorationProgress + actionProgress}
+ </span>
+ <span>{` / ${target}`}</span>
+ </div>
+ <StyledIcon className="circleStar" icon={lockedDuel} size={60} />
+ </Button>
)
}
}
diff --git a/src/components/Challenge/challengeCardOnGoing.scss b/src/components/Challenge/challengeCardOnGoing.scss
index ce9b54f8b2aab96d482f758dffae3f82c2d7fff2..ee4236859799c6886e1fcd39d931126570c0a7e0 100644
--- a/src/components/Challenge/challengeCardOnGoing.scss
+++ b/src/components/Challenge/challengeCardOnGoing.scss
@@ -26,144 +26,133 @@
padding: 0 1rem;
max-width: 235px;
}
-.smallCard {
+
+.notifChallenge {
+ position: absolute;
display: flex;
+ justify-content: center;
align-items: center;
- border: none;
- width: 100%;
+ right: 4px;
+ top: 4px;
+ width: 1.25rem;
+ height: 1.25rem;
+ color: $dark-light;
+ border-radius: 50%;
+ border: 1px solid $dark-light;
+ z-index: 1;
+ background: $blue-radial-gradient;
+ font-size: 12px;
+}
+
+.smallCard {
background: $grey-linear-gradient-background;
- height: 24%;
max-height: 90px;
- padding: 1rem;
- box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
- border-radius: 4px;
- color: $grey-bright;
- box-sizing: border-box;
- font-family: $text-font;
- transition: all 300ms ease;
@media all and(max-height: 800px) {
max-height: 85px;
- padding: 6%;
}
@media all and(max-height: 730px) {
max-height: 70px;
- padding: 3%;
}
+
&.finished {
border: 1px solid #7b7b7b;
- background: $dark-2;
+ background: $dark-light-2;
& > * {
- color: $grey-dark;
+ color: $grey-dark !important;
}
}
- &:hover {
- cursor: pointer;
- }
- .content {
- display: flex;
- flex-direction: column;
- align-self: center;
- justify-content: space-between;
- align-items: flex-start;
+
+ &.duelCard {
+ background: $dark-3;
+ border: solid 1px rgba(97, 240, 242, 0.5);
+ &.active {
+ background: $grey-linear-gradient-background;
+ }
span {
- margin-bottom: 0.3em;
+ justify-content: space-between !important;
}
}
- .spinner-container {
- height: 3.75rem;
- width: 3.75rem;
- margin: auto;
- }
- .cardIcon {
- margin-right: 1rem;
- }
- span {
- font-size: 1.1rem;
- font-weight: 700;
- display: block;
- margin-bottom: 0.6rem;
- @media all and(max-height: 700px) {
- margin-bottom: 0.1rem;
- font-size: 1rem;
+
+ &.goDuel {
+ background: $blue-gradient;
+ span {
+ color: $dark-light-2 !important;
+ justify-content: space-between !important;
+ font-weight: 700;
}
}
- .challengeminIcon {
- filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.55));
- }
- .duelLocked {
- margin-left: auto;
- }
- .starCount {
+
+ span.MuiButton-label {
display: flex;
- align-items: center;
- margin: 0;
+ justify-content: flex-start;
+ padding: 1rem 0.5rem;
+ color: $grey-bright;
+ transition: all 300ms ease;
+ text-transform: capitalize;
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ text-transform: capitalize;
+ .stars {
+ display: flex;
+ gap: 2px;
+ }
+ }
+ .spinner-container {
+ height: 3.75rem;
+ width: 3.75rem;
+ margin: auto;
+ }
+ .cardIcon {
+ margin-right: 1rem;
+ }
span {
- margin: 0;
+ font-size: 1.1rem;
+ font-weight: 700;
+ @media all and(max-height: 700px) {
+ font-size: 1rem;
+ }
}
- .blueNumber {
- font-weight: 900;
- color: $blue-light;
- margin: 0 0.3rem 0 0.7rem;
+ .challengeminIcon {
+ filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.55));
}
- }
- .finalDuel {
- display: flex;
- flex-direction: column;
+
.starCount {
+ display: flex;
+ align-items: center;
+ margin: 0;
span {
- font-size: 1rem;
- font-weight: 500;
+ margin: 0;
}
.blueNumber {
- margin-left: 0;
+ font-weight: 900;
+ color: $blue-light;
+ margin: 0 0.3rem 0 0.7rem;
}
}
- &.result {
- span {
- margin-bottom: 0.2rem;
- font-weight: 600;
- font-size: 1rem;
+ .finalDuel {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ .starCount {
+ span {
+ font-size: 1rem;
+ font-weight: 500;
+ }
+ .blueNumber {
+ margin-left: 0;
+ }
+ }
+ &.result {
+ span {
+ margin-bottom: 0.2rem;
+ font-weight: 600;
+ font-size: 1rem;
+ }
}
}
}
}
-.duelCard {
- background: $dark-3;
- border: solid 1px rgba(97, 240, 242, 0.5);
- align-items: center;
- justify-content: space-between;
- position: relative;
- &.active {
- background: $grey-linear-gradient-background;
- }
-}
-.explorationCard,
-.actionCard {
- position: relative;
-}
-.goDuel {
- align-items: center;
- justify-content: space-between;
- height: auto;
- background: $blue-gradient;
- color: $dark-light-2;
- font-weight: 700;
- font-family: $text-font;
-}
-.notifChallenge {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- right: 4px;
- top: 4px;
- width: 1.25rem;
- height: 1.25rem;
- color: $dark-light;
- border-radius: 50%;
- border: 1px solid $dark-light;
- z-index: 1;
- background: $blue-radial-gradient;
- font-size: 12px;
-}
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
index 6a5b5dfd022d0c53522fa168efedb45697ded4ce..944a82388a0830a1ffb40ae00c6255544e3455e9 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
import FormNavigation from 'components/FormGlobal/FormNavigation'
import FormProgress from 'components/FormGlobal/FormProgress'
import 'components/ProfileType/profileTypeForm.scss'
@@ -77,13 +78,13 @@ const ProfileTypeFormNumberSelection: React.FC<
</div>
{answer !== null ? (
<div className={'number-container'}>
- <button
+ <Button
className={'btn-profile-number'}
onClick={() => decrement()}
disabled={index < 1}
>
-
- </button>
+ </Button>
<label className={'number'}>
<input
type={'text'}
@@ -92,13 +93,13 @@ const ProfileTypeFormNumberSelection: React.FC<
disabled={true}
/>
</label>
- <button
+ <Button
className={'btn-profile-number'}
onClick={() => increment()}
disabled={index >= answerType.choices.length - 1}
>
+
- </button>
+ </Button>
</div>
) : null}
</div>
diff --git a/src/components/ProfileType/profileTypeForm.scss b/src/components/ProfileType/profileTypeForm.scss
index f6729209fca0abd76af27a1ae605fc828411bf62..221115bfee9549b15a6c18108b33551f41b9bcdf 100644
--- a/src/components/ProfileType/profileTypeForm.scss
+++ b/src/components/ProfileType/profileTypeForm.scss
@@ -140,13 +140,9 @@
align-items: center;
justify-content: center;
margin: 0.5rem;
-
- // &:focus {
- // outline: none;
- // }
- }
- button:disabled {
- opacity: 0.5;
+ &:disabled {
+ color: rgba($color: $white, $alpha: 0.5);
+ }
}
.date-select {
margin: 0.5em;