Refactor capacity component

[Keith-CY]

This PR refactors the Capacity component

Affected pages are as follows:

1. Homepage: reward of a block, capacity of a transaction, https://ckb-explorer-frontend-in-magickbase-repo-git-7edfd6-magickbase.vercel.app/
2. Block list: reward of a block, https://ckb-explorer-frontend-in-magickbase-repo-git-7edfd6-magickbase.vercel.app/block/list
3. Transaction list: capacity of a transaction, https://ckb-explorer-frontend-in-magickbase-repo-git-7edfd6-magickbase.vercel.app/transaction/list
4. Transaction detail(professional/lite): capacity of each cell, https://ckb-explorer-frontend-in-magickbase-repo-git-7edfd6-magickbase.vercel.app/transaction/0xc0dba027b4fe745b7f520bc87cbf8d77ac8a0b0a501e773db0c2eecc6ece817a
5. Address detail(professional/lite): capacity of each cell, https://ckb-explorer-frontend-in-magickbase-repo-git-7edfd6-magickbase.vercel.app/address/ckt1qzda0cr08m85hc8jlnfp3zer7xulejywt49kt2rr0vthywaa50xwsqgy2q6qz79wyaexr2pcez0eejmk5xgw6jcfw7zmg
6. Nervos DAO: distribution in overview, capacity of transaction, deposited capacity of an address, popup of nervos dao icon, https://ckb-explorer-frontend-in-magickbase-repo-git-7edfd6-magickbase.vercel.app/nervosdao
7. Script detail: capacity of transaction, capacities in overview, https://ckb-explorer-frontend-in-magickbase-repo-git-7edfd6-magickbase.vercel.app/script/0x79f90bb5e892d80dd213439eeab551120eb417678824f282b4ffb5f21bad2e1e/type/deployed_cells?page=1&size=10

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ckb-explorer-frontend-in-magickbase-repo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 26, 2023 9:40am

[WhiteMinds]

This PR is based on #180, and now we need to remove unnecessary changes from #180.

[Keith-CY]

This PR is based on #180, and now we need to remove unnecessary changes from #180.

Updated and scss variables are used in media queries

[FrederLu]

UI:

1、The color of the data () in the transaction page Lite is abnormal.
https://ckb-explorer-frontend-in-magickbase-repo-r61x41klx-magickbase.vercel.app/transaction/0x1d320432dbe19599eb752d835be9877a596870b46980dd68edad3abd1fd10111?layout=lite

---

2、The id information style and () color are inconsistent with before.
https://ckb-explorer-frontend-in-magickbase-repo-r61x41klx-magickbase.vercel.app/transaction/0xb730c4ddaf41272532a809383b45731de990971bdee9eecfbe22fd5af816fdb1?layout=lite

Previous style:

---

3、When there is a label, the distance between it and the following information is small and needs to be adjusted.
https://ckb-explorer-frontend-in-magickbase-repo-r61x41klx-magickbase.vercel.app/transaction/0x7ab270c95cb31d1ee32b1b56433248c0a73bb462536a20df873122f8b6bfa7e1?layout=lite

[Keith-CY]

UI:

1、The color of the data () in the transaction page Lite is abnormal. ckb-explorer-frontend-in-magickbase-repo-r61x41klx-magickbase.vercel.app/transaction/0x1d320432dbe19599eb752d835be9877a596870b46980dd68edad3abd1fd10111?layout=lite

2、The id information style and () color are inconsistent with before. ckb-explorer-frontend-in-magickbase-repo-r61x41klx-magickbase.vercel.app/transaction/0xb730c4ddaf41272532a809383b45731de990971bdee9eecfbe22fd5af816fdb1?layout=lite

Previous style:

3、When there is a label, the distance between it and the following information is small and needs to be adjusted. ckb-explorer-frontend-in-magickbase-repo-r61x41klx-magickbase.vercel.app/transaction/0x7ab270c95cb31d1ee32b1b56433248c0a73bb462536a20df873122f8b6bfa7e1?layout=lite

The color of NFT ID and the distance between label and amount will be fixed.

The color of () need more detail because in previous design, the A and B in A(B) wre assumed to be the same, so the () has the same color. But in fact A and B can be colored differently, so the color of () should be specified to be the same as A or B cc @Sven-TBD

[Keith-CY]

Ah, I recalled that color of NFT is not set because the direction of NFT is not set, as mentioned at Magickbase/ckb-explorer-public-issues#503

They are previously colored because the assumption that NFT is sent when the capacity is negative, or NFT is received when the capacity is positive. But the assumption is invalid.

So there need more detail returned from API to set the color of NFT ID cc @FrederLu

[FrederLu]

The color of NFT ID and the distance between label and amount will be fixed.
The color of () need more detail because in previous design, the A and B in A(B) wre assumed to be the same, so the () has the same color. But in fact A and B can be colored differently, so the color of () should be specified to be the same as A or B cc @Sven-TBD

Ah, I recalled that color of NFT is not set because the direction of NFT is not set, as mentioned at Magickbase/ckb-explorer-public-issues#503
They are previously colored because the assumption that NFT is sent when the capacity is negative, or NFT is received when the capacity is positive. But the assumption is invalid.
So there need more detail returned from API to set the color of NFT ID cc @FrederLu

To sum up, the label position can now be fine-tuned, and the rest needs to be processed later.

[Keith-CY]

The color of NFT ID and the distance between label and amount will be fixed.
The color of () need more detail because in previous design, the A and B in A(B) wre assumed to be the same, so the () has the same color. But in fact A and B can be colored differently, so the color of () should be specified to be the same as A or B cc @Sven-TBD

Ah, I recalled that color of NFT is not set because the direction of NFT is not set, as mentioned at Magickbase/ckb-explorer-public-issues#503
They are previously colored because the assumption that NFT is sent when the capacity is negative, or NFT is received when the capacity is positive. But the assumption is invalid.
So there need more detail returned from API to set the color of NFT ID cc @FrederLu

To sum up, the label position can now be fine-tuned, and the rest needs to be processed later.

Yes

[FrederLu]

The color of NFT ID and the distance between label and amount will be fixed.
The color of () need more detail because in previous design, the A and B in A(B) wre assumed to be the same, so the () has the same color. But in fact A and B can be colored differently, so the color of () should be specified to be the same as A or B cc @Sven-TBD

Ah, I recalled that color of NFT is not set because the direction of NFT is not set, as mentioned at Magickbase/ckb-explorer-public-issues#503
They are previously colored because the assumption that NFT is sent when the capacity is negative, or NFT is received when the capacity is positive. But the assumption is invalid.
So there need more detail returned from API to set the color of NFT ID cc @FrederLu

To sum up, the label position can now be fine-tuned, and the rest needs to be processed later.

Yes

OK. The style here will be different from the previous design. cc @Sven-TBD

[Keith-CY]

This distance between transfer type and amount should be fixed by 1c06b16
Preview is available at https://ckb-explorer-frontend-in-magickbase-repo-git-7edfd6-magickbase.vercel.app/transaction/0x7ab270c95cb31d1ee32b1b56433248c0a73bb462536a20df873122f8b6bfa7e1?layout=lite