From 9995154832d20e2a34f2ba74c0e95c20ad0672b0 Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Wed, 6 Sep 2023 10:35:52 +0800
Subject: [PATCH] refactor(console): reorg connector creation modal (#4438)

refactor(console): reorg connector create modal
---
 .../PlatformSelector/index.module.scss             | 11 +++++++++--
 .../src/components/CreateConnectorForm/index.tsx   | 14 +++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/console/src/components/CreateConnectorForm/PlatformSelector/index.module.scss b/packages/console/src/components/CreateConnectorForm/PlatformSelector/index.module.scss
index e5aa8e225..80329d76f 100644
--- a/packages/console/src/components/CreateConnectorForm/PlatformSelector/index.module.scss
+++ b/packages/console/src/components/CreateConnectorForm/PlatformSelector/index.module.scss
@@ -1,10 +1,17 @@
 @use '@/scss/underscore' as _;
 
 .platforms {
-  margin-top: _.unit(6);
+  padding: _.unit(4) _.unit(6);
+  background: var(--color-bg-layer-2);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: _.unit(3);
+  margin-top: _.unit(4);
 
   .title {
     font: var(--font-label-2);
-    margin-bottom: _.unit(3);
   }
 }
diff --git a/packages/console/src/components/CreateConnectorForm/index.tsx b/packages/console/src/components/CreateConnectorForm/index.tsx
index 1a5963ec8..7e6f96f9f 100644
--- a/packages/console/src/components/CreateConnectorForm/index.tsx
+++ b/packages/console/src/components/CreateConnectorForm/index.tsx
@@ -144,6 +144,13 @@ function CreateConnectorForm({ onClose, isOpen: isFormOpen, type }: Props) {
           size={radioGroupSize}
           onChange={handleGroupChange}
         />
+        {activeGroup && (
+          <PlatformSelector
+            connectorGroup={activeGroup}
+            connectorId={activeFactoryId}
+            onConnectorIdChange={setActiveFactoryId}
+          />
+        )}
         {standardGroups.length > 0 && (
           <>
             <div className={styles.standardLabel}>
@@ -159,13 +166,6 @@ function CreateConnectorForm({ onClose, isOpen: isFormOpen, type }: Props) {
             />
           </>
         )}
-        {activeGroup && (
-          <PlatformSelector
-            connectorGroup={activeGroup}
-            connectorId={activeFactoryId}
-            onConnectorIdChange={setActiveFactoryId}
-          />
-        )}
       </ModalLayout>
     </Modal>
   );