apps/web-dashboard/src/index.css (1)

869-873: 💤 Low value

Redundant background assignment in hover state.

The hover rule sets background: var(--color-auth-mode-bg), which is already the default background defined in .auth-form-card__mode (line 856). The hover visual feedback is effectively provided by the color and text-decoration changes alone.

♻️ Optional cleanup

 .auth-form-card__mode--clickable:hover {
-  background: var(--color-auth-mode-bg);
   color: var(--color-primary);
   text-decoration: underline;
 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web-dashboard/src/index.css` around lines 869 - 873, The hover rule for
.auth-form-card__mode--clickable:hover redundantly reassigns background to
var(--color-auth-mode-bg) which is already set on .auth-form-card__mode; remove
the background declaration from the :hover block so the hover only changes color
and text-decoration (leave .auth-form-card__mode and
.auth-form-card__mode--clickable:hover selectors intact).

apps/web-dashboard/src/components/AuthShell.jsx (1)

22-29: 💤 Low value

Consider moving inline button-reset styles to CSS.

The inline styles { background: 'none', border: 'none', cursor: 'pointer', padding: 0 } duplicate logic that could live in the .auth-form-card__mode--clickable class for better maintainability and consistency with the existing design system.

♻️ Refactor to consolidate styles in CSS

In index.css, update the clickable class to include button-reset properties:

 .auth-form-card__mode--clickable {
+  background: none;
+  border: none;
+  padding: 0;
   cursor: pointer;
   transition: all 0.2s ease;
 }

Then remove the inline style prop from the button:

             <button
               type="button"
               className="auth-form-card__mode auth-form-card__mode--clickable"
               onClick={onModeClick}
-              style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
             >
               {modeLabel}
             </button>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web-dashboard/src/components/AuthShell.jsx` around lines 22 - 29, Move
the inline button-reset styles out of the JSX and into the CSS class: update the
.auth-form-card__mode--clickable rule in your stylesheet to include background:
none, border: none, cursor: pointer, and padding: 0, then remove the style prop
from the button element in AuthShell.jsx (the button that uses className
"auth-form-card__mode auth-form-card__mode--clickable" and
onClick={onModeClick}) so the component relies on the consolidated CSS for the
reset.