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 interactions are accessible, including keyboard navigation and screen reader compatibility.
• Consider the impact of the UI changes on different screen sizes and devices, even though the initial testing was done on desktop.
• Review the consistency of UI elements and interactions across the application to maintain a cohesive user experience.
• Evaluate the performance implications of the new UI, especially the animations and dynamic content loading, to ensure a smooth user experience.

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