Cais gateway UI changes

[brendanator]

Revamped the UI and fixed several UI bugs. Only tested on desktop.

[brendanator]

This pull request was cloned from https://github.com/sourcery-ai-experiments/go-obscuro/pull/3

Note: the URL is not a link to avoid triggering a notification on the original pull request.

[brendanator]

Sourcery Review:

Hey @brendanator - I've reviewed your changes and they look great!

General suggestions:

• Ye be makin' the seas of UI much more navigable, but don't forget to keep a weather eye on the horizon for cross-browser compatibility, matey.
• Arrr, while ye have set the sails for a grander UI, ensure ye not be overlookin' the responsiveness for those pilferin' the seas on mobile vessels.
• Ye've done well to swab the deck of bugs, but keep yer cannons ready for any that might resurface with future tides.
• Chart a course for accessibility, me hearty, so all sailors, regardless of their abilities, can navigate these waters.

Here's what I looked at during the review

• 🟡 General issues: 2 issues found
• 🟢 Security: all looks good
• 🟡 Testing: 4 issues found
• 🟢 Complexity: all looks good
• 🟢 Docstrings: all looks good

LangSmith trace

---

Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.

[brendanator]

suggestion (code_refinement): Setting the HTML height to 100% is a good practice for full-height app layouts, ensuring that the gradient background covers the entire viewport regardless of the content size.

Suggested change

	html {
	height: 100%;
	html {
	height: 100%;
	min-height: 100%; /* Ensures that the gradient background covers the entire viewport even if the content is smaller */
	}

[brendanator]

suggestion (code_refinement): The use of rgba(0,0,0,.5) for the .begin-box background provides a nice translucent effect, enhancing the visual appeal of the modal. However, consider the readability of text over this background, especially in various lighting conditions.

Suggested change

	}
	.begin-box {
	background-color: rgba(0,0,0,0.5); /* Consider adjusting the opacity or adding a text shadow for better readability */
	color: #fff; /* Ensure high contrast for readability */
	text-shadow: 1px 1px 2px black; /* This can help text stand out more */
	}