Adjust overall component style to design

[ylembachar]

This is to adjust the overall component style to the design provided by the design team:

• [x] Adjust transaction detail page style
• [x] Adjust system overview page style
• [x] Adjust slot overview page style
• [x] Finalize any last styling tasks

[ylembachar]

@faheelsattar @blockchainluffy cc @fredo: I've added here a list of remaining tasks to do on the front end styling side ordered by priority - there are probably other things I haven't listed but you can always refer to the Figma file for reference.

System Overview Page

• [x] 1) Merge this PR: PR
• [x] 2) Change the colors of the chart and gauge following the design in the Figma file
• [x] 3) Align the errors to the left (you can add an error style for all errors)
• [x] 4) Add the Keyper text in the Keyper overview card (see in the Figma file)

Slot Overview Page

• [x] 5) Add design for tables

Transaction detail page

• [x] 6) Add different styles for statuses
• [x] 7) Estimated inclusion time and effective inclusion time should be converted from Unix timestamp to the user's timezone. This is not styling related but should be fixed.

All pages:

• [x] 8) Remove websocket errors from display
• [x] 9) Add info icon to the tooltip. Right now, you hover and you can see the tooltip.

Header:

• [x] 10) Add links and sub-categories to header (See website for example)

General:

• [ ] 11) After integration work is done, make sure the data is correctly displayed on the frontend on all elements, that different error messages are properly displayed, that the data precision for the charts is correct.
• [ ] 12) Double check any major differences between the provided design and the final result and correct them
• [ ] 13) Double check any minor differences between the provided design and the final result and correct them
• [x] 14) The Gnosis Chain dropdown list only contains one chain. I would remove it for now.

Important implementation notes 1) The unit tests are in cypress and they need to be run manually. While this is not ideal, please make sure that the tests are successful before merging a PR.

2) You can use the Figma Dev Tools to inspect the exact styles, and Builder.io to have some help generating the code. (They have a free 30 day trial version.) However, please make sure that the code added still follows the same code structure:

• All components should go under the components folder, pages modules under modules, and so on
• Use styled components and add them under the respective style file
• Icons are in SVG format and added under the icons folder
• Use MUI components and properties when available

3) The theme has definitions for colors and headings, please use those instead of hardcoding the colors and styles. Use the theme for any system-wide styles. This is also a WIP in the current code, feel free to correct that when you see it :-)

[ylembachar]

@faheelsattar @blockchainluffy @fredo, I've listed below some of the updates needed on the explorer:

• [x] Fix the issue with the percentage
• [x] Fix the inclusion chart to display the units and to display the last 30 days of data
• [x] Fix the cypress tests

System overview (Issue #72)

• [x] Change the colors of the gauge following the design in the Figma file / gauge should have two colors and size should fit the card width
• [x] Align the errors to the left
• [x] Align the card content to left so that it is aligned with the title

Slot overview:

• [x] Keep only Age as the column name
• [x] Switch Age to the right side
• [x] Don't truncate the hash when on full width
• [x] Adjust the space between the title and the tables

Transaction Detail:

• [x] Slot in which the transaction was included in -> Slot in which the transaction was included

Search Bar/Dropdown list (Issue #77)

• [x] Adjust search design to be identical to the one in Figma, we also shouldn't truncate the hash
• [x] Change gnosis list near the sidebar to a dropdown list

General:

• [ ] Finalize sidebar styling
• [ ] Make header identical to the website header
• [ ] Correct other design differences
• [ ] Mobile Responsiveness
• [ ] Test different values, make sure the data is correctly displayed on the frontend on all elements, that different error messages are properly displayed, that the data precision for the charts is correct.

Since we have some time left before the launch, we can also think about adding the slot information that is not part of the MVP.

[ylembachar]

@faheelsattar @blockchainluffy cc @fredo summarizing here what we discussed during the meeting although some tasks are not front-end related but you can create their corresponding issues):

Faheel:

• [x] Fixing the bug when no transaction is found after the tx is submitted
• [x] Fix the percentage issue
• [x] Fixing the bug with copying the transaction hash
• [x] Work on the slot overview page

Punit:

• [ ] DB migration (you can do some testing here based on the newly generated data)
• [x] Fixing the inclusion chart
• [x] Fixing the cypress tests
• [x] Fix the navigation issue (Issue #75)

Yousra: I will continue working on the system overview and take on the next remaining styling tasks.

When you guys are done, feel free to pick up the next task on the list.

[ylembachar]

@faheelsattar @punit @fredo I've gathered below the last todos regarding the front-end styling:

• [ ] Test different values, make sure the data is correctly displayed on the frontend on all elements, that different error messages are properly displayed, that the data precision for the charts is correct. (punit is working on this)

Finalize sidebar styling

• [ ] the colors and spacing need to be adjusted here
• [ ] when not active, the icon should be greyed

Make header identical to the website header

• [ ] the spacing needs to be adjusted
• [ ] the Join Movement link to be added why did we remove the About section?

https://github.com/shutter-network/shutter-explorer/issues/89 Correct other design differences

• [ ] Transaction Overview Icon should be in normal weight (now in bold)
• [ ] Fix tooltip for inclusion chart (says in seconds -> Estimated time for a transaction to be included)
• [ ] Change "Executed Transactions" to "Included Transactions" in the gauge and center it
• [ ] When hovering over the inclusion chart values, only the final one is displayed

Slot overview page: Transaction table design is a bit different than Figma file:

• [ ] have all hashes in blue
• [ ] card needs a line on top
• [ ] there should be no line below the field names
• [ ] the field names should be in grey

[ylembachar]

@faheelsattar @blockchainluffy @fredo I also added some post-MVP issues: https://github.com/shutter-network/shutter-explorer/issues/85 https://github.com/shutter-network/shutter-explorer/issues/86 https://github.com/shutter-network/shutter-explorer/issues/87