Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Overview for new ui. #2536

Closed
wants to merge 6 commits into from
Closed

feat: Overview for new ui. #2536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
46e73c4
feat: Overview for new ui.
yanguoyu Nov 28, 2022
aee3341
fix: Change use scss variable in css variable.
yanguoyu Nov 28, 2022
97ed0c2
fix: Hide looking valid target. Switch theme tooltip and translate.
yanguoyu Nov 28, 2022
524f46f
fix: Theme color
yanguoyu Nov 28, 2022
f36d056
fix: Change balance style.
yanguoyu Nov 28, 2022
d31240f
fix: fix table head font weight
yanguoyu Nov 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/neuron-ui/public/css/fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,10 @@
font-family: 'ProximaNova-Semibold';
src: url('../fonts/ProximaNova-Semibold.otf') format('opentype'),
url('../fonts/ProximaNova-Semibold.ttf') format('opentype');
}

@font-face {
font-family: 'D-DIN-PRO';
src: url('../fonts/D-DIN-PRO-500-Medium.otf') format('opentype'),
url('../fonts/D-DIN-PRO-500-Medium.ttf') format('opentype');
}
Binary file added packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.otf
View file
Open in desktop
Binary file not shown.
Binary file added packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.ttf
View file
Open in desktop
Binary file not shown.
58 changes: 5 additions & 53 deletions packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,7 @@
$arrow: 10px;
.confirm {
margin-left: 4px;

.container {
display: inline;
position: relative;
font-size: 0.75rem;
color: var(--nervos-green);
border-radius: 2px;
z-index: 1;

svg {
width: 1rem;
height: 0.75rem;
pointer-events: none;
position: relative;
top: 1px;
}

&::after {
display: none;
content: attr(data-content);
position: absolute;
top: calc(100% + 7px);
left: 50%;
transform: translateX(-50%);
background: #fff;
font-size: 0.75rem;
color: #000000;
padding: 10px 15px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
min-width: 150px;
pointer-events: none;
}

&::before {
z-index: 1;
display: none;
content: '';
top: 2px;
left: 50%;
transform: translateX(-50%);
position: absolute;
border: $arrow solid transparent;
border-bottom-color: #fff;
filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.12));
pointer-events: none;
}

&:hover {
&::after,
&::before {
display: block;
}
path {
fill: #FFFFFF;
}
}
}
40 changes: 6 additions & 34 deletions packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { ConnectionStatus, SyncStatus } from 'utils'
import { ReactComponent as BalanceSyncing } from 'widgets/Icons/BalanceSyncing.svg'
import { ReactComponent as BalanceSyncFailed } from 'widgets/Icons/BalanceSyncFailed.svg'
import { Confirming } from 'widgets/Icons/icon'
import styles from './balanceSyncIcon.module.scss'

export interface BalanceSyncIconProps {
Expand All @@ -11,40 +9,14 @@ export interface BalanceSyncIconProps {
}

const BalanceSyncIcon = ({ connectionStatus, syncStatus }: BalanceSyncIconProps) => {
const [t] = useTranslation()
if (ConnectionStatus.Connecting === connectionStatus) {
return (
<div className={styles.container} data-content={t('sync.connecting')}>
<BalanceSyncing />
</div>
)
if (ConnectionStatus.Connecting === connectionStatus || ConnectionStatus.Offline === connectionStatus) {
return <Confirming className={styles.confirm} />
}
if (ConnectionStatus.Offline === connectionStatus) {
return (
<div className={styles.container} data-content={t('sync.sync-failed')}>
<BalanceSyncFailed />
</div>
)
}

switch (syncStatus) {
case SyncStatus.SyncNotStart: {
return (
<div className={styles.container} data-content={t('sync.sync-not-start')}>
<BalanceSyncFailed />
</div>
)
}
case SyncStatus.Syncing:
case SyncStatus.SyncPending: {
return (
<div className={styles.container} data-content={t('sync.syncing-balance')}>
<BalanceSyncing />
</div>
)
}
default: {
case SyncStatus.SyncCompleted:
return null
default: {
return <Confirming className={styles.confirm} />
}
}
}
Expand Down
Loading