From 6c3f3f6a77e7725db77aa4faba491b9057689eb2 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 11 Oct 2024 13:29:07 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20components=20more=20mu?=
 =?UTF-8?q?lti=20theme=20friendly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We adapt a bit the tokens of some components to be
more multi theme friendly.
When we will add another theme, it will be
easier to adapt to the new theme.
---
 CHANGELOG.md                                  |  5 +++
 .../e2e/__tests__/app-impress/header.spec.ts  |  6 ++--
 src/frontend/apps/impress/cunningham.ts       |  8 +++++
 .../apps/impress/src/components/Icon.tsx      |  1 +
 .../src/cunningham/cunningham-style.css       |  2 ++
 .../src/cunningham/cunningham-tokens.css      |  8 +++++
 .../src/cunningham/cunningham-tokens.ts       |  4 +++
 .../doc-editor/components/PanelEditor.tsx     |  2 ++
 .../docs/doc-header/components/DocHeader.tsx  |  1 +
 .../docs/doc-header/components/DocToolBox.tsx | 10 +++---
 .../doc-header/components/ModalExport.tsx     |  7 +++-
 .../docs/doc-management/assets/icon-trash.svg |  6 ----
 .../components/ModalRemoveDoc.tsx             |  5 +--
 .../doc-management/components/ModalShare.tsx  | 11 ++++---
 .../doc-versioning/components/VersionItem.tsx | 25 +++++++++------
 .../members-list/components/MemberItem.tsx    |  6 +---
 .../src/features/header/components/Header.tsx |  3 +-
 .../features/header/components/LaGaufre.tsx   | 32 ++++++++++++-------
 .../src/features/language/LanguagePicker.tsx  | 13 ++++----
 .../language/assets/icon-language.svg         | 14 --------
 20 files changed, 101 insertions(+), 68 deletions(-)
 delete mode 100644 src/frontend/apps/impress/src/features/docs/doc-management/assets/icon-trash.svg
 delete mode 100644 src/frontend/apps/impress/src/features/language/assets/icon-language.svg

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b50b65d..b3891a23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,11 @@ and this project adheres to
 
 ## [Unreleased]
 
+## Changed
+
+♻️(frontend) More multi theme friendly #325
+
+
 ## [1.5.1] - 2024-10-10
 
 ## Fixed
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
index b29f610b..e1ade402 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
@@ -26,7 +26,7 @@ test.describe('Header', () => {
       }),
     ).toBeVisible();
 
-    await expect(header.getByAltText('Language Icon')).toBeVisible();
+    await expect(header.getByText('English')).toBeVisible();
 
     await expect(
       header.getByRole('button', {
@@ -87,7 +87,7 @@ test.describe('Header mobile', () => {
       }),
     ).toBeHidden();
 
-    await expect(page.getByAltText('Language Icon')).toBeHidden();
+    await expect(page.getByText('English')).toBeHidden();
 
     await header.getByLabel('Open the header menu').click();
 
@@ -97,7 +97,7 @@ test.describe('Header mobile', () => {
       }),
     ).toBeVisible();
 
-    await expect(page.getByAltText('Language Icon')).toBeVisible();
+    await expect(page.getByText('English')).toBeVisible();
   });
 });
 
diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts
index 6b158a6d..00f3c66a 100644
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -189,6 +189,9 @@ const config = {
             },
           },
         },
+        'la-gauffre': {
+          activated: false,
+        },
       },
     },
     dsfr: {
@@ -321,6 +324,7 @@ const config = {
               'color-hover': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
+            color: 'var(--c--theme--colors--primary-600)',
           },
         },
         datagrid: {
@@ -335,6 +339,7 @@ const config = {
           pagination: {
             'background-color': 'transparent',
             'background-color-active': 'var(--c--theme--colors--primary-300)',
+            'border-color': 'var(--c--theme--colors--primary-400)',
           },
         },
         'forms-checkbox': {
@@ -384,6 +389,9 @@ const config = {
         'forms-textarea': {
           'border-radius': '0',
         },
+        'la-gauffre': {
+          activated: true,
+        },
       },
     },
   },
diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx
index 163cf344..94aece6f 100644
--- a/src/frontend/apps/impress/src/components/Icon.tsx
+++ b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -13,6 +13,7 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
       $isMaterialIcon
       $size="36px"
       $theme="primary"
+      $variation="600"
       $background={colorsTokens()['primary-bg']}
       $css={`
         border: 1px solid ${colorsTokens()['primary-200']}; 
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
index 58770831..46da3784 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
@@ -255,6 +255,7 @@ input:-webkit-autofill:focus {
   gap: 3px;
   border-radius: 4px;
   background: var(--c--components--datagrid--pagination--background-color);
+  border-color: var(--c--components--datagrid--pagination--border-color);
 }
 
 .c__pagination__list .c__button--tertiary-text.c__button--active {
@@ -452,6 +453,7 @@ input:-webkit-autofill:focus {
 
 .c__button--tertiary-text {
   border: none;
+  color: var(--c--components--button--tertiary-text--color);
 }
 
 .c__button--tertiary-text:hover,
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
index 45dfd511..b30e3507 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
@@ -283,6 +283,7 @@
   );
   --c--components--button--disabled--color: white;
   --c--components--button--disabled--background--color: #b3cef0;
+  --c--components--la-gauffre--activated: false;
 }
 
 .cunningham-theme--dark {
@@ -451,6 +452,9 @@
   --c--components--button--tertiary-text--color-hover: var(
     --c--theme--colors--primary-text
   );
+  --c--components--button--tertiary-text--color: var(
+    --c--theme--colors--primary-600
+  );
   --c--components--datagrid--header--color: var(
     --c--theme--colors--primary-text
   );
@@ -461,6 +465,9 @@
   --c--components--datagrid--pagination--background-color-active: var(
     --c--theme--colors--primary-300
   );
+  --c--components--datagrid--pagination--border-color: var(
+    --c--theme--colors--primary-400
+  );
   --c--components--forms-checkbox--border-radius: 0;
   --c--components--forms-checkbox--color: var(--c--theme--colors--primary-text);
   --c--components--forms-checkbox--text--color: var(
@@ -504,6 +511,7 @@
     --c--theme--colors--primary-text
   );
   --c--components--forms-textarea--border-radius: 0;
+  --c--components--la-gauffre--activated: true;
 }
 
 .clr-secondary-text {
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
index ae7fd4f5..d435b859 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
@@ -276,6 +276,7 @@ export const tokens = {
           },
           disabled: { color: 'white', background: { color: '#b3cef0' } },
         },
+        'la-gauffre': { activated: false },
       },
     },
     dark: {
@@ -450,6 +451,7 @@ export const tokens = {
               'color-hover': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
+            color: 'var(--c--theme--colors--primary-600)',
           },
         },
         datagrid: {
@@ -464,6 +466,7 @@ export const tokens = {
           pagination: {
             'background-color': 'transparent',
             'background-color-active': 'var(--c--theme--colors--primary-300)',
+            'border-color': 'var(--c--theme--colors--primary-400)',
           },
         },
         'forms-checkbox': {
@@ -503,6 +506,7 @@ export const tokens = {
           'accent-color': 'var(--c--theme--colors--primary-text)',
         },
         'forms-textarea': { 'border-radius': '0' },
+        'la-gauffre': { activated: true },
       },
     },
   },
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx
index 0d0321b4..533fbe24 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx
@@ -102,6 +102,7 @@ export const PanelEditor = ({
               $weight="bold"
               $size="m"
               $theme="primary"
+              $variation="600"
               $padding={{ vertical: 'small', horizontal: 'small' }}
             >
               {t('Table of content')}
@@ -118,6 +119,7 @@ export const PanelEditor = ({
                 $weight="bold"
                 $size="m"
                 $theme="primary"
+                $variation="600"
                 $padding={{ vertical: 'small', horizontal: 'small' }}
               >
                 {t('Versions')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
index 2e6f007c..36249f2b 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
@@ -44,6 +44,7 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
             <Text
               $isMaterialIcon
               $theme="primary"
+              $variation="600"
               $size="2rem"
               $css={`&:hover {background-color: ${colorsTokens()['primary-100']}; };`}
               $hasTransition
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
index c74fc3d8..d362efa3 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, DropButton, IconOptions, Text } from '@/components';
+import { Box, DropButton, IconOptions } from '@/components';
 import { useAuthStore } from '@/core';
 import { usePanelEditorStore } from '@/features/docs/doc-editor/';
 import {
@@ -86,7 +86,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
                 icon={<span className="material-icons">history</span>}
                 size="small"
               >
-                <Text $theme="primary">{t('Version history')}</Text>
+                {t('Version history')}
               </Button>
             )}
             <Button
@@ -99,7 +99,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
               icon={<span className="material-icons">summarize</span>}
               size="small"
             >
-              <Text $theme="primary">{t('Table of contents')}</Text>
+              {t('Table of contents')}
             </Button>
             <Button
               onClick={() => {
@@ -110,7 +110,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
               icon={<span className="material-icons">file_download</span>}
               size="small"
             >
-              <Text $theme="primary">{t('Export')}</Text>
+              {t('Export')}
             </Button>
             {doc.abilities.destroy && (
               <Button
@@ -122,7 +122,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
                 icon={<span className="material-icons">delete</span>}
                 size="small"
               >
-                <Text $theme="primary">{t('Delete document')}</Text>
+                {t('Delete document')}
               </Button>
             )}
           </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
index 612869c1..2dc57569 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
@@ -152,7 +152,12 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
       size={ModalSize.MEDIUM}
       title={
         <Box $align="center" $gap="1rem">
-          <Text className="material-icons" $size="3.5rem" $theme="primary">
+          <Text
+            className="material-icons"
+            $size="3.5rem"
+            $theme="primary"
+            $variation="600"
+          >
             picture_as_pdf
           </Text>
           <Text as="h2" $size="h3" $margin="none" $theme="primary">
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/assets/icon-trash.svg b/src/frontend/apps/impress/src/features/docs/doc-management/assets/icon-trash.svg
deleted file mode 100644
index 2a446b24..00000000
--- a/src/frontend/apps/impress/src/features/docs/doc-management/assets/icon-trash.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M12 38C12 40.2 13.8 42 16 42H32C34.2 42 36 40.2 36 38V14H12V38ZM18.34 25.18C17.56 24.4 17.56 23.14 18.34 22.36C19.12 21.58 20.38 21.58 21.16 22.36L24 25.18L26.82 22.36C27.6 21.58 28.86 21.58 29.64 22.36C30.42 23.14 30.42 24.4 29.64 25.18L26.82 28L29.64 30.82C30.42 31.6 30.42 32.86 29.64 33.64C28.86 34.42 27.6 34.42 26.82 33.64L24 30.82L21.18 33.64C20.4 34.42 19.14 34.42 18.36 33.64C17.58 32.86 17.58 31.6 18.36 30.82L21.18 28L18.34 25.18ZM36 8H31L29.58 6.58C29.22 6.22 28.7 6 28.18 6H19.82C19.3 6 18.78 6.22 18.42 6.58L17 8H12C10.9 8 10 8.9 10 10C10 11.1 10.9 12 12 12H36C37.1 12 38 11.1 38 10C38 8.9 37.1 8 36 8Z"
-    fill="currentColor"
-  />
-</svg>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
index 2e4fc9b1..39963bd1 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
@@ -14,7 +14,6 @@ import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
 
 import { useRemoveDoc } from '../api/useRemoveDoc';
 import IconDoc from '../assets/icon-doc.svg';
-import IconRemove from '../assets/icon-trash.svg';
 import { Doc } from '../types';
 
 interface ModalRemoveDocProps {
@@ -73,7 +72,9 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
       size={ModalSize.MEDIUM}
       title={
         <Box $align="center" $gap="1rem">
-          <IconRemove width={48} color={colorsTokens()['primary-text']} />
+          <Text $isMaterialIcon $size="48px" $theme="primary" $variation="600">
+            delete_forever
+          </Text>
           <Text as="h2" $size="h3" $margin="none">
             {t('Deleting the document "{{title}}"', { title: doc.title })}
           </Text>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx
index 33a8aa56..9357c3cd 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx
@@ -1,7 +1,7 @@
 import { t } from 'i18next';
 import { createGlobalStyle } from 'styled-components';
 
-import { Box, Card, SideModal, Text } from '@/components';
+import { Box, Card, IconBG, SideModal, Text } from '@/components';
 import { InvitationList } from '@/features/docs/members/invitation-list';
 import { AddMembers } from '@/features/docs/members/members-add';
 import { MemberList } from '@/features/docs/members/members-list';
@@ -62,9 +62,12 @@ export const ModalShare = ({ onClose, doc }: ModalShareProps) => {
               $padding="tiny"
               $gap="1rem"
             >
-              <Text $isMaterialIcon $size="48px" $theme="primary">
-                share
-              </Text>
+              <IconBG
+                $isMaterialIcon
+                $size="48px"
+                iconName="share"
+                $margin="none"
+              />
               <Box $align="flex-start">
                 <Text as="h3" $size="26px" $margin="none">
                   {t('Share')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
index 738cc0c6..5dcf0e9f 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
@@ -35,13 +35,13 @@ export const VersionItem = ({
         as="li"
         $background={isActive ? colorsTokens()['primary-300'] : 'transparent'}
         $css={`
-        border-left: 4px solid transparent;
-        border-bottom: 1px solid ${colorsTokens()['primary-100']};
-        &:hover{
-          border-left: 4px solid ${colorsTokens()['primary-400']};
-          background: ${colorsTokens()['primary-300']};
-        }
-      `}
+          border-left: 4px solid transparent;
+          border-bottom: 1px solid ${colorsTokens()['primary-100']};
+          &:hover{
+            border-left: 4px solid ${colorsTokens()['primary-400']};
+            background: ${colorsTokens()['primary-300']};
+          }
+        `}
         $hasTransition
         $minWidth="13rem"
       >
