Update new design of account menu

tdrive/frontend/src/app/atoms/icons-agnostic/index.tsx

@@ -21,6 +21,9 @@ import { ReactComponent as StatusCheckDouble } from './assets/status-check-doubl
 import { ReactComponent as StatusCheck } from './assets/status-check.svg';
 import { ReactComponent as Users } from './assets/users.svg';
 import { ReactComponent as Sort } from './assets/sort.svg';
+import { ReactComponent as Envelop } from './assets/envelop.svg';
+import { ReactComponent as Account } from './assets/account.svg';
+import { ReactComponent as Logout } from './assets/logout.svg';
 
 export const CopyIcon = (props: ComponentProps<'svg'>) => <CopySvg {...props} />;
 export const DeleteIcon = (props: ComponentProps<'svg'>) => <DeleteSvg {...props} />;
@@ -45,3 +48,6 @@ export const StatusCheckDoubleIcon = (props: ComponentProps<'svg'>) => (
 export const StatusCheckIcon = (props: ComponentProps<'svg'>) => <StatusCheck {...props} />;
 export const UsersIcon = (props: ComponentProps<'svg'>) => <Users {...props} />;
 export const SortIcon = (props: ComponentProps<'svg'>) => <Sort {...props} />;
+export const EnvelopIcon = (props: ComponentProps<'svg'>) => <Envelop {...props} />;
+export const AccountIcon = (props: ComponentProps<'svg'>) => <Account {...props} />;
+export const LogoutIcon = (props: ComponentProps<'svg'>) => <Logout {...props} />;

tdrive/frontend/src/app/components/menus/menu.scss

@@ -41,6 +41,21 @@
     padding: 0 8px;
   }
 
+  .username {
+    .text {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .account-menu {
+    height: 46px !important;
+    line-height: 46px !important;
+    .text {
+      margin-left: 10px;
+    }
+  }
+
   .menu-text {
     font-size: 12px;
     font-weight: 500;
@@ -119,6 +134,9 @@
       color: var(--primary);
       .icon {
         color: var(--primary);
+        svg {
+          stroke: var(--primary);
+        }
       }
     }
 

tdrive/frontend/src/app/views/client/common/account.tsx

@@ -9,6 +9,7 @@ import ModalManagerDepreciated from '@deprecated/popupManager/popupManager';
 import FeatureTogglesService, {
   FeatureNames,
 } from '@features/global/services/feature-toggles-service';
+import { AccountIcon, EnvelopIcon, LogoutIcon } from 'app/atoms/icons-agnostic';
 
 export default (): JSX.Element => {
   const { user } = useCurrentUser();
@@ -23,18 +24,21 @@ export default (): JSX.Element => {
         // user name / email
         {
           type: 'text',
+          className: "username",
           text: currentUserService.getFullName(user),
         },
         {
-          type: 'text',
+          type: 'menu',
           text: user.email,
-          icon: 'envelope-info',
+          className: 'account-menu',
+          icon: <EnvelopIcon className="stroke-black dark:stroke-white" />,
           hide: !FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_DISPLAY_EMAIL),
         },
         { type: 'separator' },
         {
           type: 'menu',
-          icon: 'user',
+          className: 'account-menu',
+          icon: <AccountIcon className="stroke-black dark:stroke-white" />,
           text: Languages.t('scenes.app.channelsbar.currentuser.title'),
           //hide: InitService.server_infos?.configuration?.accounts?.type === 'remote',
           onClick: () => {
@@ -43,9 +47,9 @@ export default (): JSX.Element => {
         },
         {
           type: 'menu',
-          icon: 'sign-out-alt',
+          className: 'account-menu',
+          icon: <LogoutIcon className="stroke-black dark:stroke-white" />,
           text: Languages.t('scenes.app.channelsbar.currentuser.logout'),
-          className: 'error',
           onClick: () => {
             LoginService.logout();
           },