diff --git a/src/components/Duel/DuelOngoing/DuelOngoing.tsx b/src/components/Duel/DuelOngoing/DuelOngoing.tsx index e5f8335b43654c066cdb4492f4835e49ae55884d..f1871549433d088da58efd8ac2bdb36e9f575e15 100644 --- a/src/components/Duel/DuelOngoing/DuelOngoing.tsx +++ b/src/components/Duel/DuelOngoing/DuelOngoing.tsx @@ -128,7 +128,7 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => { : t('duel.goal_failed')} </div> ) : ( - <div className="duel-goal text-18-normal"> + <div className="duel-goal text-18-bold"> {t('duel.goal1', { durationInDays: duel.duration.days, })} @@ -150,14 +150,14 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => { height={height} /> </div> - <div className="duel-chart-caption text-15-normal"> + <div className="duel-chart-caption"> <div className="duel-caption"> <StyledIcon className="caption-icon" icon={CaptionAverageIcon} size={25} /> - <div className="caption-label">{t('duel.caption_average')}</div> + <span>{t('duel.caption_average')}</span> </div> <div className="duel-caption"> <StyledIcon @@ -165,7 +165,7 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => { icon={CaptionConsumptionIcon} size={25} /> - <div className="caption-label">{t('duel.caption_consumption')}</div> + <span>{t('duel.caption_consumption')}</span> </div> <div className="duel-caption"> <StyledIcon @@ -173,7 +173,7 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => { icon={CaptionIncomingIcon} size={25} /> - <div className="caption-label">{t('duel.caption_incoming')}</div> + <span>{t('duel.caption_incoming')}</span> </div> </div> </div> diff --git a/src/components/Duel/DuelOngoing/__snapshots__/DuelOngoing.spec.tsx.snap b/src/components/Duel/DuelOngoing/__snapshots__/DuelOngoing.spec.tsx.snap index f04488e4ae9cba174bae61d3bdba4812ef221d0d..fe911daa474b74f040df5c1ed6c79edcc1804936 100644 --- a/src/components/Duel/DuelOngoing/__snapshots__/DuelOngoing.spec.tsx.snap +++ b/src/components/Duel/DuelOngoing/__snapshots__/DuelOngoing.spec.tsx.snap @@ -11,7 +11,7 @@ exports[`DuelOngoing component should be rendered correctly 1`] = ` Title DUEL001 </div> <div - class="duel-goal text-18-normal" + class="duel-goal text-18-bold" > duel.goal1 <span> @@ -39,7 +39,7 @@ exports[`DuelOngoing component should be rendered correctly 1`] = ` /> </div> <div - class="duel-chart-caption text-15-normal" + class="duel-chart-caption" > <div class="duel-caption" @@ -54,11 +54,9 @@ exports[`DuelOngoing component should be rendered correctly 1`] = ` xlink:href="#test-file-stub" /> </svg> - <div - class="caption-label" - > + <span> duel.caption_average - </div> + </span> </div> <div class="duel-caption" @@ -73,11 +71,9 @@ exports[`DuelOngoing component should be rendered correctly 1`] = ` xlink:href="#test-file-stub" /> </svg> - <div - class="caption-label" - > + <span> duel.caption_consumption - </div> + </span> </div> <div class="duel-caption" @@ -92,11 +88,9 @@ exports[`DuelOngoing component should be rendered correctly 1`] = ` xlink:href="#test-file-stub" /> </svg> - <div - class="caption-label" - > + <span> duel.caption_incoming - </div> + </span> </div> </div> </div> diff --git a/src/components/Duel/DuelOngoing/duelOngoing.scss b/src/components/Duel/DuelOngoing/duelOngoing.scss index 27de1c0bfe3b85505e63a744e64b7d1ebbc0a43c..4e3d318dd8bcf65a1ab155d821501821fdeefed6 100644 --- a/src/components/Duel/DuelOngoing/duelOngoing.scss +++ b/src/components/Duel/DuelOngoing/duelOngoing.scss @@ -2,49 +2,42 @@ @import 'src/styles/base/breakpoint'; .duel-ongoing-container { + padding-top: 1rem; + padding-inline: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; -} -.duel-title { - color: $soft-grey; - margin-top: 1rem; -} -.duel-goal { - color: $grey-bright; - margin: 1rem 3rem; - text-align: center; -} -.duel-consumption { - color: $grey-bright; - margin: 1rem auto; - @media (max-width: $width-phone) { - margin: 0.5rem auto -0.5rem; + gap: 1rem; + + .duel-title { + color: $soft-grey; } - .consumption { + + .duel-consumption .consumption { color: $gold-light; } -} -.duel-chart { - height: 15.625rem; - display: flex; - align-items: center; - justify-content: center; - width: 80%; -} -.duel-chart-caption { - display: flex; - flex-direction: column; - align-self: flex-start; - .duel-caption { + + .duel-chart { + height: 15.625rem; display: flex; - margin-top: 0.75rem; - .caption-icon { - margin: auto 1.5rem; - } - .caption-label { - color: $grey-bright; + align-items: center; + justify-content: center; + width: 80%; + } + .duel-chart-caption { + display: flex; + flex-direction: column; + align-self: flex-start; + gap: 12px; + .duel-caption { + display: flex; + .caption-icon { + margin: auto 1.5rem; + } + span { + color: $grey-bright; + } } } }