chore: Remove unused component and icons (nervosnetwork#2820)

1. Remove unused components. `CustomizedAsset `, `SettingTabs`, `Dropdown`, `experimentalRibbon`. 2. Remove unused icons and merge the same icons, add icon story to find icons easily. 3. Remove useless logic because the setting page is not in a new window.
Magickbase · Sep 7, 2023 · 29daa30 · 29daa30
1 parent 101b7e1
commit 29daa30
Show file tree

Hide file tree

Showing 84 changed files with 150 additions and 882 deletions.
diff --git a/packages/neuron-ui/src/components/CustomizedAsset/customizedAsset.module.scss b/packages/neuron-ui/src/components/CustomizedAsset/customizedAsset.module.scss
diff --git a/packages/neuron-ui/src/components/CustomizedAsset/index.tsx b/packages/neuron-ui/src/components/CustomizedAsset/index.tsx
diff --git a/packages/neuron-ui/src/components/DataSetting/dataSetting.module.scss b/packages/neuron-ui/src/components/DataSetting/dataSetting.module.scss
@@ -11,8 +11,13 @@
       height: 40px;
       margin-bottom: 24px;
       align-items: center;
+      .tip {
+        padding: 4px;
+        display: flex;
+      }
       svg {
-        margin: 4px 0 0 4px;
+        width: 12px;
+        height: 12px;
         cursor: pointer;
         g,
         path {
@@ -191,13 +196,26 @@
 .footer {
   padding: 24px 0;
   @include dialog-footer;
+  --footer-background-color: #ecf9f0;
+  @media (prefers-color-scheme: dark) {
+    --footer-background-color: #2d3534;
+  }
 
   .footerBtn {
     padding: 0 20px;
-    background: #ecf9f0;
+    background: var(--footer-background-color);
     color: var(--primary-color);
-    @media (prefers-color-scheme: dark) {
-      background: #2e3735;
+    &:not([disabled]) {
+      &:hover,
+      &:focus {
+        background-color: var(--footer-background-color);
+        color: color-mix(in srgb, #000000 20%, var(--primary-color));
+      }
+
+      &:active {
+        background-color: var(--footer-background-color);
+        color: color-mix(in srgb, #000000 20%, var(--primary-color));
+      }
     }
     &:last-of-type {
       margin-left: 24px;

diff --git a/packages/neuron-ui/src/components/DataSetting/index.tsx b/packages/neuron-ui/src/components/DataSetting/index.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
 import ClearCache from 'components/ClearCache'
-import { ReactComponent as AttentionOutline } from 'widgets/Icons/AttentionOutline.svg'
 import { useDispatch, useState as useGlobalState } from 'states'
 import { shell } from 'electron'
 import { getIsCkbRunExternal } from 'services/remote'
@@ -11,6 +10,7 @@ import Tooltip from 'widgets/Tooltip'
 import Dialog from 'widgets/Dialog'
 import AlertDialog from 'widgets/AlertDialog'
 import { LIGHT_NETWORK_TYPE } from 'utils/const'
+import { Attention } from 'widgets/Icons/icon'
 import { useDataPath } from './hooks'
 
 import styles from './dataSetting.module.scss'
@@ -91,8 +91,9 @@ const DataSetting = () => {
                 placement="top"
                 tip={<p className={styles.tooltip}>{t('settings.data.disabled-set-path')}</p>}
                 showTriangle
+                className={styles.tip}
               >
-                <AttentionOutline />
+                <Attention />
               </Tooltip>
             </div>
           )}
@@ -102,8 +103,9 @@ const DataSetting = () => {
               placement="top"
               tip={<p className={styles.tooltip}>{t('settings.data.clear-cache-description')}</p>}
               showTriangle
+              className={styles.tip}
             >
-              <AttentionOutline />
+              <Attention />
             </Tooltip>
           </div>
         </div>
@@ -124,7 +126,7 @@ const DataSetting = () => {
         <div className={styles.dialogContainer}>
           <div>{t('settings.data.remove-ckb-data-tip', { prevPath, currentPath })}</div>
           <div className={styles.attention}>
-            <AttentionOutline />
+            <Attention />
             {t('settings.data.resync-ckb-node-describe')}
           </div>
 

diff --git a/packages/neuron-ui/src/components/History/history.module.scss b/packages/neuron-ui/src/components/History/history.module.scss
@@ -3,7 +3,6 @@
 @import '../../styles/animation.scss';
 
 $history-info-title-color: #999;
-$history-button-color: #8da394;
 
 body {
   --history-button-border: #e5e5e5;
@@ -59,6 +58,8 @@ body {
     }
 
     .exportIcon {
+      width: 12px;
+      height: 12px;
       padding-right: 8px;
       path {
         fill: var(--main-text-color);
@@ -133,7 +134,7 @@ body {
         padding: unset;
         justify-content: center;
         align-items: center;
-        color: $history-button-color;
+        color: var(--secondary-text-color);
         gap: 5px;
         cursor: pointer;
 
@@ -174,6 +175,9 @@ body {
 .arrow {
   cursor: pointer;
   transition: transform 0.1s ease-in-out;
+  path {
+    stroke: var(--secondary-text-color);
+  }
 
   &:hover {
     path {

diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx
@@ -6,7 +6,7 @@ import SUDTAvatar from 'widgets/SUDTAvatar'
 import Button from 'widgets/Button'
 import Table, { TableProps } from 'widgets/Table'
 import TextField from 'widgets/TextField'
-import { DownloadIcon, SearchIcon, ArrowOpenRightIcon } from 'widgets/Icons/icon'
+import { Download, Search, ArrowNext } from 'widgets/Icons/icon'
 
 import PageContainer from 'components/PageContainer'
 import TransactionStatusWrap from 'components/TransactionStatusWrap'
@@ -223,7 +223,7 @@ const History = () => {
       align: 'center',
       minWidth: '72px',
       render(_, idx) {
-        return <ArrowOpenRightIcon className={styles.arrow} data-is-expand-show={expandedRow === idx} />
+        return <ArrowNext className={styles.arrow} data-is-expand-show={expandedRow === idx} />
       },
     },
   ]
@@ -247,7 +247,7 @@ const History = () => {
               }
               prefix={
                 <span className={styles.searchBoxPrefix}>
-                  <SearchIcon onClick={onSearch} />
+                  <Search onClick={onSearch} />
                 </span>
               }
               placeholder={t('history.search.placeholder')}
@@ -257,7 +257,7 @@ const History = () => {
             />
 
             <Button disabled={isExporting} onClick={onExport} className={styles.exportButton}>
-              <DownloadIcon className={styles.exportIcon} /> {t('history.export-history')}
+              <Download className={styles.exportIcon} /> {t('history.export-history')}
             </Button>
           </div>
         }

diff --git a/packages/neuron-ui/src/components/ImportHardware/select-model.tsx b/packages/neuron-ui/src/components/ImportHardware/select-model.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
 import { CreateFirstWalletNav } from 'components/WalletWizard'
 import { useGoBack } from 'utils'
-import { AttentionOutline } from 'widgets/Icons/icon'
+import { Attention } from 'widgets/Icons/icon'
 import TextField from 'widgets/TextField'
 import styles from './findDevice.module.scss'
 import { ActionType, ImportStep, Model } from './common'
@@ -97,7 +97,7 @@ const SelectModel = ({ dispatch }: { dispatch: React.Dispatch<ActionType> }) =>
         ))}
       </section>
       <div className={styles.attention}>
-        <AttentionOutline />
+        <Attention />
         {t('messages.experimental-message-hardware')}
       </div>
       <footer className={styles.footer}>