feat(dashboard): update dashboard card (#49)

betagouv · Jan 10, 2024 · 3fbeda2 · 3fbeda2
1 parent 752cd2f
commit 3fbeda2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/front/src/constants.ts b/front/src/constants.ts
@@ -5,4 +5,5 @@ export const COLORS = {
   cardBackground: fr.colors.decisions.background.default.grey.hover,
   titleColor: fr.colors.decisions.text.title.blueFrance.default,
   buttonBackground: fr.colors.decisions.background.default.grey.default,
+  textColorGrey: fr.colors.decisions.text.mention.grey.default,
 };
diff --git a/front/src/custom-style.css b/front/src/custom-style.css
@@ -9,3 +9,8 @@
 .fr-icon-github-fill {
   border: 1px solid var(--border-default-grey);
 }
+
+/* DELETE UNNECESSARY DIV IN THE DSFR CARD COMPONENT */
+.fr-card__end{
+  display: none;
+}
diff --git a/front/src/providers/connectedSpaces/Dashboard.tsx b/front/src/providers/connectedSpaces/Dashboard.tsx
@@ -3,32 +3,46 @@ import Title1 from '../../titles/Title1';
 import { Card } from '@codegouvfr/react-dsfr/Card';
 import { useRouteLoaderData } from 'react-router-dom';
 import { OidcClients } from '../../types';
+import { COLORS } from '../../constants';
 
 export const Dashboard = () => {
   const oidcClients = useRouteLoaderData('dashboard') as OidcClients;
+  const keys = 'Clés de test';
   return (
     <div className="fr-container fr-mb-10v">
       <Title1>Tableau de bord</Title1>
       <div className="fr-grid-row fr-grid-row--gutters">
         {oidcClients.map((oidcClient) => (
-          <div className="container fr-col-6">
+          <div className="container fr-col-12 fr-col-md-6">
             <Card
               background
               border
               desc={oidcClient.clientDescription}
               horizontal
-              enlargeLink
               linkProps={{
                 to: `/dashboard/${oidcClient.id}`,
               }}
               size="small"
               start={
-                <ul className="fr-badges-group">
-                  <li>
-                    <Badge>Clés de test</Badge>
-                    <Badge severity="info">DINUM</Badge>
-                  </li>
-                </ul>
+                <>
+                  <ul className="fr-badges-group">
+                    <li>
+                      {keys.includes('test') ? (
+                        <Badge className="fr-badge--purple-glycine">
+                          Clés de test
+                        </Badge>
+                      ) : (
+                        <Badge severity="info">{keys}</Badge>
+                      )}
+                    </li>
+                  </ul>
+                  <p
+                    style={{ color: COLORS.textColorGrey }}
+                    className="fr-mb-0 fr-text--xs"
+                  >
+                    → DINUM
+                  </p>
+                </>
               }
               title={oidcClient.clientName}
               titleAs="h2"