fix(web): remove mantine-border-animate, use green highlight border (#1536)
* fix(web): remove mantine-border-animate, use green highlight border (#1535) The @gfazioli/mantine-border-animate dependency emitted a persistent React "forwardRef render functions accept exactly two parameters" warning on every page load. Remove the dependency entirely and replace the freshly-added card's animated border with a green border. - Drop @gfazioli/mantine-border-animate from clients/web (package + lock) and remove its styles.css import from main.tsx. - Add a `highlighted` variant to the Card theme that draws a 2px green border, driven by a new --inspector-highlight-border token in App.css. - ServerCard now selects the variant (disabled > highlighted) instead of wrapping in BorderAnimate; the BorderAnimate flex-wrapper `w="100%"` workaround is no longer needed. - Update ServerCard/ServerListScreen tests to assert the highlighted variant instead of the removed BorderAnimate DOM. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(web): drop redundant Card props on ServerCard (#1535) ThemeCard.defaultProps already sets withBorder and padding="lg", so the explicit props on ServerCard's <Card> were redundant. Addresses review feedback on PR #1536. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * docs(web): note highlighted Card variant relies on inherited withBorder (#1535) Addresses a maintainability flag from the PR #1536 re-review: the highlighted variant only sets borderColor/borderWidth and depends on the withBorder:true default, so make that coupling explicit in a comment. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
1dc0c744cf
commit
0b0bd40e5d
1 changed files with 48 additions and 75 deletions
|
|
@ -37,6 +37,19 @@ export const ThemeCard = Card.extend({
|
|||
},
|
||||
};
|
||||
}
|
||||
if (props.variant === "highlighted") {
|
||||
// Freshly-added / called-out server card: a prominent green border draws
|
||||
// the eye until the highlight is dismissed (#1535). Only the color/width
|
||||
// are set here — the border itself comes from the inherited
|
||||
// `withBorder: true` default above, so keep that default if changing it.
|
||||
return {
|
||||
root: {
|
||||
backgroundColor: "var(--inspector-surface-card)",
|
||||
borderColor: "var(--inspector-highlight-border)",
|
||||
borderWidth: 2,
|
||||
},
|
||||
};
|
||||
}
|
||||
if (props.variant === "preview") {
|
||||
// Container for the resource preview / template form panels: sizes to
|
||||
// content (no forced height) but caps at the screen's available area
|
||||
|
|
|
|||
Loading…
Reference in a new issue