feat: Improve UI and readability of panels in detail pages

[janmichek]

Description

Resolves #397

Demo

Checklist:

• I have read and followed the Contributing Guide
• change layout

[janmichek]

@michele-franchi I kicked off the visual rework. It its still rough draft. Just wanted to sync with you on the idea before. Can you check the progress, please?

[michele-franchi]

• Good to have the tooltips left aligned on tables
• I would go with the following structure for the hash and type:

This simplifies the page and removes the ugly thing to have the hash at the right side (and type for transactions) when text is aligned to the left. This option is an alternative of what you proposed regarding hash and type:

Of course a similar behaviour applies for all the detail pages. For example with names the header would be "Name" instead of "Hash".

• I wouldn't remove bold from table headers, I would keep the current one for now. Can be improved in a second iteration

• All tables should be aligned in the same way in a details page, for example:

[janmichek]

Thanks for review

Good to have the tooltips left aligned on tables

Understood. Will also do it for table listings

I would go with the following structure for the hash and type:

Yeah, I will do for now. But I would like to go back to this later. I was looking on referenced explorers, that are using the hierarchy like this - but I looked at tx details which is structured like this.

I will have to think of how to accommodate this to mobile view. That may not be that easy

I wouldn't remove bold from table headers, I would keep the current one for now. Can be improved in a second iteration

as you wish. The other explorers has the label with lighter style than the value itself. Generally I think the value is the thing that should be bolder, not the label.

All tables should be aligned in the same way in a details page, for example:

Sure, will do it.

[janmichek]

Preview was rendered here:
https://pr-717-aescan.stg.service.aepps.com/

[janmichek]

Not related to issue. I renamed the slot names. Before was 'header' and 'heading'

[Liubov-crypto]

1. Double appearing of account:

2. is alignment here correct?

[janmichek]

1. Double appearing of account:

2. is alignment here correct?

fixed

[Liubov-crypto]

lgtm

[michele-franchi]

Really nice improvement. I would also change the following:

• Both AEX-9 and AEX-141 should be in the same row of the Smart Contract ID, for example:

- Mobile views should have a little bit more space, for example:

As you can see th and td have no space in between.

[janmichek]

Both AEX-9 and AEX-141 should be in the same row of the Smart Contract ID, for example:

I see, but I solved it differently. The thing you suggest is not going to squeeze on one line

As you can see th and td have no space in between.

I see, fixed

[michele-franchi]

I think something went wrong with the develop merge in the "AENS Name" details page:

There are different labels. This happens in all names states: active, in auction and expired with different double labels.

[janmichek]

I think something went wrong with the develop merge in the "AENS Name" details page:

There are different labels. This happens in all names states: active, in auction and expired with different double labels.

Fixed, probably some failed attempt of merging

[michele-franchi]

Let's fix the remaining things in the followup.