Reuse icon in application

linagora · Dec 16, 2024 · e4dbc06 · e4dbc06
1 parent df5efd7
commit e4dbc06
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 51 deletions.
diff --git a/tdrive/frontend/src/app/atoms/icons-agnostic/assets/account.svg b/tdrive/frontend/src/app/atoms/icons-agnostic/assets/account.svg
diff --git a/tdrive/frontend/src/app/atoms/icons-agnostic/assets/envelop.svg b/tdrive/frontend/src/app/atoms/icons-agnostic/assets/envelop.svg
diff --git a/tdrive/frontend/src/app/atoms/icons-agnostic/assets/logout.svg b/tdrive/frontend/src/app/atoms/icons-agnostic/assets/logout.svg
diff --git a/tdrive/frontend/src/app/atoms/icons-agnostic/index.tsx b/tdrive/frontend/src/app/atoms/icons-agnostic/index.tsx
@@ -48,6 +48,3 @@ 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} />;
diff --git a/tdrive/frontend/src/app/components/menus/menu.scss b/tdrive/frontend/src/app/components/menus/menu.scss
@@ -48,9 +48,28 @@
     }
   }
 
+  .email {
+    height: 46px !important;
+    line-height: 46px !important;
+    .icon {
+      font-size: 24px;
+    }
+    .text {
+      margin-left: 10px;
+      font-size: 13px;
+      cursor: text;
+      user-select: text !important;
+      -webkit-user-select: text !important;
+    }
+  }
+
   .account-menu {
     height: 46px !important;
     line-height: 46px !important;
+    .icon {
+      font-size: 24px !important;
+      margin-left: 0 !important;
+    }
     .text {
       margin-left: 10px;
     }

diff --git a/tdrive/frontend/src/app/views/client/common/account.tsx b/tdrive/frontend/src/app/views/client/common/account.tsx
@@ -9,7 +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';
+import Icon from '@components/icon/icon.jsx';
 
 export default (): JSX.Element => {
   const { user } = useCurrentUser();
@@ -28,17 +28,17 @@ export default (): JSX.Element => {
           text: currentUserService.getFullName(user),
         },
         {
-          type: 'menu',
+          type: 'text',
           text: user.email,
-          className: 'account-menu',
-          icon: <EnvelopIcon className="stroke-black dark:stroke-white" />,
+          className: 'email',
+          icon: <Icon type="envelope" className="text-black dark:text-white" />,
           hide: !FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_DISPLAY_EMAIL),
         },
         { type: 'separator' },
         {
           type: 'menu',
           className: 'account-menu',
-          icon: <AccountIcon className="stroke-black dark:stroke-white" />,
+          icon: <Icon type="user-circle" className="text-black dark:text-white" />,
           text: Languages.t('scenes.app.channelsbar.currentuser.title'),
           //hide: InitService.server_infos?.configuration?.accounts?.type === 'remote',
           onClick: () => {
@@ -48,7 +48,7 @@ export default (): JSX.Element => {
         {
           type: 'menu',
           className: 'account-menu',
-          icon: <LogoutIcon className="stroke-black dark:stroke-white" />,
+          icon: <Icon type="sign-out-alt" className="text-black dark:text-white" />,
           text: Languages.t('scenes.app.channelsbar.currentuser.logout'),
           onClick: () => {
             LoginService.logout();