fixup! ✨(app-desk) add team info component

numerique-gouv · Feb 22, 2024 · 64aa8ad · 64aa8ad
1 parent 01594cc
commit 64aa8ad
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/src/frontend/apps/desk/cunningham.ts b/src/frontend/apps/desk/cunningham.ts
@@ -3,6 +3,7 @@ const config = {
     default: {
       theme: {
         colors: {
+          'card-border': '#DDDDDD',
           'primary-bg': '#FAFAFA',
           'primary-100': '#EDF5FA',
           'primary-150': '#E5EEFA',
@@ -176,6 +177,7 @@ const config = {
     dsfr: {
       theme: {
         colors: {
+          'card-border': '#DDDDDD',
           'primary-text': '#000091',
           'primary-100': '#f5f5fe',
           'primary-200': '#ececfe',

diff --git a/src/frontend/apps/desk/src/components/Card.tsx b/src/frontend/apps/desk/src/components/Card.tsx
@@ -17,7 +17,7 @@ export const Card = ({
       $radius="4px"
       $css={`
         box-shadow: 2px 2px 5px ${colorsTokens()['primary-300']}88;
-        border: 1px solid #e3e3e3;
+        border: 1px solid ${colorsTokens()['card-border']};
         ${$css}
       `}
       {...props}

diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
@@ -69,6 +69,7 @@
   --c--theme--colors--success-text: var(--c--theme--colors--greyscale-000);
   --c--theme--colors--warning-text: var(--c--theme--colors--greyscale-000);
   --c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000);
+  --c--theme--colors--card-border: #ddd;
   --c--theme--colors--primary-bg: #fafafa;
   --c--theme--colors--primary-150: #e5eefa;
   --c--theme--colors--info-150: #e5eefa;
@@ -314,6 +315,7 @@
 }
 
 .cunningham-theme--dsfr {
+  --c--theme--colors--card-border: #ddd;
   --c--theme--colors--primary-text: #000091;
   --c--theme--colors--primary-100: #f5f5fe;
   --c--theme--colors--primary-200: #ececfe;
@@ -713,6 +715,10 @@
   color: var(--c--theme--colors--danger-text);
 }
 
+.clr-card-border {
+  color: var(--c--theme--colors--card-border);
+}
+
 .clr-primary-bg {
   color: var(--c--theme--colors--primary-bg);
 }
@@ -1005,6 +1011,10 @@
   background-color: var(--c--theme--colors--danger-text);
 }
 
+.bg-card-border {
+  background-color: var(--c--theme--colors--card-border);
+}
+
 .bg-primary-bg {
   background-color: var(--c--theme--colors--primary-bg);
 }

diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
@@ -73,6 +73,7 @@ export const tokens = {
           'success-text': '#FFFFFF',
           'warning-text': '#FFFFFF',
           'danger-text': '#FFFFFF',
+          'card-border': '#DDDDDD',
           'primary-bg': '#FAFAFA',
           'primary-150': '#E5EEFA',
           'info-150': '#E5EEFA',
@@ -322,6 +323,7 @@ export const tokens = {
     dsfr: {
       theme: {
         colors: {
+          'card-border': '#DDDDDD',
           'primary-text': '#000091',
           'primary-100': '#f5f5fe',
           'primary-200': '#ececfe',

diff --git a/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx b/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx
@@ -24,6 +24,7 @@ export const TeamInfo = ({ team }: TeamInfoProps) => {
           aria-label={t('icon group')}
           style={{
             flexShrink: 0,
+            alignSelf: 'start',
           }}
         />
         <Box>
@@ -32,7 +33,7 @@ export const TeamInfo = ({ team }: TeamInfoProps) => {
               teamName: team.name,
             })}
           </Text>
-          <Text>
+          <Text $size="m">
             {t('Add people to the “{{teamName}}“ group.', {
               teamName: team.name,
             })}
@@ -44,16 +45,18 @@ export const TeamInfo = ({ team }: TeamInfoProps) => {
         $gap="1rem"
         $direction="row"
         $justify="space-evenly"
-        $css="border-top: 1px solid #e3e3e3;"
+        $css={`border-top: 1px solid ${colorsTokens()['card-border']};`}
       >
         <Text $size="s">
           {t('{{count}} member', { count: team.accesses.length })}
         </Text>
-        <Text $size="s">
-          {t('Created at {{created_at}}', { created_at: '06/02/2024' })}
+        <Text $size="s" $direction="row">
+          {t('Created at')}&nbsp;
+          <Text $weight="bold">06/02/2024</Text>
         </Text>
-        <Text $size="s">
-          {t('Last update at {{updated_at}}', { updated_at: '07/02/2024' })}
+        <Text $size="s" $direction="row">
+          {t('Last update at')}&nbsp;
+          <Text $weight="bold">07/02/2024</Text>
         </Text>
       </Box>
     </Card>