From aef5fa3e2568cf62680c00cc71a70db5e5f6e7fc Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Mon, 26 Jun 2023 09:42:09 +0800 Subject: [PATCH] fix: New UI menu bar issues (#2709) --- .../DataSetting/dataSetting.module.scss | 2 + .../GeneralSetting/generalSetting.module.scss | 14 +++---- .../src/components/GeneralSetting/index.tsx | 8 ++-- .../components/History/history.module.scss | 2 + .../src/components/Overview/index.tsx | 4 ++ .../components/Overview/overview.module.scss | 1 + .../src/containers/Navbar/navbar.module.scss | 16 +++++++- packages/neuron-ui/src/locales/zh-tw.json | 2 +- packages/neuron-ui/src/locales/zh.json | 2 +- packages/neuron-ui/src/styles/mixin.scss | 3 +- .../src/widgets/Icons/BalanceRight.svg | 37 ++++++++++--------- .../src/widgets/Icons/CheckUpdateIcon.svg | 5 +++ .../src/widgets/Icons/LanguageSelect.svg | 5 +++ packages/neuron-ui/src/widgets/Icons/icon.tsx | 4 ++ .../src/widgets/Table/table.module.scss | 1 + .../src/widgets/Tooltip/tooltip.module.scss | 5 ++- 16 files changed, 75 insertions(+), 36 deletions(-) create mode 100644 packages/neuron-ui/src/widgets/Icons/CheckUpdateIcon.svg create mode 100644 packages/neuron-ui/src/widgets/Icons/LanguageSelect.svg diff --git a/packages/neuron-ui/src/components/DataSetting/dataSetting.module.scss b/packages/neuron-ui/src/components/DataSetting/dataSetting.module.scss index 0260269cf5..cd444c0e2d 100644 --- a/packages/neuron-ui/src/components/DataSetting/dataSetting.module.scss +++ b/packages/neuron-ui/src/components/DataSetting/dataSetting.module.scss @@ -13,6 +13,8 @@ align-items: center; svg { margin: 4px 0 0 4px; + cursor: pointer; + g, path { fill: var(--main-text-color); diff --git a/packages/neuron-ui/src/components/GeneralSetting/generalSetting.module.scss b/packages/neuron-ui/src/components/GeneralSetting/generalSetting.module.scss index 397732907f..08ff1528fe 100644 --- a/packages/neuron-ui/src/components/GeneralSetting/generalSetting.module.scss +++ b/packages/neuron-ui/src/components/GeneralSetting/generalSetting.module.scss @@ -29,11 +29,7 @@ $action-button-width: 11.25rem; display: flex; align-items: center; svg { - margin-left: 4px; - g, - path { - stroke: var(--secondary-text-color); - } + margin-right: 4px; } } } @@ -106,13 +102,13 @@ $action-button-width: 11.25rem; font-size: 16px; line-height: 22px; margin: 0 0 32px; - color: var(--main-text-color) + color: var(--main-text-color); } .note { font-size: 14px; line-height: 22px; margin: 22px 0 0; - color: var(--main-text-color) + color: var(--main-text-color); } progress { width: 100%; @@ -120,12 +116,12 @@ $action-button-width: 11.25rem; background: var(--process-background-color); border-radius: 8px; } - progress::-webkit-progress-bar{ + progress::-webkit-progress-bar { background-color: var(--process-background-color); border-radius: 8px; } progress::-webkit-progress-value { background: var(--primary-color); - border-radius: 8px; + border-radius: 8px; } } diff --git a/packages/neuron-ui/src/components/GeneralSetting/index.tsx b/packages/neuron-ui/src/components/GeneralSetting/index.tsx index 112d6a8e7c..22b448fce1 100644 --- a/packages/neuron-ui/src/components/GeneralSetting/index.tsx +++ b/packages/neuron-ui/src/components/GeneralSetting/index.tsx @@ -4,8 +4,8 @@ import { useSearchParams } from 'react-router-dom' import Dialog from 'widgets/Dialog' import LanguageDialog from 'components/LanguageDialog' import { ReactComponent as VersionLogo } from 'widgets/Icons/VersionLogo.svg' -import { ReactComponent as ArrowNext } from 'widgets/Icons/ArrowNext.svg' import { checkForUpdates, downloadUpdate, installUpdate, getVersion } from 'services/remote' +import { LanguageSelect, CheckUpdateIcon } from 'widgets/Icons/icon' import styles from './generalSetting.module.scss' interface UpdateDowloadStatusProps { @@ -134,7 +134,8 @@ const GeneralSetting = ({ updater }: GeneralSettingProps) => { {t('settings.general.version')} {version}

@@ -148,7 +149,8 @@ const GeneralSetting = ({ updater }: GeneralSettingProps) => { setShowLangDialog(true) }} > - {t(`settings.locale.${i18n.language}`)} + + {t(`settings.locale.${i18n.language}`)} diff --git a/packages/neuron-ui/src/components/History/history.module.scss b/packages/neuron-ui/src/components/History/history.module.scss index c145b99da0..cdcce7e8ed 100644 --- a/packages/neuron-ui/src/components/History/history.module.scss +++ b/packages/neuron-ui/src/components/History/history.module.scss @@ -92,6 +92,7 @@ body { align-items: center; color: $history-button-color; gap: 5px; + cursor: pointer; &:hover { color: var(--primary-color); @@ -121,6 +122,7 @@ body { } } .arrow { + cursor: pointer; transition: transform 0.1s ease-in-out; &:hover { diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx index 47d066b4f5..33f9a1524a 100644 --- a/packages/neuron-ui/src/components/Overview/index.tsx +++ b/packages/neuron-ui/src/components/Overview/index.tsx @@ -288,6 +288,7 @@ const Overview = () => { title: t('overview.date'), dataIndex: 'date', align: 'left', + minWidth: '150px', render: (_, __, item) => { const time = uniformTimeFormatter(item.timestamp || item.createdAt) return time.split(' ')[0] @@ -297,6 +298,7 @@ const Overview = () => { title: t('overview.type'), dataIndex: 'type', align: 'left', + minWidth: '250px', render(_, __, item) { return ( { dataIndex: 'amount', align: 'left', isBalance: true, + minWidth: '300px', render(_, __, item, show) { return }, @@ -320,6 +323,7 @@ const Overview = () => { title: t('overview.status'), dataIndex: 'status', align: 'left', + minWidth: '150px', render(_, __, item) { return ( svg { margin-left: 8px; + cursor: pointer; path { fill: var(--svg-fill-color); diff --git a/packages/neuron-ui/src/containers/Navbar/navbar.module.scss b/packages/neuron-ui/src/containers/Navbar/navbar.module.scss index 974593154d..0b423b5061 100644 --- a/packages/neuron-ui/src/containers/Navbar/navbar.module.scss +++ b/packages/neuron-ui/src/containers/Navbar/navbar.module.scss @@ -48,6 +48,7 @@ $hover-bg-color: #3cc68a4d; right: -14px; top: 50%; display: none; + cursor: pointer; &[data-expanded='false'] { transform: rotate(-180deg); @@ -73,6 +74,7 @@ $hover-bg-color: #3cc68a4d; border: none; background: transparent; font-weight: 700; + cursor: pointer; span { color: var(--primary-color); @@ -82,6 +84,7 @@ $hover-bg-color: #3cc68a4d; width: 0; flex: 1; text-align: left; + max-width: 90px; } } @@ -120,12 +123,22 @@ $hover-bg-color: #3cc68a4d; border-radius: 4px; cursor: pointer; + &.buttonInTip { + color: var(--main-text-color); + } + &:hover { @include activity; + &.buttonInTip { + color: var(--primary-color); + } } &.active { @include activity; + &.buttonInTip { + color: var(--primary-color); + } & .arrow { transform: rotate(90deg); } @@ -168,7 +181,8 @@ $hover-bg-color: #3cc68a4d; } .buttonInTip { - padding: 10px 24px 10px 12px; height: 40px; + padding: unset; + margin: unset; } } diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json index 4336a801b9..2df99031f4 100644 --- a/packages/neuron-ui/src/locales/zh-tw.json +++ b/packages/neuron-ui/src/locales/zh-tw.json @@ -113,7 +113,7 @@ } }, "overview": { - "date": "日期", + "date": "時間", "type": "類型", "balance": "餘額", "recent-activities": "最近收支", diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json index 39a362fa9c..689a0c980f 100644 --- a/packages/neuron-ui/src/locales/zh.json +++ b/packages/neuron-ui/src/locales/zh.json @@ -113,7 +113,7 @@ } }, "overview": { - "date": "日期", + "date": "时间", "type": "类型", "balance": "余额", "recent-activities": "最近收支", diff --git a/packages/neuron-ui/src/styles/mixin.scss b/packages/neuron-ui/src/styles/mixin.scss index eb8b947ed4..1d7efecdab 100644 --- a/packages/neuron-ui/src/styles/mixin.scss +++ b/packages/neuron-ui/src/styles/mixin.scss @@ -175,8 +175,9 @@ svg { g, path { - fill: $hoverColor + fill: $hoverColor; } } } } + diff --git a/packages/neuron-ui/src/widgets/Icons/BalanceRight.svg b/packages/neuron-ui/src/widgets/Icons/BalanceRight.svg index dfd822b136..33a059a913 100755 --- a/packages/neuron-ui/src/widgets/Icons/BalanceRight.svg +++ b/packages/neuron-ui/src/widgets/Icons/BalanceRight.svg @@ -1,19 +1,20 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/packages/neuron-ui/src/widgets/Icons/CheckUpdateIcon.svg b/packages/neuron-ui/src/widgets/Icons/CheckUpdateIcon.svg new file mode 100644 index 0000000000..22359a552b --- /dev/null +++ b/packages/neuron-ui/src/widgets/Icons/CheckUpdateIcon.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/packages/neuron-ui/src/widgets/Icons/LanguageSelect.svg b/packages/neuron-ui/src/widgets/Icons/LanguageSelect.svg new file mode 100644 index 0000000000..f219913b74 --- /dev/null +++ b/packages/neuron-ui/src/widgets/Icons/LanguageSelect.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/packages/neuron-ui/src/widgets/Icons/icon.tsx b/packages/neuron-ui/src/widgets/Icons/icon.tsx index d897d6069c..8003926071 100644 --- a/packages/neuron-ui/src/widgets/Icons/icon.tsx +++ b/packages/neuron-ui/src/widgets/Icons/icon.tsx @@ -61,6 +61,8 @@ import { ReactComponent as SuccessSvg } from './Success.svg' import { ReactComponent as DownloadIconSvg } from './DownloadIcon.svg' import { ReactComponent as ExplorerIconSvg } from './ExplorerIcon.svg' import { ReactComponent as DetailIconSvg } from './DetailIcon.svg' +import { ReactComponent as CheckUpdateIconSvg } from './CheckUpdateIcon.svg' +import { ReactComponent as LanguageSelectSvg } from './LanguageSelect.svg' import styles from './icon.module.scss' @@ -136,3 +138,5 @@ export const ArrowDownRound = WrapSvg(ArrowDownRoundSvg) export const EyesOpen = WrapSvg(EyesOpenSvg) export const EyesClose = WrapSvg(EyesCloseSvg) export const Success = WrapSvg(SuccessSvg) +export const CheckUpdateIcon = WrapSvg(CheckUpdateIconSvg) +export const LanguageSelect = WrapSvg(LanguageSelectSvg) diff --git a/packages/neuron-ui/src/widgets/Table/table.module.scss b/packages/neuron-ui/src/widgets/Table/table.module.scss index 7196116ca6..d6428322b3 100755 --- a/packages/neuron-ui/src/widgets/Table/table.module.scss +++ b/packages/neuron-ui/src/widgets/Table/table.module.scss @@ -42,6 +42,7 @@ $head-height: 52px; .balanceIcon { margin-left: 8px; + cursor: pointer; } } diff --git a/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss b/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss index 4ea571b6b6..d200d26d6d 100644 --- a/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss +++ b/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss @@ -168,6 +168,7 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b .tipWithString { position: relative; pointer-events: initial !important; + cursor: pointer; .triangle { display: none; @@ -193,7 +194,7 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b color: #FFFFFF; } } - + @each $placement in $placements { @include tip-placement($placement, "::after"); } @@ -208,7 +209,7 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b } } } - + &[data-trigger="click"] { &[data-tip-show="true"] .tip { display: block;