improve UI confirmation for the deployment

Author: iamfaran

client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx

@@ -6,7 +6,7 @@ import { Environment } from '../types/environment.types';
 import { DeployableItemConfig } from '../types/deployable-item.types';
 import { useEnvironmentContext } from '../context/EnvironmentContext';
 import { getEnvironmentTagColor, formatEnvironmentType } from '../utils/environmentUtils';
-import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, WarningOutlined } from '@ant-design/icons';
 
 interface DeployItemModalProps {
   visible: boolean;
@@ -54,21 +54,53 @@ function DeployItemModal({
     // First confirmation
     if (credentialConfirmationStep === 0) {
       Modal.confirm({
-        title: 'Overwrite Credentials Warning',
-        icon: <ExclamationCircleOutlined />,
+        title: (
+          <div style={{ display: 'flex', alignItems: 'center', color: '#ff7a00' }}>
+            <WarningOutlined style={{ marginRight: 8, fontSize: '18px' }} />
+            <span style={{ fontSize: '16px', fontWeight: '600' }}>Overwrite Credentials Warning</span>
+          </div>
+        ),
+        icon: null,
         content: (
-          <div>
+          <div style={{ padding: '16px 0' }}>
             <Alert
               message="This action will overwrite existing credentials in the target environment."
-              description="This is a serious operation that may affect other applications and users. Are you sure you want to proceed?"
+              description={
+                <div style={{ marginTop: '8px' }}>
+                  <p style={{ margin: 0, fontWeight: '500' }}>
+                    This is a serious operation that may affect other applications and users.
+                  </p>
+                  <p style={{ margin: '8px 0 0 0', color: '#8c8c8c' }}>
+                    Are you sure you want to proceed?
+                  </p>
+                </div>
+              }
               type="warning"
               showIcon
-              style={{ marginBottom: 16 }}
+              style={{ 
+                marginBottom: 0,
+                border: '1px solid #fff2e8',
+                borderRadius: '8px'
+              }}
             />
           </div>
         ),
         okText: 'Continue',
         cancelText: 'Cancel',
+        okButtonProps: {
+          style: {
+            backgroundColor: '#ff7a00',
+            borderColor: '#ff7a00',
+            fontWeight: '500'
+          }
+        },
+        cancelButtonProps: {
+          style: {
+            fontWeight: '500'
+          }
+        },
+        width: 520,
+        centered: false,
         onOk: () => {
           setCredentialConfirmationStep(1);
           // Show second confirmation immediately
@@ -84,23 +116,68 @@ function DeployItemModal({
 
   const showSecondConfirmation = (fieldName: string) => {
     Modal.confirm({
-      title: 'Final Confirmation Required',
-      icon: <ExclamationCircleOutlined />,
+      title: (
+        <div style={{ display: 'flex', alignItems: 'center', color: '#ff4d4f' }}>
+          <ExclamationCircleOutlined style={{ marginRight: 8, fontSize: '18px' }} />
+          <span style={{ fontSize: '16px', fontWeight: '600' }}>Final Confirmation Required</span>
+        </div>
+      ),
+      icon: null,
       content: (
-        <div>
+        <div style={{ padding: '16px 0' }}>
           <Alert
             message="Final Warning: Credential Overwrite"
-            description="You are about to overwrite credentials in the target environment. This action cannot be undone and may break existing integrations. Please confirm one more time."
+            description={
+              <div style={{ marginTop: '8px' }}>
+                <p style={{ margin: 0, fontWeight: '500' }}>
+                  You are about to overwrite credentials in the target environment. 
+                  This action cannot be undone and may break existing integrations.
+                </p>
+                <p style={{ margin: '8px 0 0 0', color: '#8c8c8c' }}>
+                  Please confirm one more time.
+                </p>
+              </div>
+            }
             type="error"
             showIcon
-            style={{ marginBottom: 16 }}
+            style={{ 
+              marginBottom: 16,
+              border: '1px solid #ffebee',
+              borderRadius: '8px'
+            }}
           />
-          <p><strong>Are you absolutely certain you want to overwrite the credentials?</strong></p>
+          <div style={{ 
+            padding: '12px 16px', 
+            backgroundColor: '#fff2f0', 
+            borderRadius: '8px',
+            border: '1px solid #ffccc7'
+          }}>
+            <p style={{ 
+              margin: 0, 
+              fontWeight: '600', 
+              color: '#cf1322',
+              fontSize: '14px'
+            }}>
+              Are you absolutely certain you want to overwrite the credentials?
+            </p>
+          </div>
         </div>
       ),
       okText: 'Yes, Overwrite Credentials',
       okType: 'danger',
       cancelText: 'Cancel',
+      okButtonProps: {
+        style: {
+          fontWeight: '500'
+        }
+      },
+      cancelButtonProps: {
+        style: {
+          fontWeight: '500'
+        }
+      },
+      width: 520,
+      centered: false,
       onOk: () => {
         setCredentialConfirmationStep(2);
         form.setFieldsValue({ [fieldName]: true });
@@ -224,7 +301,11 @@ function DeployItemModal({
                     >
                       {field.label}
                       {isCredentialField && credentialConfirmationStep === 2 && (
-                        <Tag color="orange" style={{ marginLeft: 8 }}>
+                        <Tag 
+                          color="red" 
+                          style={{ marginLeft: 8 }}
+                          icon={<ExclamationCircleOutlined />}
+                        >
                           Confirmed
                         </Tag>
                       )}