Update new design of account menu

tdrive/frontend/src/app/atoms/icons-agnostic/assets/account.svg

@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M17.9815 18.7247C17.2828 17.7996 16.3788 17.0493 15.3407 16.5331C14.3026 16.0168 13.1589 15.7487 11.9995 15.7497C10.8402 15.7487 9.69641 16.0168 8.65834 16.5331C7.62028 17.0493 6.71627 17.7996 6.01753 18.7247M17.9815 18.7247C19.345 17.5119 20.3066 15.9133 20.7407 14.1408C21.1748 12.3683 21.0598 10.5058 20.411 8.80018C19.7622 7.09457 18.6103 5.62648 17.1079 4.5906C15.6056 3.55472 13.8239 3 11.999 3C10.1742 3 8.39246 3.55472 6.89013 4.5906C5.3878 5.62648 4.23585 7.09457 3.58706 8.80018C2.93826 10.5058 2.82328 12.3683 3.25734 14.1408C3.69141 15.9133 4.65403 17.5119 6.01753 18.7247M17.9815 18.7247C16.3355 20.1929 14.2052 21.0028 11.9995 20.9997C9.79355 21.0031 7.66376 20.1931 6.01753 18.7247M14.9995 9.74971C14.9995 10.5454 14.6835 11.3084 14.1208 11.871C13.5582 12.4336 12.7952 12.7497 11.9995 12.7497C11.2039 12.7497 10.4408 12.4336 9.8782 11.871C9.3156 11.3084 8.99953 10.5454 8.99953 9.74971C8.99953 8.95406 9.3156 8.19099 9.8782 7.62838C10.4408 7.06578 11.2039 6.74971 11.9995 6.74971C12.7952 6.74971 13.5582 7.06578 14.1208 7.62838C14.6835 8.19099 14.9995 8.95406 14.9995 9.74971Z"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+</svg>

tdrive/frontend/src/app/atoms/icons-agnostic/assets/envelop.svg

@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M21.75 6.75V17.25C21.75 17.8467 21.5129 18.419 21.091 18.841C20.669 19.2629 20.0967 19.5 19.5 19.5H4.5C3.90326 19.5 3.33097 19.2629 2.90901 18.841C2.48705 18.419 2.25 17.8467 2.25 17.25V6.75M21.75 6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75M21.75 6.75V6.993C21.75 7.37715 21.6517 7.75491 21.4644 8.0903C21.2771 8.42569 21.0071 8.70754 20.68 8.909L13.18 13.524C12.8252 13.7425 12.4167 13.8582 12 13.8582C11.5833 13.8582 11.1748 13.7425 10.82 13.524L3.32 8.91C2.99292 8.70854 2.72287 8.42669 2.53557 8.0913C2.34827 7.75591 2.24996 7.37815 2.25 6.994V6.75"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+</svg>

tdrive/frontend/src/app/atoms/icons-agnostic/assets/logout.svg

@@ -0,0 +1,14 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8.25 9V5.25C8.25 4.65326 8.48705 4.08097 8.90901 3.65901C9.33097 3.23705 9.90326 3 10.5 3H16.5C17.0967 3 17.669 3.23705 18.091 3.65901C18.5129 4.08097 18.75 4.65326 18.75 5.25V18.75C18.75 19.3467 18.5129 19.919 18.091 20.341C17.669 20.7629 17.0967 21 16.5 21H10.5C9.90326 21 9.33097 20.7629 8.90901 20.341C8.48705 19.919 8.25 19.3467 8.25 18.75V15M5.25 15L2.25 12M2.25 12L5.25 9M2.25 12H15"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+</svg>

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();
           },