From 83ab642beb44b7180da354d62136c6eb87b93a63 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Mon, 25 May 2026 14:21:26 +0200
Subject: [PATCH] refactor(frontend): hoist .danger-icon to utils.css and use
 it everywhere
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

InboundFormModal (margin-left 6px) and OutboundFormModal (margin-left
8px) each carried their own .danger-icon, and FinalMaskForm wrote the
same color/cursor/marginLeft trio inline five times. Unify on a single
.danger-icon in utils.css with margin-left: 8px — matching the more
generous OutboundFormModal value — and:
- Drop the per-file .danger-icon copies from InboundFormModal.css and
  OutboundFormModal.css.
- Replace the five inline style props in FinalMaskForm.tsx with
  className="danger-icon".

The visible change is a 2px wider gap to the right of the delete icons
on InboundFormModal's protocol/peer dividers.
---
 frontend/src/components/FinalMaskForm.tsx        | 10 +++++-----
 frontend/src/pages/inbounds/InboundFormModal.css |  6 ------
 frontend/src/pages/xray/OutboundFormModal.css    |  6 ------
 frontend/src/styles/utils.css                    |  6 ++++++
 4 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/FinalMaskForm.tsx b/frontend/src/components/FinalMaskForm.tsx
index c6afa002..b66709da 100644
--- a/frontend/src/components/FinalMaskForm.tsx
+++ b/frontend/src/components/FinalMaskForm.tsx
@@ -138,7 +138,7 @@ export default function FinalMaskForm({ stream, protocol, onChange }: FinalMaskF
               <Divider style={{ margin: 0 }}>
                 TCP Mask {mIdx + 1}
                 <DeleteOutlined
-                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   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: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   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: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   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: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   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: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+              className="danger-icon"
               onClick={() => {
                 (settings.noise as ItemRow[]).splice(ni, 1);
                 onChange();
diff --git a/frontend/src/pages/inbounds/InboundFormModal.css b/frontend/src/pages/inbounds/InboundFormModal.css
index 444ab670..ab149e81 100644
--- a/frontend/src/pages/inbounds/InboundFormModal.css
+++ b/frontend/src/pages/inbounds/InboundFormModal.css
@@ -1,9 +1,3 @@
-.danger-icon {
-  margin-left: 6px;
-  cursor: pointer;
-  color: var(--ant-color-error);
-}
-
 .vless-auth-state {
   display: block;
   margin-top: 6px;
diff --git a/frontend/src/pages/xray/OutboundFormModal.css b/frontend/src/pages/xray/OutboundFormModal.css
index 60f2cb5a..6cd6c5b6 100644
--- a/frontend/src/pages/xray/OutboundFormModal.css
+++ b/frontend/src/pages/xray/OutboundFormModal.css
@@ -1,9 +1,3 @@
-.danger-icon {
-  cursor: pointer;
-  color: var(--ant-color-error);
-  margin-left: 8px;
-}
-
 .item-heading {
   display: flex;
   align-items: center;
diff --git a/frontend/src/styles/utils.css b/frontend/src/styles/utils.css
index fca7aa5a..cff6fe63 100644
--- a/frontend/src/styles/utils.css
+++ b/frontend/src/styles/utils.css
@@ -21,3 +21,9 @@
   cursor: pointer;
   color: var(--ant-color-primary);
 }
+
+.danger-icon {
+  margin-left: 8px;
+  cursor: pointer;
+  color: var(--ant-color-error);
+}