fix: Fix styles. (nervosnetwork#2799)

* fix: Fix styles. 1. History cursor and search width 2. Receive dismiss table hover tr and add pointer. * fix: If width is less than 1400. transform tip * fix: Fix navbar style, and asset account less three slider * fix: Fix edit history desc * fix: use table tag * fix: Fix linux style and migrate color * fix: Fix checkbox
Magickbase · Aug 10, 2023 · 40ba67a · 40ba67a
1 parent d7f7597
commit 40ba67a
Show file tree

Hide file tree

Showing 14 changed files with 75 additions and 35 deletions.
diff --git a/packages/neuron-ui/src/components/ClearCache/clearCache.module.scss b/packages/neuron-ui/src/components/ClearCache/clearCache.module.scss
@@ -38,6 +38,7 @@
 
     .highlight {
       color: var(--primary-color);
+      display: inline-block;
     }
   }
   @include checkbox;

diff --git a/packages/neuron-ui/src/components/History/RowExtend.tsx b/packages/neuron-ui/src/components/History/RowExtend.tsx
@@ -25,11 +25,8 @@ const RowExtend = ({ column, columns, isMainnet, id, bestBlockNumber }: RowExten
   const navigate = useNavigate()
   const [t] = useTranslation()
 
-  const { localDescription, onDescriptionPress, onDescriptionChange, onDescriptionSelected } = useLocalDescription(
-    'transaction',
-    id,
-    dispatch
-  )
+  const { localDescription, onDescriptionPress, onDescriptionChange, onDescriptionFieldBlur, onDescriptionSelected } =
+    useLocalDescription('transaction', id, dispatch, 'textarea')
 
   const onActionBtnClick = useCallback(
     (e: React.SyntheticEvent<HTMLButtonElement>) => {
@@ -84,6 +81,7 @@ const RowExtend = ({ column, columns, isMainnet, id, bestBlockNumber }: RowExten
                         value={isSelected ? localDescription.description : description}
                         onChange={onDescriptionChange}
                         onKeyDown={onDescriptionPress}
+                        onBlur={onDescriptionFieldBlur}
                       />
                       <Edit
                         data-description-key={column.hash}

diff --git a/packages/neuron-ui/src/components/History/history.module.scss b/packages/neuron-ui/src/components/History/history.module.scss
@@ -21,7 +21,7 @@ body {
 
   .tableHeaderInput {
     margin: unset;
-    width: 100%;
+    flex: 1 1 auto;
 
     & > div {
       min-height: 48px;
@@ -46,6 +46,8 @@ body {
     font-size: 14px;
     border-radius: 32px;
     height: 48px;
+    padding: 0 16px;
+    min-width: auto;
 
     &:hover {
       color: var(--primary-color);
@@ -57,7 +59,7 @@ body {
     }
 
     .exportIcon {
-      padding: 0 10px;
+      padding-right: 8px;
       path {
         fill: var(--main-text-color);
       }
@@ -66,6 +68,8 @@ body {
 }
 
 .extendWrapper {
+  cursor: initial;
+
   .extendBox {
     background-color: var(--table-head-background-color);
     margin: 0 8px 16px 0;
@@ -94,6 +98,7 @@ body {
       .descText {
         padding-bottom: 16px;
         word-break: break-all;
+        cursor: pointer;
         &:hover {
           color: var(--primary-color);
         }
@@ -102,9 +107,11 @@ body {
       .txHash {
         display: flex;
         align-items: center;
+        font-family: 'JetBrains Mono';
 
         & > svg {
           margin-left: 8px;
+          cursor: pointer;
         }
       }
     }
@@ -190,6 +197,7 @@ body {
       position: absolute;
       right: 0;
       bottom: 8px;
+      cursor: pointer;
     }
   }
   .descInput {

diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx
@@ -40,6 +40,7 @@ import styles from './history.module.scss'
 
 const History = () => {
   const {
+    app: { pageNotice },
     wallet: { id, name: walletName },
     chain: {
       networkID,
@@ -234,6 +235,7 @@ const History = () => {
         e.preventDefault()
       }}
       head={t('history.title')}
+      notice={pageNotice}
     >
       <Table
         head={
@@ -276,7 +278,6 @@ const History = () => {
       />
 
       <div className={styles.container}>
-        {totalCount ? null : <div className={styles.noTxs}>{t('history.no-txs')}</div>}
         <div className={styles.pagination}>
           <Pagination
             count={totalCount}

diff --git a/packages/neuron-ui/src/components/Receive/multiAddressReceive.tsx b/packages/neuron-ui/src/components/Receive/multiAddressReceive.tsx
@@ -99,6 +99,7 @@ const MultiAddressReceive = ({
               }
               showTriangle
               isTriggerNextToChild
+              tipClassName={styles.addressTip}
             >
               <div className={styles.address}>
                 <span className={styles.overflow}>{itemAddress.slice(0, -6)}</span>
@@ -210,6 +211,7 @@ const MultiAddressReceive = ({
         dataSource={addresses}
         className={styles.addresses}
         isFixedTable
+        hasHoverTrBg={false}
       />
     </div>
   )

diff --git a/packages/neuron-ui/src/components/Receive/receive.module.scss b/packages/neuron-ui/src/components/Receive/receive.module.scss
@@ -70,6 +70,7 @@
   .address {
     height: 56px;
     display: flex;
+    cursor: pointer;
 
     & > span {
       line-height: 56px;
@@ -80,6 +81,7 @@
       word-break: break-all;
       line-height: 56px;
       overflow: hidden;
+      cursor: pointer;
     }
 
     &:hover {
@@ -88,17 +90,7 @@
   }
 
   .copyTableAddress {
-    word-break: break-all;
-    text-align: center;
-    font-family: 'JetBrains Mono';
-    width: 300px;
-    white-space: normal;
-    line-height: 24px;
-
-    & > svg {
-      margin-left: 4px;
-      vertical-align: middle;
-    }
+    @include copyAddress;
   }
 
   .addresses {
@@ -135,6 +127,13 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
+      cursor: pointer;
+    }
+  }
+
+  .addressTip {
+    @media screen and (max-width: 1400px) {
+      transform: translateX(-40%) !important;
     }
   }
 

diff --git a/packages/neuron-ui/src/components/SUDTAccountList/sUDTAccountList.module.scss b/packages/neuron-ui/src/components/SUDTAccountList/sUDTAccountList.module.scss
@@ -54,6 +54,12 @@
       background: var(--secondary-background-color);
     }
   }
+  container-type: inline-size;
+  @container (max-width: 968px) {
+    .list {
+      grid-template-columns: repeat(3, auto);
+    }
+  }
 }
 
 .list {

diff --git a/packages/neuron-ui/src/components/SUDTMigrateDialog/sUDTMigrateDialog.module.scss b/packages/neuron-ui/src/components/SUDTMigrateDialog/sUDTMigrateDialog.module.scss
@@ -23,13 +23,15 @@
   font-size: 14px;
   cursor: pointer !important;
 
-  &:hover,
-  &.active {
-    &,
-    .title,
-    .subTitle {
-      color: var(--primary-color);
-      border-color: var(--primary-color);
+  &:not(.disabled) {
+    &:hover,
+    &.active {
+      &,
+      .title,
+      .subTitle {
+        color: var(--primary-color);
+        border-color: var(--primary-color);
+      }
     }
   }
 
@@ -44,7 +46,7 @@
 
   &.disabled {
     cursor: not-allowed !important;
-    background-color: #eee;
+    background-color: var(--disable-bg-color);
     * {
       cursor: not-allowed !important;
     }

diff --git a/packages/neuron-ui/src/components/SpecialAssetList/specialAssetList.module.scss b/packages/neuron-ui/src/components/SpecialAssetList/specialAssetList.module.scss
@@ -45,9 +45,8 @@
   }
 
   .actionBtn {
-    width: 104px;
     height: 40px;
-    min-width: unset;
+    min-width: 104px;
     border-radius: 12px;
     font-weight: 500;
     font-size: 14px;

diff --git a/packages/neuron-ui/src/containers/Navbar/navbar.module.scss b/packages/neuron-ui/src/containers/Navbar/navbar.module.scss
@@ -26,7 +26,7 @@ $hover-bg-color: #3cc68a4d;
   background: #212524;
   position: relative;
   --left-padding: 16px;
-  --svg-right-margin: 18px;
+  --svg-right-margin: 16px;
   &[data-expanded='false'] {
     --left-padding: 14px;
     --svg-right-margin: 14px;
@@ -146,7 +146,8 @@ $hover-bg-color: #3cc68a4d;
     }
 
     & .arrow {
-      margin: 0 24px;
+      margin: 0 16px 0 20px;
+      width: 10px;
     }
   }
 

diff --git a/packages/neuron-ui/src/styles/mixin.scss b/packages/neuron-ui/src/styles/mixin.scss
@@ -191,8 +191,10 @@
     display: none;
   }
   input[type='checkbox'] + span {
+    display: inline-block;
+    height: 20px;
     padding-left: 30px;
-    line-height: 22px;
+    line-height: 20px;
     background: url('../widgets/Icons/Checkbox.svg') no-repeat left top;
     user-select: none;
   }

diff --git a/packages/neuron-ui/src/styles/theme.scss b/packages/neuron-ui/src/styles/theme.scss
@@ -52,6 +52,7 @@ body {
   --process-background-color: #f0f0f0;
   --tag-background-color: #ecf9f0;
   --orange-color: #f68c2a;
+  --disable-bg-color: #eee;
 
   @media (prefers-color-scheme: dark) {
     --primary-color: #{$main-color};
@@ -102,5 +103,6 @@ body {
     --tooltip-hover-background-color: rgba(255, 255, 255, 0.2);
     --process-background-color: #282e2d;
     --tag-background-color: #171b1a;
+    --disable-bg-color: #666;
   }
 }
diff --git a/packages/neuron-ui/src/widgets/Table/index.tsx b/packages/neuron-ui/src/widgets/Table/index.tsx
@@ -28,6 +28,7 @@ export type TableProps<T> = {
   isFixedTable?: boolean
   rowExtendRender?: (v: T, idx: number) => React.ReactNode
   expandedRow?: number | null
+  hasHoverTrBg?: boolean
 }
 
 const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
@@ -43,6 +44,7 @@ const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
     isFixedTable,
     rowExtendRender,
     expandedRow,
+    hasHoverTrBg = true,
   } = props
   const [showBalance, setShowBalance] = useState(true)
   const onClickBalanceIcon = useCallback(() => {
@@ -61,7 +63,10 @@ const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
       data-have-head={!!head}
     >
       {head && typeof head === 'string' ? <div className={styles.head}>{head}</div> : head}
-      <table className={`${styles.table} ${head === null || head === undefined ? styles.noHead : ''}`}>
+      <table
+        className={`${styles.table} ${head === null || head === undefined ? styles.noHead : ''}`}
+        data-hover-tr-bg={hasHoverTrBg}
+      >
         <thead>
           <tr>
             {columnList.map(

diff --git a/packages/neuron-ui/src/widgets/Table/table.module.scss b/packages/neuron-ui/src/widgets/Table/table.module.scss
@@ -50,8 +50,10 @@ $head-height: 52px;
     tr {
       height: 58px;
       &:hover {
-        &[data-is-expand='false'] {
-          background-color: var(--hover-background-color);
+        &[data-has-hover-bg='true'] {
+          &[data-is-expand='false'] {
+            background-color: var(--hover-background-color);
+          }
         }
       }
       &:last-child {
@@ -69,6 +71,18 @@ $head-height: 52px;
       }
     }
   }
+
+  &[data-hover-tr-bg='true'] {
+    tbody {
+      tr {
+        &:hover {
+          &[data-is-expand='false'] {
+            background-color: var(--hover-background-color);
+          }
+        }
+      }
+    }
+  }
 }
 
 .fixedTableRoot {