style(console): new style for add connectors (#2020)

packages/console/src/components/ModalLayout/index.module.scss

@@ -41,4 +41,8 @@
   &.large {
     max-width: dim.$modal-layout-width-large;
   }
+
+  &.xlarge {
+    max-width: dim.$modal-layout-width-xlarge;
+  }
 }

packages/console/src/components/ModalLayout/index.tsx

@@ -16,7 +16,7 @@ type Props = {
   footer?: ReactNode;
   onClose?: () => void;
   className?: string;
-  size?: 'medium' | 'large';
+  size?: 'medium' | 'large' | 'xlarge';
 };
 
 const ModalLayout = ({

packages/console/src/components/RadioGroup/Radio.tsx

@@ -29,6 +29,7 @@ export type Props = {
   type?: 'card' | 'plain';
   isDisabled?: boolean;
   disabledLabel?: AdminConsoleKey;
+  size?: 'normal' | 'small';
 };
 
 const Radio = ({
@@ -43,6 +44,7 @@ const Radio = ({
   type,
   isDisabled,
   disabledLabel,
+  size = 'normal',
 }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -64,9 +66,10 @@ const Radio = ({
     <div
       className={classNames(
         styles.radio,
-        className,
         isChecked && styles.checked,
-        isDisabled && styles.disabled
+        isDisabled && styles.disabled,
+        styles[size],
+        className
       )}
       tabIndex={tabIndex}
       onClick={isDisabled ? undefined : onClick}

packages/console/src/components/RadioGroup/index.module.scss

@@ -52,6 +52,15 @@
       top: _.unit(5);
     }
 
+    &.small {
+      padding: _.unit(3);
+
+      svg {
+        right: _.unit(3);
+        top: _.unit(3);
+      }
+    }
+
     .disabledLabel {
       position: absolute;
       right: _.unit(5);

packages/console/src/pages/Connectors/components/CreateForm/index.module.scss

@@ -1,43 +1,54 @@
 @use '@/scss/underscore' as _;
 
 .body {
-  padding-top: _.unit(5);
+  .connectorGroup {
+    gap: _.unit(4);
 
-  .connector {
-    font: var(--font-body-medium);
-    width: 230px;
+    .connectorRadio {
+      // Override radio style
+      min-width: 276px;
+      max-width: 276px;
+      width: 276px;
+      height: 96px;
+    }
 
-    .logo {
-      width: 48px;
-      height: 48px;
-      border-radius: 8px;
-      background-color: var(--color-hover);
+    .connector {
+      font: var(--font-body-medium);
       display: flex;
-      align-items: center;
-      justify-content: center;
 
-      img {
-        width: 34px;
-        height: 34px;
+      .logo {
+        width: 48px;
+        height: 48px;
+        display: flex;
+        align-items: center;
+
+        img {
+          width: 36px;
+          height: 36px;
+        }
       }
-    }
 
-    .name {
-      margin-top: _.unit(2);
-      font: var(--font-subhead-2);
-    }
+      .content {
+        flex: 1;
 
-    .connectorId {
-      margin-top: _.unit(2);
-      font: var(--font-body-medium);
-      color: var(--color-neutral-50);
-    }
+        .name {
+          font: var(--font-subhead-2);
+        }
 
-    .description {
-      font: var(--font-body-medium);
-      margin-top: _.unit(2);
-      height: 60px;
-      overflow: hidden;
+        .connectorId {
+          margin-top: _.unit(1);
+          font: var(--font-body-small);
+          color: var(--color-caption);
+        }
+
+        .description {
+          font: var(--font-body-small);
+          color: var(--color-caption);
+          margin-top: _.unit(1);
+          height: 60px;
+          overflow: hidden;
+        }
+      }
     }
   }
 }

packages/console/src/pages/Connectors/components/CreateForm/index.tsx

@@ -95,30 +95,43 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
           />
         }
         className={styles.body}
-        size="large"
+        size="xlarge"
         onClose={onClose}
       >
         {isLoading && 'Loading...'}
         {error?.message}
         {groups && (
-          <RadioGroup name="group" value={activeGroupId} type="card" onChange={handleGroupChange}>
+          <RadioGroup
+            name="group"
+            value={activeGroupId}
+            type="card"
+            className={styles.connectorGroup}
+            onChange={handleGroupChange}
+          >
             {groups.map(({ id, name, logo, description, connectors }) => (
               <Radio
                 key={id}
                 value={id}
+                className={styles.connectorRadio}
                 isDisabled={connectors.every(({ enabled }) => enabled)}
-                className={styles.connector}
                 disabledLabel="general.added"
+                size="small"
               >
-                <div className={styles.logo}>
-                  <img src={logo} />
-                </div>
-                <div className={styles.name}>
-                  <UnnamedTrans resource={name} />
-                </div>
-                {type !== ConnectorType.Social && <div className={styles.connectorId}>{id}</div>}
-                <div className={styles.description}>
-                  <UnnamedTrans resource={description} />
+                <div className={styles.connector}>
+                  <div className={styles.logo}>
+                    <img src={logo} />
+                  </div>
+                  <div className={styles.content}>
+                    <div className={styles.name}>
+                      <UnnamedTrans resource={name} />
+                    </div>
+                    {type !== ConnectorType.Social && (
+                      <div className={styles.connectorId}>{id}</div>
+                    )}
+                    <div className={styles.description}>
+                      <UnnamedTrans resource={description} />
+                    </div>
+                  </div>
                 </div>
               </Radio>
             ))}

packages/console/src/scss/_dimensions.scss

@@ -1,3 +1,4 @@
+$modal-layout-width-xlarge: 1224px;
 $modal-layout-width-large: 784px;
 $modal-layout-width-medium: 600px;
 $modal-layout-width-small: 352px;