Merge branch '467-mui-buttons' into 'dev'

fix: replace standard buttons with mui

See merge request !891

src/components/Challenge/ChallengeCardOnGoing.tsx

+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>
       )
     }
   }

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;
-}

src/components/ProfileType/ProfileTypeFormNumberSelection.tsx

+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>

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;