Refactor input field styles to remove borders and manage focus state …

[kyrregjerstad]

…with NotchedBorder component

[gemini-code-assist]

Summary of Changes

Hello @kyrregjerstad, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refactors the styling of input fields by delegating border and focus state management to a dedicated NotchedBorder component. This change removes redundant border declarations and custom focus styles from the global CSS, ensuring a cleaner and more consistent visual presentation for input fields across the application. The primary impact is a streamlined approach to input field aesthetics, particularly concerning their borders and how they appear when focused.

Highlights

• Input Field Border Removal: The default 1px solid border has been removed from input fields in bitfocus-custom-styles.css. This change centralizes border rendering, as it is now handled by a dedicated NotchedBorder component.
• Refined Focus State Styling: Custom border-color and box-shadow styles for input field focus states have been removed. A new CSS rule was added to hide the default fieldset outline, preventing visual conflicts and ensuring a clean focus indication provided by the NotchedBorder component.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request refactors the input field styles to use a new NotchedBorder component, removing the old border and focus styles. The changes in bitfocus-custom-styles.css adapt the custom theme to this new component structure. My review focuses on ensuring the new CSS overrides follow best practices. I've identified an unnecessary use of !important which could complicate future styling, and I've suggested its removal.

[gemini-code-assist]

The use of !important should be avoided whenever possible as it breaks the natural CSS cascade and can make future styling and debugging more difficult. In this case, the selector #app form div[class*='inputField'] ~ div fieldset[class*='outline'] is already highly specific due to the #app ID. This specificity is sufficient to override the component's default styles, so !important is not needed.

Suggested change

	#app form div[class*='inputField'] ~ div fieldset[class*='outline'] {
	display: none !important;
	}
	#app form div[class*='inputField'] ~ div fieldset[class*='outline'] {
	display: none;
	}