Ajoute quelques ajustements graphiques

incubateur-ademe · Apr 24, 2024 · 600745e · 600745e
1 parent 02d2ff9
commit 600745e
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 22 deletions.
diff --git a/packages/panier/components/ActionImpact/CarteActionImpact.tsx b/packages/panier/components/ActionImpact/CarteActionImpact.tsx
@@ -30,25 +30,23 @@ export const CarteActionImpact = ({
 
   return (
     <Card
-      className={classNames('box-content !px-5 !py-4 h-[160px]', {
+      className={classNames('box-content px-4 py-4 h-20', {
         '!cursor-default': panier && !isSelected,
       })}
       isSelected={isSelected}
-      header={
-        <div className="flex justify-end">
-          {/* Budget */}
-          <NiveauBudget budget={budget ?? {niveau: 4, nom: 'Non estimé'}} />
-        </div>
-      }
       footer={
         <div className="relative z-0">
-          {/* Badge thématique */}
-          {!!thematiques.length && (
-            <Badge title={thematiques[0].nom} size="sm" state="standard" />
-          )}
+          <div className="flex justify-end opacity-100 group-hover:opacity-0 transition-opacity duration-500">
+            {/* Badge thématique */}
+            {!!thematiques.length && (
+              <Badge title={thematiques[0].nom} size="sm" state="standard" />
+            )}
+            {/* Budget */}
+            <NiveauBudget budget={budget ?? {niveau: 4, nom: 'Non estimé'}} />
+          </div>
 
           {/* Boutons d'action, visibles au hover de la carte */}
-          <div className="invisible group-hover:visible w-full absolute z-10 bottom-0 right-0 bg-white flex justify-end gap-2">
+          <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-500 w-full absolute z-10 bottom-0 right-0 bg-white flex justify-end gap-2">
             {panier ? (
               <Button size="xs" onClick={() => handleToggleSelect(false)}>
                 Retirer du panier
@@ -85,7 +83,9 @@ export const CarteActionImpact = ({
         </div>
       }
     >
-      {titre.length > maxLength ? `${splitTitle(titre)}...` : titre}
+      <span className="line-clamp-1">
+        {titre.length > maxLength ? `${splitTitle(titre)}...` : titre}
+      </span>
     </Card>
   );
 };
diff --git a/packages/panier/components/ActionImpact/NiveauBudget.tsx b/packages/panier/components/ActionImpact/NiveauBudget.tsx
@@ -31,7 +31,7 @@ const NiveauBudget = ({budget}: NiveauBudgetProps) => {
         </div>
       }
     >
-      <div>
+      <div className="flex items-center justify-center px-1.5 py-1 border rounded border-grey-3 bg-grey-1">
         <Icon
           icon="money-euro-circle-fill"
           className={classNames({

diff --git a/packages/panier/components/FiltresActions/index.tsx b/packages/panier/components/FiltresActions/index.tsx
@@ -116,7 +116,7 @@ const FiltresActions = ({budgets, temps, thematiques}: FiltresActionsProps) => {
           multiple: true,
         },
       ]}
-      className="mb-8"
+      className="mt-2 mb-4"
     />
   );
 };

diff --git a/packages/panier/components/Landing/index.tsx b/packages/panier/components/Landing/index.tsx
@@ -14,7 +14,7 @@ const Landing = () => {
         <div className="lg:w-2/3">
           <h1>
             Identifiez des actions à impact pour votre collectivité <br />
-            en <span className="text-secondary-1">quelques clics.</span>
+            en <span className="text-primary">quelques clics.</span>
           </h1>
           <ul className="list-disc list-outside text-base text-primary-9 font-bold pl-4 mb-8">
             <li className="mb-4">

diff --git a/packages/panier/components/ListeActions/index.tsx b/packages/panier/components/ListeActions/index.tsx
@@ -66,7 +66,7 @@ const ListeActions = ({
       onChange={activeTab => onChangeTab(tabsList[activeTab].shortName)}
       className="grow flex flex-col"
       tabPanelClassName="grow flex flex-col"
-      tabsListClassName="!justify-start"
+      tabsListClassName="!justify-start mb-0"
     >
       {...tabsList.map(tab => {
         const actionsFiltrees = actionsListe.filter(

diff --git a/packages/panier/components/PanierRealtime/index.tsx b/packages/panier/components/PanierRealtime/index.tsx
@@ -120,12 +120,11 @@ const PanierRealtime = ({
           title="Contenu en cours de validation par l’ADEME et en amélioration continue"
           classname="mb-8 -mt-4"
         />
-        <h1>
-          Initiez{' '}
-          <span className="text-secondary-1">des actions impactantes</span> et
-          valorisez le chemin déjà parcouru
+        <h1 className="mb-4">
+          Initiez <span className="text-primary">des actions impactantes</span>{' '}
+          et valorisez le chemin déjà parcouru
         </h1>
-        <p className="text-grey-9 text-lg font-medium mt-8 mb-12">
+        <p className="text-grey-9 text-lg font-medium mt-0 mb-2">
           Ajoutez les actions à votre panier. Vous pouvez aussi les classer en
           fonction de leur état d'avancement.
         </p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,7 +31,7 @@ const NiveauBudget = ({budget}: NiveauBudgetProps) => { @@
             </div>
           }
         >
-          <div>
+          <div className="flex items-center justify-center px-1.5 py-1 border rounded border-grey-3 bg-grey-1">
             <Icon
               icon="money-euro-circle-fill"
               className={classNames({
@@ Expand Down @@