Feat: new UI overview page (#2620)

* feat: Feat overview page.

packages/neuron-ui/public/css/fonts.css

@@ -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');
+}

packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss

@@ -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;
   }
-}
+}

packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx

@@ -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 {
@@ -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} />
     }
   }
 }