Skip to content

Commit cb1c59f

Browse files
gwleclercclaude
gwleclerc
and
claude
committed
style(client): restore antd 6 visual fidelity and theme the diagram
Restore the antd 4 look lost in the antd 6 migration: base font/family, code line numbers in read-only previews, sidebar/navbar/page-header spacing, and the History filter rendered as an inline link. Theme the mermaid sequence diagram with the app palette and make the Visualize customize form a compact inline row. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 8529d46 commit cb1c59f

9 files changed

Lines changed: 97 additions & 21 deletions

File tree

‎client/components/App.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
// Base typography for the app: antd's reset leaves <body> without a font-size/family, so pin
2+
// them here (otherwise the browser default 16px applies).
3+
body {
4+
font-size: 14px;
5+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
6+
Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
7+
"Noto Color Emoji";
8+
}
9+
110
html,
211
body,
312
#root,

‎client/components/Code.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,8 @@ const Code = ({
8787
[language]
8888
);
8989

90-
// Keep parity with the legacy editor: readonly previews (no onChange) had no
91-
// line numbers, editable instances did.
90+
// Show line numbers in every instance, including read-only previews; the active-line
91+
// highlight is limited to editable ones.
9292
const body = (
9393
<CodeMirror
9494
className="code-editor"
@@ -98,7 +98,7 @@ const Code = ({
9898
readOnly={readOnly}
9999
extensions={extensions}
100100
basicSetup={{
101-
lineNumbers: !readOnly,
101+
lineNumbers: true,
102102
foldGutter: true,
103103
highlightActiveLine: !readOnly,
104104
highlightActiveLineGutter: !readOnly,

‎client/components/History.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,16 @@
2626
// These rules are used for the inline filters (sort by, filter, etc.)
2727
.ant-btn-link {
2828
padding: 6px;
29+
// Match the neighboring link buttons (colorLink); the color inherits to the selected value.
30+
color: #1677ff;
31+
outline: none;
32+
// Zero the inner value wrapper's padding so the value sits inline like plain text, and keep
33+
// the inline-link look while focused/open: no border, ring or box around it.
34+
.ant-select-content,
2935
.ant-select-selector {
3036
padding: 0;
37+
border-color: transparent !important;
38+
box-shadow: none !important;
3139
}
3240
}
3341

‎client/components/Mermaid.tsx‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,34 @@ import mermaid from "mermaid";
33
import * as React from "react";
44
import "./Mermaid.scss";
55

6-
mermaid.initialize({ startOnLoad: false });
6+
mermaid.initialize({
7+
startOnLoad: false,
8+
theme: "base",
9+
themeVariables: {
10+
fontFamily:
11+
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
12+
primaryColor: "#e6f0ff",
13+
primaryBorderColor: "#1677ff",
14+
primaryTextColor: "#1f2328",
15+
lineColor: "#8c8c8c",
16+
textColor: "#1f2328",
17+
actorBkg: "#e6f0ff",
18+
actorBorder: "#1677ff",
19+
actorTextColor: "#1f2328",
20+
actorLineColor: "#bfbfbf",
21+
signalColor: "#434343",
22+
signalTextColor: "#434343",
23+
activationBkgColor: "#f0f5ff",
24+
activationBorderColor: "#adc6ff",
25+
sequenceNumberColor: "#ffffff",
26+
noteBkgColor: "#fffbe6",
27+
noteBorderColor: "#ffe58f",
28+
noteTextColor: "#614700",
29+
labelBoxBkgColor: "#e6f0ff",
30+
labelBoxBorderColor: "#1677ff",
31+
labelTextColor: "#1f2328",
32+
},
33+
});
734

835
export const Mermaid = ({
936
name,

‎client/components/Navbar.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
33
line-height: 46px;
44
height: 46px;
5-
// antd v6's horizontal Menu uses rc-overflow: without a growable width it measures a tiny
6-
// width and collapses every item into the "..." overflow menu. Let it fill the header row.
5+
// Let the horizontal Menu fill the header row; without a growable width it measures tiny and
6+
// collapses every item into the "..." overflow menu.
77
.menu {
88
flex: 1 1 auto;
99
min-width: 0;

‎client/components/PageHeader.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ interface PageHeaderProps {
88
children?: React.ReactNode;
99
}
1010

11-
// Lightweight replacement for antd's removed PageHeader, preserving the visible
12-
// title + right-aligned actions + content layout the pages relied on.
11+
// Page header: a title, right-aligned actions, and content below.
1312
export const PageHeader = ({
1413
title,
1514
extra,

‎client/components/Sidebar.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,34 @@
5454
}
5555
.menu-button {
5656
padding: 0 24px;
57+
cursor: default;
58+
// These rows hold an action button, not a navigable entry; suppress the menu-item
59+
// hover/active background so it doesn't look like a stray shadow around the button.
60+
&,
61+
&:hover,
62+
&.ant-menu-item-active,
63+
&.ant-menu-item-selected {
64+
background-color: transparent;
65+
}
5766
.ant-btn > .anticon + span {
5867
margin-left: 0;
5968
}
6069
}
70+
// Keep these buttons flat (drop the default button shadow).
71+
.session-button,
72+
.reset-button {
73+
box-shadow: none;
74+
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
75+
}
76+
// Confine the hover feedback to the button itself (the menu-row highlight is suppressed above).
77+
.session-button:hover {
78+
background-color: rgba(31, 111, 235, 0.09);
79+
}
6180
.reset-button {
6281
width: 100%;
6382
}
83+
.reset-button:hover {
84+
background-color: rgba(255, 77, 79, 0.1);
85+
}
6486
}
6587
}

‎client/components/Visualize.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,16 @@
1313

1414
.collapse {
1515
margin-bottom: 1em;
16-
font-size: 12px;
1716
&,
1817
.collapse-panel {
1918
border: none;
2019
background-color: transparent;
21-
.ant-row.ant-form-item {
22-
margin-right: 0.5em;
20+
}
21+
// Inline control bar: keep the fields on one row, vertically centered, evenly spaced.
22+
.customize-form {
23+
align-items: center;
24+
row-gap: 0.5em;
25+
.ant-form-item {
2326
margin-bottom: 0;
2427
}
2528
}

‎client/components/Visualize.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -160,18 +160,26 @@ const Visualize = (): React.JSX.Element => {
160160
label: "Customize diagram generation",
161161
className: "collapse-panel",
162162
children: (
163-
<Form layout="horizontal" initialValues={{ src, dest }}>
164-
<Row>
165-
<Form.Item label="Source Header" name="src">
166-
<Input value={src} onChange={handleChangeSrc} />
167-
</Form.Item>
168-
<Form.Item label="Destination Header" name="dest">
169-
<Input value={dest} onChange={handleChangeDest} />
170-
</Form.Item>
171-
<Button type="primary" onClick={handleGenerate}>
163+
<Form
164+
layout="inline"
165+
initialValues={{ src, dest }}
166+
className="customize-form"
167+
>
168+
<Form.Item label="Source Header" name="src">
169+
<Input size="small" value={src} onChange={handleChangeSrc} />
170+
</Form.Item>
171+
<Form.Item label="Destination Header" name="dest">
172+
<Input
173+
size="small"
174+
value={dest}
175+
onChange={handleChangeDest}
176+
/>
177+
</Form.Item>
178+
<Form.Item>
179+
<Button size="small" type="primary" onClick={handleGenerate}>
172180
Regenerate
173181
</Button>
174-
</Row>
182+
</Form.Item>
175183
</Form>
176184
),
177185
},

0 commit comments

Comments
 (0)