Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-05 12:44:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

refactor(frontend): inline style hex literals and Alert icon redundancy

Browse source 
- FinalMaskForm: five DeleteOutlined icons used rgb(255,77,79) inline;
  swap for var(--ant-color-error) so they follow theme customization.
- NodesPage: CheckCircleOutlined / CloseCircleOutlined statistic prefixes
  switch to var(--ant-color-success) / -error.
- NodeList: ExclamationCircleOutlined warning icons (two callsites) now
  use var(--ant-color-warning).
- BasicsTab: four <Alert type="warning"> blocks shipped a custom
  ExclamationCircleFilled icon styled to match the warning palette —
  exactly the icon and color AntD Alert renders for type="warning" by
  default. Replace the icon prop with showIcon and drop the now-unused
  ExclamationCircleFilled import.
- JsonEditor: focus-within box-shadow tint now uses color-mix on
  --ant-color-primary instead of an rgba(22,119,255,0.1) literal.
This commit is contained in:
MHSanaei 2026-05-25 13:30:51 +02:00
parent a654c7c199
commit a5c04d0f62
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
5 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/components/FinalMaskForm.tsx
View file

@ -138,7 +138,7 @@ export default function FinalMaskForm({ stream, protocol, onChange }: FinalMaskF
<Divider style={{ margin: 0 }}>
TCP Mask {mIdx + 1}
<DeleteOutlined
style={{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: 8 }}
style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
onClick={() => {
stream.delTcpMask(mIdx);
notify();
@ -238,7 +238,7 @@ export default function FinalMaskForm({ stream, protocol, onChange }: FinalMaskF
<Divider style={{ margin: 0 }}>
UDP Mask {mIdx + 1}
<DeleteOutlined
style={{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: 8 }}
style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
onClick={() => {
stream.delUdpMask(mIdx);
notify();
@ -403,7 +403,7 @@ function HeaderCustomGroups({
<Divider style={{ margin: 0 }}>
{groupKey === 'clients' ? 'Clients' : 'Servers'} Group {gi + 1}
<DeleteOutlined
style={{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: 8 }}
style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
onClick={() => {
(settings[groupKey] as ItemRow[][]).splice(gi, 1);
onChange();
@ -445,7 +445,7 @@ function UdpHeaderCustom({ mask, onChange }: { mask: MaskRow; onChange: () => vo
<Divider style={{ margin: 0 }}>
{groupKey === 'client' ? 'Client' : 'Server'} {ci + 1}
<DeleteOutlined
style={{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: 8 }}
style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
onClick={() => {
(settings[groupKey] as ItemRow[]).splice(ci, 1);
onChange();
@ -493,7 +493,7 @@ function NoiseItems({ mask, onChange }: { mask: MaskRow; onChange: () => void })
<Divider style={{ margin: 0 }}>
Noise {ni + 1}
<DeleteOutlined
style={{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: 8 }}
style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
onClick={() => {
(settings.noise as ItemRow[]).splice(ni, 1);
onChange();

2
frontend/src/components/JsonEditor.css
View file

@ -12,5 +12,5 @@
.json-editor-host:focus-within {
border-color: var(--ant-color-primary);
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ant-color-primary) 10%, transparent);
}

4
frontend/src/pages/nodes/NodeList.tsx
View file

@ -196,7 +196,7 @@ export default function NodeList({
<span>{t(`pages.nodes.statusValues.${record.status || 'unknown'}`)}</span>
{record.lastError && (
<Tooltip title={record.lastError}>
<ExclamationCircleOutlined style={{ color: '#faad14' }} />
<ExclamationCircleOutlined style={{ color: 'var(--ant-color-warning)' }} />
</Tooltip>
)}
</Space>
@ -378,7 +378,7 @@ export default function NodeList({
<span>{t(`pages.nodes.statusValues.${statsNode.status || 'unknown'}`)}</span>
{statsNode.lastError && (
<Tooltip title={statsNode.lastError}>
<ExclamationCircleOutlined style={{ color: '#faad14' }} />
<ExclamationCircleOutlined style={{ color: 'var(--ant-color-warning)' }} />
</Tooltip>
)}
</div>

4
frontend/src/pages/nodes/NodesPage.tsx
View file

@ -118,14 +118,14 @@ export default function NodesPage() {
<Statistic
title={t('pages.nodes.onlineNodes')}
value={String(totals.online)}
prefix={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
prefix={<CheckCircleOutlined style={{ color: 'var(--ant-color-success)' }} />}
/>
</Col>
<Col xs={12} sm={12} md={6}>
<Statistic
title={t('pages.nodes.offlineNodes')}
value={String(totals.offline)}
prefix={<CloseCircleOutlined style={{ color: '#ff4d4f' }} />}
prefix={<CloseCircleOutlined style={{ color: 'var(--ant-color-error)' }} />}
/>
</Col>
<Col xs={12} sm={12} md={6}>

10
frontend/src/pages/xray/BasicsTab.tsx
View file

@ -1,7 +1,7 @@
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Alert, Button, Collapse, Input, Modal, Select, Space, Switch } from 'antd';
import { ExclamationCircleFilled, CloudOutlined, ApiOutlined } from '@ant-design/icons';
import { CloudOutlined, ApiOutlined } from '@ant-design/icons';
import { OutboundDomainStrategies } from '@/models/outbound';
import SettingListItem from '@/components/SettingListItem';
@ -205,9 +205,9 @@ export default function BasicsTab({
<>
<Alert
type="warning"
showIcon
className="mb-12 hint-alert"
title={t('pages.xray.generalConfigsDesc')}
icon={<ExclamationCircleFilled style={{ color: '#FFA031' }} />}
/>
<SettingListItem
title={t('pages.xray.FreedomStrategy')}
@ -299,9 +299,9 @@ export default function BasicsTab({
<>
<Alert
type="warning"
showIcon
className="mb-12 hint-alert"
title={t('pages.xray.logConfigsDesc')}
icon={<ExclamationCircleFilled style={{ color: '#FFA031' }} />}
/>
<SettingListItem
title={t('pages.xray.logLevel')}
@ -376,9 +376,9 @@ export default function BasicsTab({
<>
<Alert
type="warning"
showIcon
className="mb-12 hint-alert"
title={t('pages.xray.blockConnectionsConfigsDesc')}
icon={<ExclamationCircleFilled style={{ color: '#FFA031' }} />}
/>
<SettingListItem
@ -427,9 +427,9 @@ export default function BasicsTab({
<Alert
type="warning"
showIcon
className="mb-12 hint-alert"
title={t('pages.xray.directConnectionsConfigsDesc')}
icon={<ExclamationCircleFilled style={{ color: '#FFA031' }} />}
/>
<SettingListItem