From e4dbc06202ddfcbf02e5c2d54f59d8acb7aebeb6 Mon Sep 17 00:00:00 2001
From: lethemanh <themanhle1234@gmail.com>
Date: Wed, 11 Dec 2024 17:31:44 +0700
Subject: [PATCH] Reuse icon in application

---
 .../atoms/icons-agnostic/assets/account.svg   | 14 --------------
 .../atoms/icons-agnostic/assets/envelop.svg   | 14 --------------
 .../atoms/icons-agnostic/assets/logout.svg    | 14 --------------
 .../src/app/atoms/icons-agnostic/index.tsx    |  3 ---
 .../src/app/components/menus/menu.scss        | 19 +++++++++++++++++++
 .../src/app/views/client/common/account.tsx   | 12 ++++++------
 6 files changed, 25 insertions(+), 51 deletions(-)
 delete mode 100644 tdrive/frontend/src/app/atoms/icons-agnostic/assets/account.svg
 delete mode 100644 tdrive/frontend/src/app/atoms/icons-agnostic/assets/envelop.svg
 delete mode 100644 tdrive/frontend/src/app/atoms/icons-agnostic/assets/logout.svg

diff --git a/tdrive/frontend/src/app/atoms/icons-agnostic/assets/account.svg b/tdrive/frontend/src/app/atoms/icons-agnostic/assets/account.svg
deleted file mode 100644
index bfb51ef69..000000000
--- a/tdrive/frontend/src/app/atoms/icons-agnostic/assets/account.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/atoms/icons-agnostic/assets/envelop.svg b/tdrive/frontend/src/app/atoms/icons-agnostic/assets/envelop.svg
deleted file mode 100644
index 4875726af..000000000
--- a/tdrive/frontend/src/app/atoms/icons-agnostic/assets/envelop.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/atoms/icons-agnostic/assets/logout.svg b/tdrive/frontend/src/app/atoms/icons-agnostic/assets/logout.svg
deleted file mode 100644
index 8c1dd1d10..000000000
--- a/tdrive/frontend/src/app/atoms/icons-agnostic/assets/logout.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/tdrive/frontend/src/app/atoms/icons-agnostic/index.tsx b/tdrive/frontend/src/app/atoms/icons-agnostic/index.tsx
index 1521a8441..048abf6fe 100644
--- 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
index aa0be79bb..4c8a4d819 100755
--- 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
index 04a86df79..f7f7c1036 100644
--- 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();