diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx index 47dc91e2..98e6c99c 100644 --- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx +++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx @@ -4,6 +4,11 @@ import { css } from '@/styled-system/css' import { text } from '@/primitives/Text.tsx' import { Heading } from 'react-aria-components' import { useTranslation } from 'react-i18next' +import { + RiAccountCircleLine, + RiSettings3Line, + RiSpeakerLine, +} from '@remixicon/react' const tabsStyle = css({ maxHeight: '40.625rem', // fixme size copied from meet settings modal @@ -45,13 +50,16 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => { {t('dialog.heading')} - + + {t('tabs.account')} - + + {t('tabs.audio')} - + + {t('tabs.general')} diff --git a/src/frontend/src/primitives/Tabs.tsx b/src/frontend/src/primitives/Tabs.tsx index e7ecbaec..ad3ecc41 100644 --- a/src/frontend/src/primitives/Tabs.tsx +++ b/src/frontend/src/primitives/Tabs.tsx @@ -75,9 +75,17 @@ const StyledTab = styled(RACTab, { }, }, }, + icon: { + true: { + display: 'flex', + gap: '1rem', + alignItems: 'center', + }, + }, }, defaultVariants: { border: true, + icon: false, }, })