diff --git a/src/assets/png-badges/CHA00000001-1.png b/src/assets/png-badges/CHA00000001-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..bfe6fb3c24e6cfa36b612e68e75681c03e738e51
Binary files /dev/null and b/src/assets/png-badges/CHA00000001-1.png differ
diff --git a/src/assets/png-badges/CHA00000002-0.png b/src/assets/png-badges/CHA00000002-0.png
new file mode 100644
index 0000000000000000000000000000000000000000..bad09c3516c15277abd6b9adc44b4653ec40abb2
Binary files /dev/null and b/src/assets/png-badges/CHA00000002-0.png differ
diff --git a/src/assets/png-badges/CHA00000002-1.png b/src/assets/png-badges/CHA00000002-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..e16bba433ca3ece0ba70d5f0435443e57bcba00b
Binary files /dev/null and b/src/assets/png-badges/CHA00000002-1.png differ
diff --git a/src/assets/png-badges/available-big.png b/src/assets/png-badges/available-big.png
new file mode 100644
index 0000000000000000000000000000000000000000..69cd35624d3fdb34afc66462f3019718ce2dd11d
Binary files /dev/null and b/src/assets/png-badges/available-big.png differ
diff --git a/src/assets/png-badges/available.png b/src/assets/png-badges/available.png
new file mode 100644
index 0000000000000000000000000000000000000000..62cf953e58d199ff75e2e1d404cb6f114e3d1d20
Binary files /dev/null and b/src/assets/png-badges/available.png differ
diff --git a/src/assets/png-badges/default.png b/src/assets/png-badges/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb5b58b0cdcab03bad8c2bd4bfa236e3440744cb
Binary files /dev/null and b/src/assets/png-badges/default.png differ
diff --git a/src/assets/png-badges/locked-big.png b/src/assets/png-badges/locked-big.png
new file mode 100644
index 0000000000000000000000000000000000000000..00b793f6fdc6d1cd000ff53b9fa793305456140d
Binary files /dev/null and b/src/assets/png-badges/locked-big.png differ
diff --git a/src/assets/png-badges/locked.png b/src/assets/png-badges/locked.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb5b58b0cdcab03bad8c2bd4bfa236e3440744cb
Binary files /dev/null and b/src/assets/png-badges/locked.png differ
diff --git a/src/assets/png-badges/ongoing.png b/src/assets/png-badges/ongoing.png
new file mode 100644
index 0000000000000000000000000000000000000000..461d35a370577017a270088cd71cf3d611eccb99
Binary files /dev/null and b/src/assets/png-badges/ongoing.png differ
diff --git a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
index 4167ee49f1cb88cf9bdb4897a842b51d3ea96e41..36b5f2c5a6340b75d90d3405631175b158aeeab9 100644
--- a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
@@ -8,12 +8,11 @@ import { history } from 'components/ContainerComponents/ViewContainer/ViewContai
import { ChallengeType, UserChallenge } from 'services/dataChallengeContracts'
import { Redirect } from 'react-router-dom'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import AvailableChallengeIcon from 'assets/icons/badges/available-big.svg'
import ChallengeManager from 'services/challengeDataManagerService'
import { Client, withClient } from 'cozy-client'
import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
import { ScreenType } from 'enum/screen.enum'
+import AvailableChallengeIcon from 'assets/png-badges/available.png'
interface AvailableChallengeDetailsViewProps {
location: any
@@ -96,11 +95,11 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
<div className="cp-content">
<div className="cp-info --available">
<div className="cp-title text-22-bold">{challenge.title}</div>
- <StyledIconButton
+ <img
className="cp-icon"
- icon={AvailableChallengeIcon}
- size={screenType === ScreenType.MOBILE ? 150 : 220}
- />
+ src={AvailableChallengeIcon}
+ width={screenType === ScreenType.MOBILE ? 180 : 300}
+ ></img>
<div className="cp-description text-16-bold">
{challenge.description}
</div>
diff --git a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
index 94640d51d579b39d553e18c84c61d3b7cc2eb035..35aa3c74743e6342b57805f16c381c957f21543a 100644
--- a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
@@ -9,7 +9,6 @@ import {
BadgeState,
} from 'services/dataChallengeContracts'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import DefaultChallengeIcon from 'assets/icons/badges/default.svg'
import StarIcon from 'assets/icons/visu/challenge/star.svg'
import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
@@ -21,8 +20,6 @@ import { AppContext } from 'components/Contexts/AppContextProvider'
import { ScreenType } from 'enum/screen.enum'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import royal from 'assets/png-badges/royal.png'
-
interface FinishedChallengeDetailsViewProps {
location: any
props: any
@@ -41,18 +38,10 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
const [badgeIcon, setBadgeIcon] = useState<any | null>(null)
const { screenType } = useContext(AppContext)
- // async function importRightBadge(id: string, badgeStatus: number) {
- // // Les svg doivent être au format idchallenge-badgestate.svg
- // const importedBadge = await import(
- // /* webpackMode: "eager" */ `assets/icons/badges/${id}-${badgeStatus}.svg`
- // )
- // setBadgeIcon(importedBadge.default)
- // }
-
async function importRightBadge(id: string, badgeStatus: number) {
// Les svg doivent être au format idchallenge-badgestate.svg
const importedBadge = await import(
- /* webpackMode: "eager" */ `assets/icons/badges/${id}-${badgeStatus}.png`
+ /* webpackMode: "eager" */ `assets/png-badges/${id}-${badgeStatus}.png`
)
setBadgeIcon(importedBadge.default)
}
@@ -125,23 +114,16 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
)
) : null}
<div className="cp-win-badge-star">
- {/* <StyledIcon
- className="cp-win-badge"
- icon={badgeIcon ? badgeIcon : DefaultChallengeIcon}
- size={screenType === ScreenType.MOBILE ? 150 : 200}
- /> */}
- {/* <img src={royal} alt="badge-ecolyo-royal" /> */}
<img
className="cp-win-badge"
- src={royal}
- width={screenType === ScreenType.MOBILE ? 150 : 300}
+ src={badgeIcon ? badgeIcon : DefaultChallengeIcon}
+ width={screenType === ScreenType.MOBILE ? 200 : 300}
></img>
-
{challenge.badge === BadgeState.SUCCESS ? (
<StyledIcon
className="cp-win-star"
icon={StarIcon}
- size={screenType === ScreenType.MOBILE ? 220 : 350}
+ size={screenType === ScreenType.MOBILE ? 250 : 350}
/>
) : null}
</div>
diff --git a/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx
index b30b34814519907c9d8b35d389e503ea56671453..ea936430feca53f662b79138833abc7504e2bb51 100644
--- a/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/LockedChallengeDetailsViewContainer.tsx
@@ -7,12 +7,11 @@ import { history } from 'components/ContainerComponents/ViewContainer/ViewContai
import { ChallengeType } from 'services/dataChallengeContracts'
import { Redirect } from 'react-router-dom'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import LockedChallengeIcon from 'assets/icons/badges/locked-big.svg'
import { Client, withClient } from 'cozy-client'
import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
import { AppContext } from 'components/Contexts/AppContextProvider'
import { ScreenType } from 'enum/screen.enum'
+import LockedChallengeIcon from 'assets/png-badges/locked-big.png'
interface LockedChallengeDetailsViewProps {
location: any
@@ -60,12 +59,11 @@ const LockedChallengeDetailsViewContainer: React.FC<LockedChallengeDetailsViewPr
<div className="cp-content --locked">
<div className="cp-info">
<div className="cp-title text-22-bold">{challenge.title}</div>
-
- <StyledIconButton
+ <img
className="cp-icon"
- icon={LockedChallengeIcon}
- size={screenType === ScreenType.MOBILE ? 150 : 250}
- />
+ src={LockedChallengeIcon}
+ width={screenType === ScreenType.MOBILE ? 180 : 220}
+ ></img>
<div className="cp-description text-16-bold">
{t('CHALLENGE.LOCKED')}
</div>
diff --git a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
index a84750094db7d75a37506ac9bb518b1adb7a6973..5e389db5a397e08750b1ae4284db581acdca63e6 100644
--- a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
@@ -5,7 +5,11 @@ import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
import Header from 'components/ContainerComponents/Header/Header'
import Content from 'components/ContainerComponents/Content/Content'
import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
-import { UserChallenge, ChallengeState } from 'services/dataChallengeContracts'
+import {
+ UserChallenge,
+ ChallengeState,
+ TypeChallenge,
+} from 'services/dataChallengeContracts'
import { Redirect } from 'react-router-dom'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
@@ -14,11 +18,13 @@ import ChallengeManager from 'services/challengeDataManagerService'
import { Client, withClient } from 'cozy-client'
import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
import { formatCompareChallengeDate } from 'utils/utils'
-import AvailableChallengeIcon from 'assets/icons/badges/available-big.svg'
+// import AvailableChallengeIcon from 'assets/icons/badges/available-big.svg'
import OngoingChallengePile from 'components/ContentComponents/Challenge/OngoingChallengePile'
import OngoingChallengeViewingDate from 'components/ContentComponents/Challenge/OngoingChallengeViewingDate'
import FollowChallengeTimeline from 'components/ContentComponents/Challenge/FollowChallengeTimeline'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import AvailableChallengeIcon from 'assets/png-badges/available.png'
+import { ScreenType } from 'enum/screen.enum'
interface OngoingChallengeDetailsViewProps {
location: any
@@ -34,7 +40,7 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
const client = props.client
const challengeManager = new ChallengeManager(client)
- const { refreshCurrentChallenge } = useContext(AppContext)
+ const { refreshCurrentChallenge, screenType } = useContext(AppContext)
const [challengeEcogesture, setChallengeEcogesture] = useState<number>(0)
const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
const [challenge, setChallenge] = useState<UserChallenge | null>(null)
@@ -96,12 +102,12 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
{challenge.challengeType && challenge.challengeType.title}
</div>
{challenge.challengeType &&
- challenge.challengeType.type === 1 ? (
- <StyledIcon
+ challenge.challengeType.type === TypeChallenge.ACHIEVEMENT ? (
+ <img
className="cp-icon-available"
- icon={AvailableChallengeIcon}
- size={100}
- />
+ src={AvailableChallengeIcon}
+ width={screenType === ScreenType.MOBILE ? 180 : 250}
+ ></img>
) : (
<div className="cp-follow">
{maxEnergy && maxEnergy === -1 && (
diff --git a/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx b/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx
index e7a632ec05426dbfaaadcbad04f5ceddee7efa59..d84eba2d4c879fbd058871703f36381050a858db 100644
--- a/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx
+++ b/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx
@@ -9,10 +9,10 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import ChevronGrey from 'assets/icons/ico/chevron-right-grey.svg'
import ChevronBlue from 'assets/icons/ico/chevron-right-blue.svg'
import ChevronDarkBlue from 'assets/icons/ico/chevron-right-darkblue.svg'
-import LockedChallengeIcon from 'assets/icons/badges/locked.svg'
-import AvailableChallengeIcon from 'assets/icons/badges/available.svg'
-import OngoingChallengeIcon from 'assets/icons/badges/ongoing.svg'
-import DefaultChallengeIcon from 'assets/icons/badges/default.svg'
+import LockedChallengeIcon from 'assets/png-badges/locked.png'
+import AvailableChallengeIcon from 'assets/png-badges/available.png'
+import OngoingChallengeIcon from 'assets/png-badges/ongoing.png'
+import DefaultChallengeIcon from 'assets/png-badges/default.png'
import { NavLink } from 'react-router-dom'
interface ChallengeListItemProps {
@@ -35,10 +35,11 @@ const ChallengeListItem: React.FC<ChallengeListItemProps> = ({
async function importRightBadge(id: string, badgeStatus: number) {
// Les svg doivent être au format idchallenge-badgestate.svg
const importedBadge = await import(
- /* webpackMode: "eager" */ `assets/icons/badges/${id}-${badgeStatus}.svg`
+ /* webpackMode: "eager" */ `assets/png-badges/${id}-${badgeStatus}.png`
)
setBadgeIcon(importedBadge.default)
}
+
const defineBadge = () => {
return challengeState === 'locked'
? LockedChallengeIcon
@@ -71,11 +72,11 @@ const ChallengeListItem: React.FC<ChallengeListItemProps> = ({
<div className={`cli cli-${challengeState}`}>
<div className="cli-left">
<div className="cli-content">
- <StyledIcon
+ <img
className="cli-content-icon"
- icon={defineBadge() ? defineBadge() : DefaultChallengeIcon}
- size={62}
- />
+ src={defineBadge() ? defineBadge() : DefaultChallengeIcon}
+ width={62}
+ ></img>
<div className={`cli-content-title`}>
{challengeState === 'available' && (
<div className={`subtitle-${challengeState} text-16-normal`}>
diff --git a/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx b/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx
index b94b8cd4a63cc6f1430f60383372a9add6cb4b7c..45faf3f4c90e0a9373c93456b73037fdb00e5cbf 100644
--- a/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx
+++ b/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx
@@ -31,7 +31,7 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
async function importRightBadge(id: string, badgeStatus: number) {
// Les svg doivent être au format idchallenge-badgestate.svg
const importedBadge = await import(
- /* webpackMode: "eager" */ `assets/icons/badges/${id}-${badgeStatus}.svg`
+ /* webpackMode: "eager" */ `assets/png-badges/${id}-${badgeStatus}.png`
)
setBadgeIcon(importedBadge.default)
}
@@ -51,11 +51,11 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
{t('CHALLENGE.CONGRATULATION')}
</div>
<div className="cm-win-badge-star">
- <StyledIcon
+ <img
className="cm-win-badge"
- icon={badgeIcon}
- size={screenType === ScreenType.MOBILE ? 180 : 200}
- />
+ src={badgeIcon}
+ width={screenType === ScreenType.MOBILE ? 200 : 300}
+ ></img>
<StyledIcon className="cm-win-star" icon={StarIcon} size={300} />
</div>
<div className="cm-txt">
diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss
index e25d2d44c12f2c4198bbac2f9a8a8c69ad6df1ab..fb1d6c170f49069ce136fe07036abe29f2f43f8c 100644
--- a/src/styles/components/_challenges.scss
+++ b/src/styles/components/_challenges.scss
@@ -96,6 +96,7 @@
flex-direction: row;
.cli-content-icon {
margin: 0.5rem 0;
+ z-index: 5;
}
.cli-content-title {
color: $text-white;
@@ -385,6 +386,7 @@
justify-content: space-between;
background-color: $dark-light-2;
width: 100%;
+ min-height: 55vh;
padding-top: 1rem;
padding-bottom: 0.5rem;
&.--available {
@@ -392,7 +394,7 @@
height: 74vh;
}
.cp-icon {
- margin-bottom: 1rem;
+ margin: 1rem;
}
.cp-icon-available {
margin: 2rem;