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

.preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.preset-name {
  font-weight: 500;
}
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;`
			`}`

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