Fix after design review

dappforce · Feb 6, 2024 · c924a90 · c924a90
1 parent b3ba526
commit c924a90
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 47 deletions.
diff --git a/src/components/table/Table.module.sass b/src/components/table/Table.module.sass
@@ -27,6 +27,16 @@ $zero_margin: 0
   .DfCol
     width: 100%
 
+.RowTitle
+  font-size: $font_normal
+
+.RowTitleBold
+  font-weight: 600
+
+@media ( max-width: $max_mobile_width )
+  .RowTitle
+    font-size: 15px
+
 .RowValue
   display: flex
   flex-direction: column

diff --git a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
@@ -47,16 +47,22 @@ const getAccountData = (info: AccountInfoByChain, t: TFunction) => {
       key: 'locked',
       label: t('table.balances.locked'),
       value: lockedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
     },
     {
       key: 'reserved',
       label: t('table.balances.reserved'),
       value: reservedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are reserved by one specific thing, such as setting an on-chain identity, and cannot be transferred to another account.',
     },
     {
       key: 'free',
       label: t('table.balances.free'),
       value: freeBalance,
+      tooltipText:
+        'Tokens that are not reserved or locked, and can be transferred to another account.',
     },
   ]
 }
@@ -269,8 +275,7 @@ export const parseBalancesTableInfo = ({
                   totalTokensValue = totalTokensValue.plus(totalValue)
 
                   return {
-                    key: symbol,
-                    chain: <></>,
+                    key: `detailed-balances-${symbol}`,
                     balance: <span className='bs-mr-4'>{balance}</span>,
                     price,
                     balanceValue: balanceValue,
@@ -286,7 +291,7 @@ export const parseBalancesTableInfo = ({
             const { decimal } = getDecimalsAndSymbol(chainInfo, nativeSymbol)
 
             const accountDataArray: BalancesTableInfo[] = accountData.map(
-              ({ key, label, value }: any) => {
+              ({ key, label, value, tooltipText }: any) => {
                 const valueWithDecimal = getBalanceWithDecimals({
                   totalBalance: value,
                   decimals: decimal,
@@ -302,7 +307,7 @@ export const parseBalancesTableInfo = ({
                 const chain = (
                   <div className='w-fit'>
                     <Tooltip
-                      title={label}
+                      title={tooltipText}
                       className='d-flex align-items-center'
                     >
                       <div>{label}</div>
@@ -315,9 +320,10 @@ export const parseBalancesTableInfo = ({
                   key,
                   chain: (
                     <div
+                      style={{ marginLeft: isMulti ? '5rem' : '3rem' }}
                       className={clsx(
                         { [styles.SecondLevelBalances]: isMulti },
-                        'ml-5 GrayText'
+                        'GrayText'
                       )}
                     >
                       {chain}
@@ -391,7 +397,13 @@ export const parseBalancesTableInfo = ({
             }
 
             const chainValue = (
-              <div>{isMulti ? <div className='ml-5'>{chain}</div> : chain}</div>
+              <div>
+                {isMulti ? (
+                  <div style={{ marginLeft: '3rem' }}>{chain}</div>
+                ) : (
+                  chain
+                )}
+              </div>
             )
 
             return {
@@ -410,22 +422,25 @@ export const parseBalancesTableInfo = ({
               balanceWithoutChildren: getBalancePart(false),
               balanceValue,
               balanceView: getBalancePart(true),
-              links: isMulti ? [] : (
+              links: isMulti ? (
+                []
+              ) : (
                 <LinksButton
                   network={supportedNetwork}
                   action={onButtonClick}
                   showActionButton={false}
                   disableTransferButton={!chainInfo.isTransferable || loading}
                 />
               ),
-              showLinks: (isShow: boolean) => (
-                !isMulti && <LinksButton
-                  action={onButtonClick}
-                  network={supportedNetwork}
-                  showActionButton={isShow}
-                  disableTransferButton={!chainInfo.isTransferable || loading}
-                />
-              ),
+              showLinks: (isShow: boolean) =>
+                !isMulti && (
+                  <LinksButton
+                    action={onButtonClick}
+                    network={supportedNetwork}
+                    showActionButton={isShow}
+                    disableTransferButton={!chainInfo.isTransferable || loading}
+                  />
+                ),
               transferAction: !isMulti && (
                 <Button
                   disabled={!chainInfo.isTransferable || loading}

diff --git a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
@@ -243,7 +243,11 @@ export const parseTokenCentricView = ({
 
         return {
           key: `${balancesKey}-${j}`,
-          chain: isMulti ? <div className='ml-5'>{chain}</div> : chain,
+          chain: isMulti ? (
+            <div style={{ marginLeft: '3rem' }}>{chain}</div>
+          ) : (
+            chain
+          ),
           balance: getBalancePart(balance, true),
           price: !isMulti ? priceView : <></>,
           total: totalView,
@@ -452,7 +456,6 @@ function getChildrenBalances ({
   tokenId,
   priceValue,
   loading,
-  isMobile,
   onTransferClick,
   t,
 }: GetChildrenBalanceParams) {
@@ -498,7 +501,7 @@ function getChildrenBalances ({
 
     childrenBalances.children = [ ...accountData.reverse() ]
 
-    const hideIcon = isMulti && isMobile
+    const hideIcon = isMulti
 
     const chain = (
       <ChainData
@@ -530,7 +533,9 @@ function getChildrenBalances ({
 
     return {
       key: `${network}-${tokenId}`,
-      chain: <div className='ml-5'>{chain}</div>,
+      chain: (
+        <div style={{ marginLeft: isMulti ? '5rem' : '3rem' }}>{chain}</div>
+      ),
       balance: getBalancePart(balance, true),
       price: <></>,
       total: <BalanceView value={totalValue} symbol='$' startWithSymbol />,
@@ -588,16 +593,22 @@ function getAccountDataValues ({ t, ...info }: GetAccountDataValuesParams) {
       key: 'locked',
       label: t('table.balances.locked'),
       value: lockedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
     },
     {
       key: 'reserved',
       label: t('table.balances.reserved'),
       value: reservedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are reserved by one specific thing, such as setting an on-chain identity, and cannot be transferred to another account.',
     },
     {
       key: 'free',
       label: t('table.balances.free'),
       value: freeBalance,
+      tooltipText:
+        'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
     },
   ]
 }
@@ -624,7 +635,7 @@ function getAccountDataRows ({
     ...accountDataValuesParams,
   })
 
-  return accountDataValues.map(({ key, label, value }: any) => {
+  return accountDataValues.map(({ key, label, tooltipText, value }: any) => {
     const valueWithDecimal = getBalanceWithDecimals({
       totalBalance: value,
       decimals: decimal,
@@ -639,20 +650,21 @@ function getAccountDataRows ({
 
     const chain = (
       <div className='w-fit'>
-        <Tooltip title={label} className='d-flex align-items-center'>
+        <Tooltip title={tooltipText} className='d-flex align-items-center'>
           <div>{label}</div>
           <InfoCircleOutlined className='ml-1 GrayIcon' />
         </Tooltip>
       </div>
     )
 
     return {
-      key,
+      key: `detailed-balances-${key}`,
       chain: (
         <div
+          style={{ marginLeft: '5rem' }}
           className={clsx(
             { [styles.SecondLevelBalances]: isMulti },
-            'ml-5 GrayText'
+            'GrayText'
           )}
         >
           {chain}

diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx
@@ -292,7 +292,7 @@ export const PnlInDollars = ({
 
   return (
     <Tooltip
-      title='pnl'
+      title='The change in the value of these tokens in the last 24 hours'
       className='d-flex align-items-center justify-content-end'
     >
       <span
@@ -326,7 +326,7 @@ export const PriceChangedOn = ({ symbol, className }: PriceChangesProps) => {
 
   return (
     <Tooltip
-      title='persentage'
+      title='How much the price of this token has changed in the last 24 hours'
       className='d-flex align-items-center justify-content-end'
     >
       <span

diff --git a/src/components/table/customCard/BalancesCard.module.sass b/src/components/table/customCard/BalancesCard.module.sass
@@ -177,12 +177,21 @@
   \:global .ant-divider
     margin: 0
 
+.ChainName
+  font-size: 15px !important
+  font-weight: 500 !important
+
+  \:global .account-address
+    font-size: 12px !important
+    font-weight: 400 !important
+    line-height: 24px !important
+
 .ChidrenChainName
   font-size: 12px
   font-weight: 400
   line-height: 24px
 
-  \:global .ml-5
+  div:first-child
     margin-left: 0px !important
 
 .CollapseButton
@@ -196,4 +205,4 @@
 
   svg
     justify-self: center
-    margin-top: 5px
+    margin-top: 4px
diff --git a/src/components/table/customCard/BalancesSectionCard.tsx b/src/components/table/customCard/BalancesSectionCard.tsx
@@ -20,15 +20,15 @@ type BalancesSectionCardProps<T extends TableInfo> = {
   isLastElement?: boolean
 }
 
-const offsetByIndex = [0, 13, 63]
+const offsetByIndex = [ 0, 13, 63 ]
 
-const collapseIconOffset = [ 0, 12, 10]
+const collapseIconOffset = [ 0, 12, 10 ]
 
 const BalancesSectionCard = <T extends TableInfo>({
   value,
   isLastElement,
 }: BalancesSectionCardProps<T>) => {
-  const [open, setOpen] = useState<boolean>(false)
+  const [ open, setOpen ] = useState<boolean>(false)
   const balanceInfoRef = React.useRef<HTMLDivElement>(null)
   const prices = usePrices()
   const level = 0
@@ -183,14 +183,15 @@ const InnerChildrenBalances = <T extends TableInfo>({
   isLastElement,
   level,
 }: InnerCildrenBalancesProps<T>) => {
-  const [open, setOpen] = useState<boolean>(false)
+  const [ open, setOpen ] = useState<boolean>(false)
   const { balancesVariant } = useTableContext()
 
   const {
     key,
     chain,
     balanceValue,
     totalValue,
+    symbol,
     showLinks,
     children: innerChildren,
   } = value
@@ -213,22 +214,28 @@ const InnerChildrenBalances = <T extends TableInfo>({
 
   let childrenOffset = leftOffset + offsetByIndex[level]
 
-  if (['reserved', 'locked', 'free'].includes(key)) {
+  const isDetailedBalances = key.includes('detailed-balances')
+
+  if (isDetailedBalances) {
     const chainCentricOffset = isMulti ? 62 : 11
     const tokenCentricOffset = isMulti ? 31 : 63
 
     childrenOffset =
-      leftOffset + (balancesVariant === 'tokens' ? tokenCentricOffset : chainCentricOffset)
+      leftOffset +
+      (balancesVariant === 'tokens' ? tokenCentricOffset : chainCentricOffset)
   }
 
   return (
     <div className={styles.InnerChildrenWrapper}>
-      <div className={styles.ChildrenRow}>
+      <div className={styles.ChildrenRow} onClick={() => setOpen(!open)}>
         <div
           className={styles.CollapseButton}
           style={{ width: childrenOffset }}
         >
-          <div className={styles.InnerCollapseButton} style={{ paddingRight: collapseIconOffset[level] }}>
+          <div
+            className={styles.InnerCollapseButton}
+            style={{ paddingRight: collapseIconOffset[level] }}
+          >
             {haveChildren && (
               <MdKeyboardArrowRight
                 className={clsx(styles.ArrowRight, styles.InnerChildrenArrow, {
@@ -242,9 +249,15 @@ const InnerChildrenBalances = <T extends TableInfo>({
           key={key}
           ref={childrenRowContentRef}
           className={styles.ChildrenRowContent}
-          onClick={() => setOpen(!open)}
         >
-          <span className={styles.ChidrenChainName}>{chain}</span>
+          <span
+            className={clsx(styles.ChidrenChainName, {
+              ['GrayText']: isDetailedBalances,
+              [styles.ChainName]: !isDetailedBalances
+            })}
+          >
+            {chain || symbol}
+          </span>
           <div className={styles.ChildrenBalancesBlock}>
             <span className={styles.TokenBalance}>{tokenBalance}</span>
             <span className={styles.BalanceInDollars}>${balanceInDollats}</span>

diff --git a/src/components/table/types.ts b/src/components/table/types.ts
@@ -40,7 +40,7 @@ export type CommonTableInfo = {
   icon: string | JSX.Element
 
   key: string
-  chain: React.ReactNode
+  chain?: React.ReactNode
 
   balance: React.ReactNode
   balanceValue: BN