From eb90c0f28ced84d7ef6fe69a822ba226a8ee1a07 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 14 Aug 2024 17:08:00 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20icons=20in=20Settin?=
 =?UTF-8?q?gsDialogExtended=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Made it user friendly by adding icons.
It follows other videconference tools designs.
---
 .../settings/components/SettingsDialogExtended.tsx | 14 +++++++++++---
 src/frontend/src/primitives/Tabs.tsx               |  8 ++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

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')}
           </Heading>
           <TabList border={false} aria-label="Chat log orientation example">
-            <Tab highlight id="1">
+            <Tab icon highlight id="1">
+              <RiAccountCircleLine />
               {t('tabs.account')}
             </Tab>
-            <Tab highlight id="2">
+            <Tab icon highlight id="2">
+              <RiSpeakerLine />
               {t('tabs.audio')}
             </Tab>
-            <Tab highlight id="3">
+            <Tab icon highlight id="3">
+              <RiSettings3Line />
               {t('tabs.general')}
             </Tab>
           </TabList>
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,
   },
 })