UI changes - round 5

[tvanepps]

• [x] 1. background color should be #FFF8E7, remove gradient circle behind text

• [x] 2. use the border design suggested in the figma doc for the intro content, the “Latest Contribution” section, and the FAQ

  • trent to update design
• [x] 3. make header text single line, we can update translations later
• [x] 
4. add countdown suggested in figma doc
 between title and copy
• [x] 5. delete button and text, these are not needed anymore. be sure to reapportion leftover whitespace
• [x] 6. 
users should be able to click through to the link anywhere within that red box, not just on the text. the links should also go to:

• IPFS: https://github.com/ethereum/kzg-ceremony/blob/main/README.md#ipfs-hosted-versions (i can point kzgceremony.eth to these hashes)
• Hosted Interface: https://ceremony.ethereum.org/#/entropy_input
• Other clients: correct link
• Write your own: https://blog.ethereum.org/2022/12/15/kzg-ceremony-grants-round

• [x] 7. hover states/ border not consistent between each button. second blue border should be further in if size of font allows for it, see figma for reference

• [x] 8. Use bold Inter copy font for FAQ headers, not Taviraj. also, if possible we should tighten the whitespace around each FAQ (red line suggestion), make sure to apply to all FAQs, not just the last one. not a priority, but on hover state for the FAQs, everything below moves up a few pixels because the bottom line is removed. time permitting, this should not happen
• [x] 9. “Built”, not “Build”

• [x] 10. ❓do we even need the nav bar at this point if we’re removing the arrow? it would be cleaner without it. if people want to change the language they could just do this at the beginning. or we can keep the language dropdown in the corner but still remove the white bar. not a strong opinion, and not a huge priority (this would apply to all steps of the hosted interface after this one as well)


• [x] 11. remove green around cursor - seems to be a bit laggy in my experience, and doesn’t fit with the rest of the graphic theme
• [x] 
12. any context on what the wait icon is for?

• [x] 13. remove arrow to be consistent with the previous page. (realizing now the arrow might be an antipattern if we encourage people to do it, the site might time out if they do it at a certain point in the flow)


• [x] 14. hover shadow characteristics (placement, spread, opacity) for all applications (including buttons) should be the same as elsewhere eg. landing page options, FAQ, Transcript contributions. here it is too light. not a high priority
• [x] 15. add underline and ↗ to indicate a link out

• [x] 16. remove arrow as in previous steps


• [x] 17. ❓perhaps the text should note “After signing with a wallet, you will be redirected to a “Sign-in with Ethereum" page, and then back here to complete the process of contribution.” it’s a little strange to be redirected without notice after signing the first time in the wallet.
• [x] 18. 

content should ideally be centered vertically in the circle
• [x] 19. move addition of yellow ring to the previous step in the flow to distribute the color between the steps better

• [x] 20. move the computation pulse animation (where the shields become yellow) to this lobby step and just keep it consistent until the completion of the calculation / “Dankshard draws Near”
• [x] 21. the disk animation / color should be moved to the previous step but without the spinning animation. 1. this will help spread out the appearance of color throughout all the steps. 2. i’d like it to not move because the spinning exposes disconnected areas under the graphic that it wasn’t designed for

• [x] 22. i should have been more specific - this should link to the hosted records interface at https://ceremony.ethereum.org/#/record

• [x] 23. integrity check info is anchored to the wrong place


• [x] 24. the bottom of the “View Contribution” ends with the bottom of the page, which feels a bit odd. the user should be able to scroll a bit further so “Download receipt” is slightly higher on the page

• [x] 25. clicking the “View all Contributions” button on the homepage takes you to the bottom of the records page, not the top

• [x] 26. each data point should be a newline for visual clarity and other languages. suggestion on the right

• [x] 27. minor text alignment issues on the homepage - seen with simple english, french, spanish. not sure the cause

[NicoSerranoP]

12. In the Entropy Input page we are computing the PoT pubkeys that might be needed to be double signed with a wallet provider. In some computers it might take a little longer to compute, in this situation we get the waiting icon for a couple of seconds and we hide the button to avoid double clicking on it

25. I was not able to replicate the bug but I added a window.scrollTo() to see if it solves it.

14. I added the same shadow as FAQ and Records rows. The problem is that I feel it still does not look as heavy as those elements. I feel it is because the button has this triangular shape and makes the shadow follow it a little bit up. Check image below:

10,13,16. Go back arrow: I delete the header in production (see image below) but I will leave it in testnet to show the "TESTNET CEREMONY" text.

24. I could not put margin in the bottom of the receipt (to make it appear that the yellow section ended but you could keep scrolling). To solve the "Download Receipt" button being too below I move it right after the title "Sequencer Acknowledgment" and added some padding (increase empty space of the receipt) at the bottom. Check image below:

27. This bug appears to be caused because of translations not being updated. I hope to end tomorrow in order to send the update translations and fix this ASAP.