From a751f1255a83535a4286bd09a2b8b8819564d12d Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 19 Sep 2025 14:58:06 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20replace=20Arial?=
 =?UTF-8?q?=20font-family=20with=20token=20font?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In some components, the Arial font was still used
because of a centering problem.
We removed all instances of Arial and replaced them
with the current font token, the centering problems
were fixed by adding "contain: content;" to the css.
---
 CHANGELOG.md                                  |  4 +-
 .../apps/impress/src/components/Text.tsx      |  3 ++
 .../src/cunningham/cunningham-style.css       |  7 ++++
 .../doc-share/components/DocRoleDropdown.tsx  |  8 +---
 .../components/DocShareInvitation.tsx         |  8 ++--
 .../docs/doc-share/components/UserAvatar.tsx  | 37 +++++++------------
 6 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 359e5234..84d2978a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,8 +10,10 @@ and this project adheres to
 
 ### Changed
 
+- ♻️(frontend) replace Arial font-family with token font #1411
 - ♿(frontend) improve accessibility:
   - #1354
+  - #1349
   - ♿ improve accessibility by adding landmark roles to layout #1394
   - ♿ add document visible in list and openable via enter key #1365
   - ♿ add pdf outline property to enable bookmarks display #1368
@@ -29,8 +31,6 @@ and this project adheres to
 ### Added
 
 - ✨(api) add API route to fetch document content #1206
-- ♿(frontend) improve accessibility:
-  - #1349
 
 ### Changed
 
diff --git a/src/frontend/apps/impress/src/components/Text.tsx b/src/frontend/apps/impress/src/components/Text.tsx
index 83bf0b32..80f9da83 100644
--- a/src/frontend/apps/impress/src/components/Text.tsx
+++ b/src/frontend/apps/impress/src/components/Text.tsx
@@ -13,6 +13,7 @@ export interface TextProps extends BoxProps {
   $ellipsis?: boolean;
   $weight?: CSSProperties['fontWeight'];
   $textAlign?: CSSProperties['textAlign'];
+  $textTransform?: CSSProperties['textTransform'];
   $size?: TextSizes | (string & {});
   $theme?:
     | 'primary'
@@ -43,6 +44,8 @@ export type TextType = ComponentPropsWithRef<typeof Text>;
 
 export const TextStyled = styled(Box)<TextProps>`
   ${({ $textAlign }) => $textAlign && `text-align: ${$textAlign};`}
+  ${({ $textTransform }) =>
+    $textTransform && `text-transform: ${$textTransform};`}
   ${({ $weight }) => $weight && `font-weight: ${$weight};`}
   ${({ $size }) =>
     $size &&
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
index 3a1b5c8d..b79f9e60 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
@@ -38,6 +38,13 @@
   );
 }
 
+/**
+ * Button
+*/
+.c__button {
+  contain: content;
+}
+
 /**
  * Modal
 */
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx
index 2a0212a6..2deb388c 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx
@@ -125,13 +125,7 @@ export const DocRoleDropdown = ({
         },
       ]}
     >
-      <Text
-        $theme="primary"
-        $variation="800"
-        $css={css`
-          font-family: Arial, Helvetica, sans-serif;
-        `}
-      >
+      <Text $theme="primary" $variation="800">
         {transRole(currentRole)}
       </Text>
     </DropdownMenu>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx
index 780f1ae0..31c36770 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx
@@ -151,12 +151,12 @@ export const DocShareModalInviteUserRow = ({
             $direction="row"
             $align="center"
             $css={css`
-              font-family: Arial, Helvetica, sans-serif;
-              font-size: var(--c--theme--font--sizes--sm);
-              color: var(--c--theme--colors--greyscale-400);
+              contain: content;
             `}
+            $color="var(--c--theme--colors--greyscale-400)"
+            $cursor="pointer"
           >
-            <Text $theme="primary" $variation="800">
+            <Text $theme="primary" $variation="800" $size="sm">
               {t('Add')}
             </Text>
             <Icon
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
index 76dd73c7..1cb0b9a5 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-import { Box } from '@/components';
+import { Text } from '@/components';
 import { tokens } from '@/cunningham';
 import { User } from '@/features/auth';
 
@@ -37,35 +37,26 @@ export const UserAvatar = ({ user, background }: Props) => {
   const splitName = name?.split(' ');
 
   return (
-    <Box
+    <Text
+      className="--docs--user-avatar"
+      $align="center"
+      $color="rgba(255, 255, 255, 0.9)"
+      $justify="center"
       $background={background || getColorFromName(name)}
       $width="24px"
       $height="24px"
-      $direction="row"
-      $align="center"
-      $justify="center"
       $radius="50%"
+      $size="10px"
+      $textAlign="center"
+      $textTransform="uppercase"
+      $weight={600}
       $css={css`
-        color: rgba(255, 255, 255, 0.9);
         border: 1px solid rgba(255, 255, 255, 0.5);
+        contain: content;
       `}
-      className="--docs--user-avatar"
     >
-      <Box
-        $direction="row"
-        $css={css`
-          text-align: center;
-          font-style: normal;
-          font-weight: 600;
-          font-family:
-            Arial, Helvetica, sans-serif; // Can't use marianne font because it's impossible to center with this font
-          font-size: 10px;
-          text-transform: uppercase;
-        `}
-      >
-        {splitName[0]?.charAt(0)}
-        {splitName?.[1]?.charAt(0)}
-      </Box>
-    </Box>
+      {splitName[0]?.charAt(0)}
+      {splitName?.[1]?.charAt(0)}
+    </Text>
   );
 };