From 50d098c77764c53935a5629f81b5d6e335f39602 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Tue, 18 Feb 2025 12:12:41 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20adapt=20language=20pic?= =?UTF-8?q?ker=20design?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adapt the language picker design to to fit with the new design of the app. --- .../apps/e2e/__tests__/app-impress/common.ts | 2 +- .../__tests__/app-impress/doc-editor.spec.ts | 8 +- .../__tests__/app-impress/doc-header.spec.ts | 20 ++-- .../app-impress/doc-member-create.spec.ts | 26 ++-- .../app-impress/doc-member-list.spec.ts | 8 +- .../__tests__/app-impress/doc-version.spec.ts | 8 +- .../app-impress/doc-visibility.spec.ts | 18 +-- .../e2e/__tests__/app-impress/home.spec.ts | 2 +- .../__tests__/app-impress/language.spec.ts | 24 ++-- .../__tests__/app-impress/left-panel.spec.ts | 2 +- src/frontend/apps/impress/cunningham.ts | 1 + .../impress/src/components/DropButton.tsx | 13 +- .../impress/src/components/DropdownMenu.tsx | 27 ++++- .../apps/impress/src/components/Text.tsx | 2 + .../src/cunningham/cunningham-style.css | 4 + .../src/cunningham/cunningham-tokens.css | 3 + .../src/cunningham/cunningham-tokens.ts | 1 + .../src/features/language/LanguagePicker.tsx | 113 +++++++----------- 18 files changed, 149 insertions(+), 133 deletions(-) diff --git a/src/frontend/apps/e2e/__tests__/app-impress/common.ts b/src/frontend/apps/e2e/__tests__/app-impress/common.ts index 31de3f4a..04597058 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/common.ts +++ b/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; diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts index 035e39e0..470dfadd 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts +++ b/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('option', { name: 'Français' }).click(); + await header.getByRole('button', { name: /Language/ }).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(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts index 1012c2c3..a8c6414c 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts +++ b/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(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts index ec2a3953..8d9dbfc0 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts +++ b/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('button', { name: 'Editor' })).toBeVisible(); - await expect(page.getByRole('button', { name: 'Owner' })).toBeVisible(); + await expect(page.getByRole('menuitem', { name: 'Reader' })).toBeVisible(); + await expect(page.getByRole('menuitem', { name: 'Editor' })).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('option', { name: 'translate Français' }).click(); + await header.getByRole('button', { name: /Language/ }).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(); }); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts index 7e2c2117..f27c9baf 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts +++ b/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(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts index d64172ee..31d6fd59 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts +++ b/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(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts index 104a5437..2a0f024f 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts +++ b/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(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts index 8f09c346..8eee4262 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts +++ b/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é' }), diff --git a/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts index ad5996aa..4a03870c 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts +++ b/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.getByRole('option', { name: 'Français' }).click(); + await header + .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('option', { name: 'Deutsch' }).click(); - await expect( - header.getByRole('combobox').getByText('Deutsch'), - ).toBeVisible(); + await header.getByRole('button').getByText('Français').click(); + await page.getByRole('menuitem', { name: 'Deutsch' }).click(); + await expect(header.getByRole('button').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.getByRole('option', { name: 'Français' }).click(); + await header + .getByRole('button', { name: /Language/ }) + .getByText('English') + .click(); + await page.getByRole('menuitem', { name: 'Français' }).click(); // Check for French 404 response await check404Response('Pas trouvé.'); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts index 576cf8b0..97523aa5 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts +++ b/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(); diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts index 3a96c054..b92c12b1 100644 --- a/src/frontend/apps/impress/cunningham.ts +++ b/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: { diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx index 9326184a..2dbb26f8 100644 --- a/src/frontend/apps/impress/src/components/DropButton.tsx +++ b/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)` 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} diff --git a/src/frontend/apps/impress/src/components/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/DropdownMenu.tsx index 2ca560bb..2664e928 100644 --- a/src/frontend/apps/impress/src/components/DropdownMenu.tsx +++ b/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) => { @@ -37,6 +39,7 @@ export const DropdownMenu = ({ const spacings = theme.spacingsTokens(); const colors = theme.colorsTokens(); const [isOpen, setIsOpen] = useState(false); + const blockButtonRef = useRef(null); const onOpenChange = (isOpen: boolean) => { setIsOpen(isOpen); @@ -51,10 +54,17 @@ export const DropdownMenu = ({ isOpen={isOpen} onOpenChange={onOpenChange} label={label} + buttonCss={buttonCss} button={ showArrow ? ( - -
{children}
+ + {children} ) : ( - children + + {children} + ) } > - + {topMessage && ( ` - 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: lang, - render: () => ( - - - translate - - - {LANGUAGES_ALLOWED[lang]} - - - ), - })); - }, [languages]); - - return ( - { - i18n.changeLanguage(e.target.value as string).catch((err) => { + label: LANGUAGES_ALLOWED[lang], + isSelected: language === lang, + callback: () => { + i18n.changeLanguage(lang).catch((err) => { console.error('Error changing language', err); }); - }} - /> + }, + })); + }, [i18n, language, languages]); + + return ( + div { + gap: 0.2rem; + display: flex; + } + & .material-icons { + color: var(--c--components--button--primary-text--color) !important; + } + `} + > + + + translate + + {LANGUAGES_ALLOWED[language]} + + ); };