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, considering users with disabilities.
• Verify the responsiveness of the UI on various devices and screen sizes, as the PR mentions testing only on desktop.
• Consider the contrast and readability of text over the new background styles to ensure that all users can comfortably read the information.
• Review the visibility and animation logic in the JavaScript file to ensure a smooth user experience without any flickering or unexpected behavior.

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