💄(frontend) adapt language picker design

Adapt the language picker design to
to fit with the new design of the app.

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -97,7 +97,7 @@ export const addNewMember = async (
 
   // Choose a role
   await page.getByLabel('doc-role-dropdown').click();
-  await page.getByRole('button', { name: role }).click();
+  await page.getByRole('menuitem', { name: role }).click();
   await page.getByRole('button', { name: 'Invite' }).click();
 
   return users[index].email;

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -37,10 +37,10 @@ test.describe('Doc Editor', () => {
 
     // Change language to French
     await header.click();
-    await header.getByRole('combobox').getByText('English').click();
+    await header.getByRole('button', { name: /Language/ }).click();
-    await header.getByRole('option', { name: 'Français' }).click();
+    await page.getByRole('menuitem', { name: 'Français' }).click();
     await expect(
-      header.getByRole('combobox').getByText('Français'),
+      header.getByRole('button').getByText('Français'),
     ).toBeVisible();
 
     // Trigger slash menu to show french menu
@@ -130,7 +130,7 @@ test.describe('Doc Editor', () => {
 
     await selectVisibility.click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Connected',
       })
       .click();

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -89,7 +89,7 @@ test.describe('Doc Header', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Delete document',
       })
       .click();
@@ -153,7 +153,7 @@ test.describe('Doc Header', () => {
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('button', { name: 'Delete document' }),
+      page.getByRole('menuitem', { name: 'Delete document' }),
     ).toBeDisabled();
 
     // Click somewhere else to close the options
@@ -177,7 +177,7 @@ test.describe('Doc Header', () => {
     await invitationCard.getByRole('button', { name: 'more_horiz' }).click();
 
     await expect(
-      page.getByRole('button', {
+      page.getByRole('menuitem', {
         name: 'delete',
       }),
     ).toBeEnabled();
@@ -195,7 +195,7 @@ test.describe('Doc Header', () => {
     await memberCard.getByRole('button', { name: 'more_horiz' }).click();
 
     await expect(
-      page.getByRole('button', {
+      page.getByRole('menuitem', {
         name: 'delete',
       }),
     ).toBeEnabled();
@@ -233,7 +233,7 @@ test.describe('Doc Header', () => {
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('button', { name: 'Delete document' }),
+      page.getByRole('menuitem', { name: 'Delete document' }),
     ).toBeDisabled();
 
     // Click somewhere else to close the options
@@ -295,7 +295,7 @@ test.describe('Doc Header', () => {
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('button', { name: 'Delete document' }),
+      page.getByRole('menuitem', { name: 'Delete document' }),
     ).toBeDisabled();
 
     // Click somewhere else to close the options
@@ -352,7 +352,7 @@ test.describe('Doc Header', () => {
 
     // Copy content to clipboard
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('button', { name: 'Copy as Markdown' }).click();
+    await page.getByRole('menuitem', { name: 'Copy as Markdown' }).click();
     await expect(page.getByText('Copied to clipboard')).toBeVisible();
 
     // Test that clipboard is in Markdown format
@@ -387,7 +387,7 @@ test.describe('Doc Header', () => {
 
     // Copy content to clipboard
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('button', { name: 'Copy as HTML' }).click();
+    await page.getByRole('menuitem', { name: 'Copy as HTML' }).click();
     await expect(page.getByText('Copied to clipboard')).toBeVisible();
 
     // Test that clipboard is in HTML format
@@ -460,7 +460,7 @@ test.describe('Documents Header mobile', () => {
 
     await expect(page.getByRole('button', { name: 'Copy link' })).toBeHidden();
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('button', { name: 'Share' }).click();
+    await page.getByRole('menuitem', { name: 'Share' }).click();
     await page.getByRole('button', { name: 'Copy link' }).click();
     await expect(page.getByText('Link Copied !')).toBeVisible();
     // Test that clipboard is in HTML format
@@ -494,7 +494,7 @@ test.describe('Documents Header mobile', () => {
     await goToGridDoc(page);
 
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('button', { name: 'Share' }).click();
+    await page.getByRole('menuitem', { name: 'Share' }).click();
 
     await expect(page.getByLabel('Share modal')).toBeVisible();
     await page.getByRole('button', { name: 'close' }).click();

src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts

@@ -65,15 +65,15 @@ test.describe('Document create member', () => {
 
     // Check roles are displayed
     await list.getByLabel('doc-role-dropdown').click();
-    await expect(page.getByRole('button', { name: 'Reader' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Reader' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Editor' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Editor' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Owner' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Owner' })).toBeVisible();
     await expect(
-      page.getByRole('button', { name: 'Administrator' }),
+      page.getByRole('menuitem', { name: 'Administrator' }),
     ).toBeVisible();
 
     // Validate
-    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('menuitem', { name: 'Administrator' }).click();
     await page.getByRole('button', { name: 'Invite' }).click();
 
     // Check invitation added
@@ -121,7 +121,7 @@ test.describe('Document create member', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Owner' }).click();
+    await page.getByRole('menuitem', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
@@ -139,7 +139,7 @@ test.describe('Document create member', () => {
 
     // Choose a role
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Owner' }).click();
+    await page.getByRole('menuitem', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitationFail = page.waitForResponse(
       (response) =>
@@ -162,8 +162,8 @@ test.describe('Document create member', () => {
     await createDoc(page, 'user-invitation', browserName, 1);
 
     const header = page.locator('header').first();
-    await header.getByRole('combobox').getByText('EN').click();
+    await header.getByRole('button', { name: /Language/ }).click();
-    await header.getByRole('option', { name: 'translate Français' }).click();
+    await page.getByRole('menuitem', { name: 'Français' }).click();
 
     await page.getByRole('button', { name: 'Partager' }).click();
 
@@ -178,7 +178,7 @@ test.describe('Document create member', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Administrateur' }).click();
+    await page.getByRole('menuitem', { name: 'Administrateur' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
@@ -212,7 +212,7 @@ test.describe('Document create member', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('menuitem', { name: 'Administrator' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
@@ -232,14 +232,14 @@ test.describe('Document create member', () => {
     await expect(userInvitation).toBeVisible();
 
     await userInvitation.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Reader' }).click();
+    await page.getByRole('menuitem', { name: 'Reader' }).click();
 
     const moreActions = userInvitation.getByRole('button', {
       name: 'more_horiz',
     });
     await moreActions.click();
 
-    await page.getByRole('button', { name: 'Delete' }).click();
+    await page.getByRole('menuitem', { name: 'Delete' }).click();
 
     await expect(userInvitation).toBeHidden();
   });

src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts

@@ -161,12 +161,12 @@ test.describe('Document list members', () => {
     await list.click();
 
     await currentUserRole.click();
-    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('menuitem', { name: 'Administrator' }).click();
     await list.click();
     await expect(currentUserRole).toBeVisible();
 
     await currentUserRole.click();
-    await page.getByRole('button', { name: 'Reader' }).click();
+    await page.getByRole('menuitem', { name: 'Reader' }).click();
     await list.click();
     await expect(currentUserRole).toBeHidden();
   });
@@ -215,11 +215,11 @@ test.describe('Document list members', () => {
     await expect(mySelfMoreActions).toBeVisible();
 
     await userReaderMoreActions.click();
-    await page.getByRole('button', { name: 'Delete' }).click();
+    await page.getByRole('menuitem', { name: 'Delete' }).click();
     await expect(userReader).toBeHidden();
 
     await mySelfMoreActions.click();
-    await page.getByRole('button', { name: 'Delete' }).click();
+    await page.getByRole('menuitem', { name: 'Delete' }).click();
     await expect(
       page.getByText('You do not have permission to view this document.'),
     ).toBeVisible();

src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts

@@ -19,7 +19,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Version history',
       })
       .click();
@@ -59,7 +59,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Version history',
       })
       .click();
@@ -91,7 +91,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await expect(
-      page.getByRole('button', { name: 'Version history' }),
+      page.getByRole('menuitem', { name: 'Version history' }),
     ).toBeDisabled();
   });
 
@@ -120,7 +120,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Version history',
       })
       .click();

src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts

@@ -50,7 +50,7 @@ test.describe('Doc Visibility', () => {
 
     await selectVisibility.click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Connected',
       })
       .click();
@@ -60,7 +60,7 @@ test.describe('Doc Visibility', () => {
     await selectVisibility.click();
 
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Public',
       })
       .click();
@@ -162,7 +162,7 @@ test.describe('Doc Visibility: Restricted', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('menuitem', { name: 'Administrator' }).click();
 
     await page.getByRole('button', { name: 'Invite' }).click();
 
@@ -215,7 +215,7 @@ test.describe('Doc Visibility: Public', () => {
     await selectVisibility.click();
 
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Public',
       })
       .click();
@@ -227,7 +227,7 @@ test.describe('Doc Visibility: Public', () => {
     await expect(page.getByLabel('Visibility mode')).toBeVisible();
     await page.getByLabel('Visibility mode').click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Reading',
       })
       .click();
@@ -289,7 +289,7 @@ test.describe('Doc Visibility: Public', () => {
     await selectVisibility.click();
 
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Public',
       })
       .click();
@@ -357,7 +357,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     const selectVisibility = page.getByLabel('Visibility', { exact: true });
     await selectVisibility.click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Connected',
       })
       .click();
@@ -407,7 +407,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     const selectVisibility = page.getByLabel('Visibility', { exact: true });
     await selectVisibility.click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Connected',
       })
       .click();
@@ -461,7 +461,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     const selectVisibility = page.getByLabel('Visibility', { exact: true });
     await selectVisibility.click();
     await page
-      .getByRole('button', {
+      .getByRole('menuitem', {
         name: 'Connected',
       })
       .click();

src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts

@@ -12,7 +12,7 @@ test.describe('Home page', () => {
     const footer = page.locator('footer').first();
     await expect(header).toBeVisible();
     await expect(
-      header.getByRole('combobox', { name: 'Language' }),
+      header.getByRole('button', { name: /Language/ }),
     ).toBeVisible();
     await expect(
       header.getByRole('button', { name: 'Les services de La Suite numé' }),

src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts

@@ -9,19 +9,20 @@ test.describe('Language', () => {
     await expect(page.getByLabel('Logout')).toBeVisible();
 
     const header = page.locator('header').first();
-    await header.getByRole('combobox').getByText('English').click();
+    await header
-    await header.getByRole('option', { name: 'Français' }).click();
+      .getByRole('button', { name: /Language/ })
+      .getByText('English')
+      .click();
+    await page.getByRole('menuitem', { name: 'Français' }).click();
     await expect(
-      header.getByRole('combobox').getByText('Français'),
+      header.getByRole('button').getByText('Français'),
     ).toBeVisible();
 
     await expect(page.getByLabel('Se déconnecter')).toBeVisible();
 
-    await header.getByRole('combobox').getByText('Français').click();
+    await header.getByRole('button').getByText('Français').click();
-    await header.getByRole('option', { name: 'Deutsch' }).click();
+    await page.getByRole('menuitem', { name: 'Deutsch' }).click();
-    await expect(
+    await expect(header.getByRole('button').getByText('Deutsch')).toBeVisible();
-      header.getByRole('combobox').getByText('Deutsch'),
-    ).toBeVisible();
 
     await expect(page.getByLabel('Abmelden')).toBeVisible();
   });
@@ -53,8 +54,11 @@ test.describe('Language', () => {
 
     // Switch language to French
     const header = page.locator('header').first();
-    await header.getByRole('combobox').getByText('English').click();
+    await header
-    await header.getByRole('option', { name: 'Français' }).click();
+      .getByRole('button', { name: /Language/ })
+      .getByText('English')
+      .click();
+    await page.getByRole('menuitem', { name: 'Français' }).click();
 
     // Check for French 404 response
     await check404Response('Pas trouvé.');

src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts

@@ -29,7 +29,7 @@ test.describe('Left panel mobile', () => {
     const header = page.locator('header').first();
     const homeButton = page.getByRole('button', { name: 'house' });
     const newDocButton = page.getByRole('button', { name: 'New doc' });
-    const languageButton = page.getByRole('combobox', { name: 'Language' });
+    const languageButton = page.getByRole('button', { name: /Language/ });
     const logoutButton = page.getByRole('button', { name: 'Logout' });
 
     await expect(homeButton).not.toBeInViewport();

src/frontend/apps/impress/cunningham.ts

@@ -381,6 +381,7 @@ const config = {
               'color-active': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
+            color: 'var(--c--theme--colors--primary-800)',
           },
           secondary: {
             background: {

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -8,17 +8,20 @@ import {
 import { Button, Popover } from 'react-aria-components';
 import styled from 'styled-components';
 
+import { BoxProps } from './Box';
+
 const StyledPopover = styled(Popover)`
   background-color: white;
   border-radius: 4px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-
   border: 1px solid #dddddd;
-
   transition: opacity 0.2s ease-in-out;
 `;
 
-const StyledButton = styled(Button)`
+interface StyledButtonProps {
+  $css?: BoxProps['$css'];
+}
+const StyledButton = styled(Button)<StyledButtonProps>`
   cursor: pointer;
   border: none;
   background: none;
@@ -29,10 +32,12 @@ const StyledButton = styled(Button)`
   font-size: 0.938rem;
   padding: 0;
   text-wrap: nowrap;
+  ${({ $css }) => $css};
 `;
 
 export interface DropButtonProps {
   button: ReactNode;
+  buttonCss?: BoxProps['$css'];
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   label?: string;
@@ -40,6 +45,7 @@ export interface DropButtonProps {
 
 export const DropButton = ({
   button,
+  buttonCss,
   isOpen = false,
   onOpenChange,
   children,
@@ -64,6 +70,7 @@ export const DropButton = ({
         ref={triggerRef}
         onPress={() => onOpenChangeHandler(true)}
         aria-label={label}
+        $css={buttonCss}
       >
         {button}
       </StyledButton>

src/frontend/apps/impress/src/components/DropdownMenu.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren, useRef, useState } from 'react';
 import { css } from 'styled-components';
 
 import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
@@ -20,6 +20,7 @@ export type DropdownMenuProps = {
   showArrow?: boolean;
   label?: string;
   arrowCss?: BoxProps['$css'];
+  buttonCss?: BoxProps['$css'];
   disabled?: boolean;
   topMessage?: string;
 };
@@ -30,6 +31,7 @@ export const DropdownMenu = ({
   disabled = false,
   showArrow = false,
   arrowCss,
+  buttonCss,
   label,
   topMessage,
 }: PropsWithChildren<DropdownMenuProps>) => {
@@ -37,6 +39,7 @@ export const DropdownMenu = ({
   const spacings = theme.spacingsTokens();
   const colors = theme.colorsTokens();
   const [isOpen, setIsOpen] = useState(false);
+  const blockButtonRef = useRef<HTMLDivElement>(null);
 
   const onOpenChange = (isOpen: boolean) => {
     setIsOpen(isOpen);
@@ -51,10 +54,17 @@ export const DropdownMenu = ({
       isOpen={isOpen}
       onOpenChange={onOpenChange}
       label={label}
+      buttonCss={buttonCss}
       button={
         showArrow ? (
-          <Box $direction="row" $align="center">
+          <Box
-            <div>{children}</div>
+            ref={blockButtonRef}
+            $direction="row"
+            $align="center"
+            $position="relative"
+            aria-controls="menu"
+          >
+            <Box>{children}</Box>
             <Icon
               $variation="600"
               $css={
@@ -67,11 +77,17 @@ export const DropdownMenu = ({
             />
           </Box>
         ) : (
-          children
+          <Box ref={blockButtonRef} aria-controls="menu">
+            {children}
+          </Box>
         )
       }
     >
-      <Box $maxWidth="320px">
+      <Box
+        $maxWidth="320px"
+        $minWidth={`${blockButtonRef.current?.clientWidth}px`}
+        role="menu"
+      >
         {topMessage && (
           <Text
             $variation="700"
@@ -90,6 +106,7 @@ export const DropdownMenu = ({
           const isDisabled = option.disabled !== undefined && option.disabled;
           return (
             <BoxButton
+              role="menuitem"
               aria-label={option.label}
               data-testid={option.testId}
               $direction="row"

src/frontend/apps/impress/src/components/Text.tsx

@@ -25,7 +25,9 @@ export interface TextProps extends BoxProps {
   $size?: TextSizes | (string & {});
   $theme?:
     | 'primary'
+    | 'primary-text'
     | 'secondary'
+    | 'secondary-text'
     | 'info'
     | 'success'
     | 'warning'

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -406,6 +406,10 @@ input:-webkit-autofill:focus {
   );
 }
 
+.c__button--primary-text {
+  color: var(--c--components--button--primary-text--color);
+}
+
 .c__button--primary-text:hover,
 .c__button--primary-text:focus-visible {
   background-color: var(

src/frontend/apps/impress/src/cunningham/cunningham-tokens.css

@@ -505,6 +505,9 @@
   --c--components--button--primary-text--color-hover: var(
     --c--theme--colors--primary-text
   );
+  --c--components--button--primary-text--color: var(
+    --c--theme--colors--primary-800
+  );
   --c--components--button--secondary--background--color-hover: #f6f6f6;
   --c--components--button--secondary--background--color-active: #ededed;
   --c--components--button--secondary--border--color: var(

src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts

@@ -505,6 +505,7 @@ export const tokens = {
               'color-active': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
+            color: 'var(--c--theme--colors--primary-800)',
           },
           secondary: {
             background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' },

src/frontend/apps/impress/src/features/language/LanguagePicker.tsx

@@ -1,84 +1,61 @@
-import { Select } from '@openfun/cunningham-react';
 import { Settings } from 'luxon';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
+import { css } from 'styled-components';
 
-import { Box, Text } from '@/components/';
+import { DropdownMenu, Text } from '@/components/';
 import { LANGUAGES_ALLOWED } from '@/i18n/conf';
 
-const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
-  flex-shrink: 0;
-  width: auto;
-
-  .c__select__wrapper {
-    min-height: 2rem;
-    height: auto;
-    border-color: transparent;
-    padding: 0 0.15rem 0 0.45rem;
-    border-radius: 1px;
-
-    .labelled-box .labelled-box__children {
-      padding-right: 2rem;
-
-      .c_select__render .typo-text {
-        ${({ $isSmall }) => $isSmall && `display: none;`}
-      }
-    }
-
-    &:hover {
-      box-shadow: none !important;
-    }
-  }
-`;
-
 export const LanguagePicker = () => {
   const { t, i18n } = useTranslation();
   const { preload: languages } = i18n.options;
-  Settings.defaultLocale = i18n.language;
+  const language = i18n.language;
+  Settings.defaultLocale = language;
 
   const optionsPicker = useMemo(() => {
     return (languages || []).map((lang) => ({
-      value: lang,
+      label: LANGUAGES_ALLOWED[lang],
-      label: lang,
+      isSelected: language === lang,
-      render: () => (
+      callback: () => {
-        <Box
+        i18n.changeLanguage(lang).catch((err) => {
-          className="c_select__render"
-          $direction="row"
-          $gap="0.7rem"
-          $align="center"
-        >
-          <Text
-            $isMaterialIcon
-            $size="1rem"
-            $theme="primary"
-            $weight="bold"
-            $variation="800"
-          >
-            translate
-          </Text>
-          <Text $theme="primary" $weight="500" $variation="800">
-            {LANGUAGES_ALLOWED[lang]}
-          </Text>
-        </Box>
-      ),
-    }));
-  }, [languages]);
-
-  return (
-    <SelectStyled
-      label={t('Language')}
-      showLabelWhenSelected={false}
-      clearable={false}
-      hideLabel
-      defaultValue={i18n.language}
-      className="c_select__no_bg"
-      options={optionsPicker}
-      onChange={(e) => {
-        i18n.changeLanguage(e.target.value as string).catch((err) => {
           console.error('Error changing language', err);
         });
-      }}
+      },
-    />
+    }));
+  }, [i18n, language, languages]);
+
+  return (
+    <DropdownMenu
+      options={optionsPicker}
+      showArrow
+      buttonCss={css`
+        &:hover {
+          background-color: var(
+            --c--components--button--primary-text--background--color-hover
+          );
+        }
+        border-radius: 4px;
+        padding: 0.5rem 0.6rem;
+        & > div {
+          gap: 0.2rem;
+          display: flex;
+        }
+        & .material-icons {
+          color: var(--c--components--button--primary-text--color) !important;
+        }
+      `}
+    >
+      <Text
+        $theme="primary"
+        aria-label={t('Language')}
+        $direction="row"
+        $gap="0.5rem"
+      >
+        <Text $isMaterialIcon $color="inherit" $size="xl">
+          translate
+        </Text>
+        {LANGUAGES_ALLOWED[language]}
+      </Text>
+    </DropdownMenu>
   );
 };