From df5efd71248852df22b71e9524fdf12d80a00b0e Mon Sep 17 00:00:00 2001 From: lethemanh Date: Wed, 11 Dec 2024 15:20:25 +0700 Subject: [PATCH] Update new design of account menu --- .../atoms/icons-agnostic/assets/account.svg | 14 ++++++++++++++ .../atoms/icons-agnostic/assets/envelop.svg | 14 ++++++++++++++ .../app/atoms/icons-agnostic/assets/logout.svg | 14 ++++++++++++++ .../src/app/atoms/icons-agnostic/index.tsx | 6 ++++++ .../src/app/components/menus/menu.scss | 18 ++++++++++++++++++ .../src/app/views/client/common/account.tsx | 14 +++++++++----- 6 files changed, 75 insertions(+), 5 deletions(-) create mode 100644 tdrive/frontend/src/app/atoms/icons-agnostic/assets/account.svg create mode 100644 tdrive/frontend/src/app/atoms/icons-agnostic/assets/envelop.svg create 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 new file mode 100644 index 00000000..bfb51ef6 --- /dev/null +++ b/tdrive/frontend/src/app/atoms/icons-agnostic/assets/account.svg @@ -0,0 +1,14 @@ + + + \ 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 new file mode 100644 index 00000000..4875726a --- /dev/null +++ b/tdrive/frontend/src/app/atoms/icons-agnostic/assets/envelop.svg @@ -0,0 +1,14 @@ + + + \ 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 new file mode 100644 index 00000000..8c1dd1d1 --- /dev/null +++ b/tdrive/frontend/src/app/atoms/icons-agnostic/assets/logout.svg @@ -0,0 +1,14 @@ + + + \ 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 62d64976..1521a844 100644 --- a/tdrive/frontend/src/app/atoms/icons-agnostic/index.tsx +++ b/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'>) => ; export const DeleteIcon = (props: ComponentProps<'svg'>) => ; @@ -45,3 +48,6 @@ export const StatusCheckDoubleIcon = (props: ComponentProps<'svg'>) => ( export const StatusCheckIcon = (props: ComponentProps<'svg'>) => ; export const UsersIcon = (props: ComponentProps<'svg'>) => ; export const SortIcon = (props: ComponentProps<'svg'>) => ; +export const EnvelopIcon = (props: ComponentProps<'svg'>) => ; +export const AccountIcon = (props: ComponentProps<'svg'>) => ; +export const LogoutIcon = (props: ComponentProps<'svg'>) => ; diff --git a/tdrive/frontend/src/app/components/menus/menu.scss b/tdrive/frontend/src/app/components/menus/menu.scss index 0c3e478c..aa0be79b 100755 --- a/tdrive/frontend/src/app/components/menus/menu.scss +++ b/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); + } } } diff --git a/tdrive/frontend/src/app/views/client/common/account.tsx b/tdrive/frontend/src/app/views/client/common/account.tsx index 49810fcd..04a86df7 100644 --- a/tdrive/frontend/src/app/views/client/common/account.tsx +++ b/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: , hide: !FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_DISPLAY_EMAIL), }, { type: 'separator' }, { type: 'menu', - icon: 'user', + className: 'account-menu', + icon: , 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: , text: Languages.t('scenes.app.channelsbar.currentuser.logout'), - className: 'error', onClick: () => { LoginService.logout(); },