diff --git a/source/components/ComparativeTargets.js b/source/components/ComparativeTargets.js index fcdc4f4ca..e72110b8e 100644 --- a/source/components/ComparativeTargets.js +++ b/source/components/ComparativeTargets.js @@ -29,9 +29,6 @@ const connectRègles = (situationBranchName: string) => prélèvements: règleAvecValeurSelector(state, { situationBranchName })('ratio de prélèvements'), - analysis: branchAnalyseSelector(state, { - situationBranchName - }) }), { setSituationBranch, @@ -40,7 +37,16 @@ const connectRègles = (situationBranchName: string) => } ) -const ComparativeTargets = () => ( +const ComparativeTargets = connect(state => { + const analyse = branchAnalyseSelector(state, { + situationBranchName: 'Micro-entreprise' + }); + return { + plafondMicroEntrepriseDépassé: analyse.controls && analyse.controls.find(({ test }) => + test.includes('base des cotisations > plafond') + ) + } +})(({plafondMicroEntrepriseDépassé}) => (
( justifyContent: 'center', alignItems: 'stretch' }}> - + {!plafondMicroEntrepriseDépassé && } + {plafondMicroEntrepriseDépassé && } +
-) +)) const Indépendant = connectRègles('Indépendant')( ({ @@ -133,27 +141,15 @@ const MicroEntreprise = connectRègles('Micro-entreprise')( setSituationBranch, companyIsMicroenterprise, branchIndex, - analysis + plafondDépassé, }) => { - const disabledMessage = ( - (analysis.controls && - analysis.controls.find(({ test }) => - test.includes('base des cotisations > plafond') - )) || - {} - ).message + return ( setSituationBranch(branchIndex)} - disabled={ - disabledMessage && ( - - {disabledMessage} - - ) - } + disabled={plafondDépassé} amountDesc={} icon="🚶‍♂️" amountNotice={} diff --git a/source/components/ui/SchemeCard.css b/source/components/ui/SchemeCard.css index 7596349fd..ca4af158b 100644 --- a/source/components/ui/SchemeCard.css +++ b/source/components/ui/SchemeCard.css @@ -1,6 +1,6 @@ .scheme-card__container { width: 24rem; - margin: 1.2rem; + margin: 1rem; display: flex; flex-direction: column; } @@ -60,3 +60,52 @@ width: fit-content; margin: 1rem auto; } + +@media (max-width: 800px) { + .scheme-card__content { + display: none; + } + .scheme-card__icon { + /* display: none; */ + order: 1; + margin-left: 0.6rem; + } + .scheme-card__subtitle { + order: -1; + margin: 0; + font-size: 1.2rem; + /* max-width: 50%; */ + } + .scheme-card__container { + margin: 0; + } + .scheme-card__container + .scheme-card__container--top-text { + margin-top: 2rem; + } + .scheme-card__header { + display: flex; + order: -2; + align-items: center; + font-size: 1rem; + } + .scheme-card__header + div { + /* flex: 1; */ + text-align: center; + width: 100%; + } + .scheme-card__amount { + flex-direction: row; + display: flex; + align-items: center; + width: 100%; + } + .scheme-card__amount p { + margin: 0; + } + .scheme-card__amount + p { + margin: 0; + } + .scheme-card__cta { + display: none; + } +} diff --git a/source/components/ui/SchemeCard.js b/source/components/ui/SchemeCard.js index 0dc6f51aa..5e8f0d1de 100644 --- a/source/components/ui/SchemeCard.js +++ b/source/components/ui/SchemeCard.js @@ -39,7 +39,8 @@ const SchemeCard = ({
- {emoji(icon)} -

{title}

+
+ {emoji(icon)} +

{title}

+
{amount && (
{amountDesc} -

+

@@ -73,7 +76,7 @@ const SchemeCard = ({
  • {feature}
  • ))} -

    +

    +