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:

• Ensure that the new UI elements and styles are accessible, including considering contrast ratios and keyboard navigability.
• Given the significant UI changes, it might be beneficial to gather user feedback on the new design to identify any areas for further improvement.
• Review the responsiveness of the new design to ensure it provides an optimal viewing experience across different devices and screen sizes, especially since the initial testing was only on desktop.

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 */
	}