@@ -54,10 +54,15 @@ export const VersionItem = ({
             $width="100%"
           >
             <Box $direction="row" $gap="0.5rem" $align="center">
-              <Text $isMaterialIcon $size="24px" $theme="primary">
+              <Text
+                $isMaterialIcon
+                $size="24px"
+                $theme="primary"
+                $variation="600"
+              >
                 description
               </Text>
-              <Text $weight="bold" $theme="primary" $size="m">
+              <Text $weight="bold" $theme="primary" $size="m" $variation="600">
                 {text}
               </Text>
             </Box>
@@ -81,7 +86,7 @@ export const VersionItem = ({
                     icon={<span className="material-icons">save</span>}
                     size="small"
                   >
-                    <Text $theme="primary">{t('Restore the version')}</Text>
+                    {t('Restore the version')}
                   </Button>
                 </Box>
               </DropButton>
diff --git a/src/frontend/apps/impress/src/features/docs/members/members-list/components/MemberItem.tsx b/src/frontend/apps/impress/src/features/docs/members/members-list/components/MemberItem.tsx
index ccfbe192..c9b1e9d2 100644
--- a/src/frontend/apps/impress/src/features/docs/members/members-list/components/MemberItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/members/members-list/components/MemberItem.tsx
@@ -116,11 +116,7 @@ export const MemberItem = ({
                 <Button
                   color="tertiary-text"
                   icon={
-                    <Text
-                      $isMaterialIcon
-                      $theme={isNotAllowed ? 'greyscale' : 'primary'}
-                      $variation={isNotAllowed ? '500' : 'text'}
-                    >
+                    <Text $isMaterialIcon $color="inherit">
                       delete
                     </Text>
                   }
diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx
index 7e022e5d..e03a0d6c 100644
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -62,9 +62,10 @@ export const Header = () => {
               <Text
                 $margin="none"
                 as="h2"
-                $theme="primary"
+                $color="#000091"
                 $zIndex={1}
                 $size="1.30rem"
+                $css="font-family: 'Marianne'"
               >
                 {t('Docs')}
               </Text>
diff --git a/src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx b/src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx
index 627ac8ee..dce37284 100644
--- a/src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/LaGaufre.tsx
@@ -4,20 +4,30 @@ import Script from 'next/script';
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 
+import { useCunninghamTheme } from '@/cunningham';
+
 const GaufreStyle = createGlobalStyle`
   .lasuite-gaufre-btn{
     box-shadow: inset 0 0 0 0 !important;
   }
 `;
 
-export const LaGaufre = () => (
-  <>
-    <Script
-      src="https://integration.lasuite.numerique.gouv.fr/api/v1/gaufre.js"
-      strategy="lazyOnload"
-      id="lasuite-gaufre-script"
-    />
-    <GaufreStyle />
-    <Gaufre variant="small" />
-  </>
-);
+export const LaGaufre = () => {
+  const { componentTokens } = useCunninghamTheme();
+
+  if (!componentTokens()['la-gauffre'].activated) {
+    return null;
+  }
+
+  return (
+    <>
+      <Script
+        src="https://integration.lasuite.numerique.gouv.fr/api/v1/gaufre.js"
+        strategy="lazyOnload"
+        id="lasuite-gaufre-script"
+      />
+      <GaufreStyle />
+      <Gaufre variant="small" />
+    </>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
index 8dce8157..0953fae5 100644
--- a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
+++ b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
@@ -1,5 +1,4 @@
 import { Select } from '@openfun/cunningham-react';
-import Image from 'next/image';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
@@ -7,8 +6,6 @@ import styled from 'styled-components';
 import { Box, Text } from '@/components/';
 import { LANGUAGES_ALLOWED } from '@/i18n/conf';
 
-import IconLanguage from './assets/icon-language.svg?url';
-
 const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
   flex-shrink: 0;
   width: auto;
@@ -49,12 +46,16 @@ export const LanguagePicker = () => {
           $gap="0.7rem"
           $align="center"
         >
-          <Image priority src={IconLanguage} alt={t('Language Icon')} />
-          <Text $theme="primary">{LANGUAGES_ALLOWED[lang]}</Text>
+          <Text $isMaterialIcon $size="1rem" $theme="primary" $variation="600">
+            translate
+          </Text>
+          <Text $theme="primary" $variation="600">
+            {LANGUAGES_ALLOWED[lang]}
+          </Text>
         </Box>
       ),
     }));
-  }, [languages, t]);
+  }, [languages]);
 
   return (
     <SelectStyled
diff --git a/src/frontend/apps/impress/src/features/language/assets/icon-language.svg b/src/frontend/apps/impress/src/features/language/assets/icon-language.svg
deleted file mode 100644
index 022f51bd..00000000
--- a/src/frontend/apps/impress/src/features/language/assets/icon-language.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M12.334 6.66683L15.2673 14.0002H13.8307L13.03 12.0002H10.3033L9.50398 14.0002H8.06798L11.0007 6.66683H12.334ZM6.66732 1.3335V2.66683H10.6673V4.00016H9.35532C8.84106 5.54821 8.0203 6.97684 6.94198 8.20083C7.42285 8.6299 7.94444 9.01104 8.49932 9.33883L7.99865 10.5908C7.28233 10.1846 6.61238 9.70149 6.00065 9.15016C4.80971 10.228 3.39934 11.035 1.86665 11.5155L1.50932 10.2295C2.82254 9.81077 4.03266 9.11972 5.06065 8.2015C4.29978 7.34012 3.66603 6.37434 3.17865 5.3335H4.67198C5.04355 6.0194 5.4891 6.66257 6.00065 7.2515C6.83406 6.2909 7.49085 5.19037 7.94065 4.00083L1.33398 4.00016V2.66683H5.33398V1.3335H6.66732ZM11.6673 8.59016L10.836 10.6668H12.4973L11.6673 8.59016Z"
-    fill="#000091"
-  />
-</svg>