3x-ui/frontend/src/pages/xray/DnsPresetsModal.css

.preset-list {
  border: 1px solid rgba(5, 5, 5, 0.06);
  border-radius: 8px;
  overflow: hidden;
}

body.dark .preset-list,
html[data-theme='ultra-dark'] .preset-list {
  border-color: rgba(255, 255, 255, 0.12);
}

.preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
}

.preset-row:last-child {
  border-bottom: 0;
}

body.dark .preset-row,
html[data-theme='ultra-dark'] .preset-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.preset-name {
  font-weight: 500;
}
chore(frontend): antd v6 polish, theme + modal fixes - adopt message.useMessage hook + messageBus bridge so HttpUtil messages inherit ConfigProvider theme tokens - replace deprecated antd APIs (List, Input addonBefore/After, Empty imageStyle); introduce InputAddon helper + SettingListItem custom rows - fix dark/ultra selectors in portaled modals (body.dark, html[data-theme='ultra-dark']) instead of nonexistent .is-dark/.is-ultra - add horizontal scroll to clients table; reorder node columns so actions+enable sit at the left - swap raw button for antd Button in NodeFormModal test connection - fix FinalMaskForm nested-form by hoisting it outside OutboundFormModal's parent Form - fix advanced "all" JSON tab in InboundFormModal — useMemo on a mutated ref was stale; compute on every render - fix chart-on-open for SystemHistory + XrayMetrics modals by adding open to effect deps (useRef.current doesn't trigger re-runs) - switch i18next interpolation to single-brace {var} to match locale files - drop residual Vue mentions in CI workflows and Go comments 2026-05-22 00:55:25 +00:00			`.preset-list {`
			`border: 1px solid rgba(5, 5, 5, 0.06);`
			`border-radius: 8px;`
			`overflow: hidden;`
			`}`

			`body.dark .preset-list,`
			`html[data-theme='ultra-dark'] .preset-list {`
			`border-color: rgba(255, 255, 255, 0.12);`
			`}`

refactor(frontend): port xray to react+ts Step 8 of the Vue→React migration. Ports the xray config entry: page shell, basics/routing/outbounds/balancers/dns tabs, the rule + balancer + dns server + dns presets + warp + nord modals, the protocol-aware outbound form, and the shared FinalMaskForm (TCP/UDP masks + QUIC params). Adds useXraySetting that mirrors the legacy two-way sync between the JSON template string and the parsed templateSettings tree. The outbound model itself stays in JS so the class-driven form keeps its existing mutation API; instance access is typed loosely inside the form to match. The shared FinalMaskForm.vue and JsonEditor.vue stay alongside the new .tsx versions until step 9 — InboundFormModal.vue still imports them. Adds react-hooks/immutability and react-hooks/refs to the already-disabled react-compiler rule set; both flag the outbound form's instance-mutation pattern that doesn't run through useState. 2026-05-21 20:56:36 +00:00			`.preset-row {`
			`display: flex;`
			`align-items: center;`
			`justify-content: space-between;`
			`gap: 8px;`
chore(frontend): antd v6 polish, theme + modal fixes - adopt message.useMessage hook + messageBus bridge so HttpUtil messages inherit ConfigProvider theme tokens - replace deprecated antd APIs (List, Input addonBefore/After, Empty imageStyle); introduce InputAddon helper + SettingListItem custom rows - fix dark/ultra selectors in portaled modals (body.dark, html[data-theme='ultra-dark']) instead of nonexistent .is-dark/.is-ultra - add horizontal scroll to clients table; reorder node columns so actions+enable sit at the left - swap raw button for antd Button in NodeFormModal test connection - fix FinalMaskForm nested-form by hoisting it outside OutboundFormModal's parent Form - fix advanced "all" JSON tab in InboundFormModal — useMemo on a mutated ref was stale; compute on every render - fix chart-on-open for SystemHistory + XrayMetrics modals by adding open to effect deps (useRef.current doesn't trigger re-runs) - switch i18next interpolation to single-brace {var} to match locale files - drop residual Vue mentions in CI workflows and Go comments 2026-05-22 00:55:25 +00:00			`padding: 12px 24px;`
			`border-bottom: 1px solid rgba(5, 5, 5, 0.06);`
			`}`

			`.preset-row:last-child {`
			`border-bottom: 0;`
			`}`

			`body.dark .preset-row,`
			`html[data-theme='ultra-dark'] .preset-row {`
			`border-bottom-color: rgba(255, 255, 255, 0.08);`
refactor(frontend): port xray to react+ts Step 8 of the Vue→React migration. Ports the xray config entry: page shell, basics/routing/outbounds/balancers/dns tabs, the rule + balancer + dns server + dns presets + warp + nord modals, the protocol-aware outbound form, and the shared FinalMaskForm (TCP/UDP masks + QUIC params). Adds useXraySetting that mirrors the legacy two-way sync between the JSON template string and the parsed templateSettings tree. The outbound model itself stays in JS so the class-driven form keeps its existing mutation API; instance access is typed loosely inside the form to match. The shared FinalMaskForm.vue and JsonEditor.vue stay alongside the new .tsx versions until step 9 — InboundFormModal.vue still imports them. Adds react-hooks/immutability and react-hooks/refs to the already-disabled react-compiler rule set; both flag the outbound form's instance-mutation pattern that doesn't run through useState. 2026-05-21 20:56:36 +00:00			`}`

			`.preset-name {`
			`font-weight: 500;`
			`}`