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.
• Arrr, consider the contrast and readability of yer texts against the dark backgrounds, lest ye want yer users to walk the plank of confusion.
• Ye've done a fine job swabbin' the deck of the UI, but make sure ye test the waters on various screen sizes to ensure no sailor is left behind.
• Batten down the hatches and ensure yer spinner and transitions be smooth as Caribbean rum across all devices.
• Ahoy! Ye might want to hoist the flag of accessibility, ensuring that all hands on deck can navigate and use the gateway with ease.

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%;
	.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 */
	}

[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

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