Update spacing and alignment in stream row to match design

Author: edmundito

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss

@@ -29,10 +29,6 @@
     color: colors.$grey;
     line-height: 12px;
   }
-
-  .padLeft {
-    padding-left: variables.$spacing-md;
-  }
 }
 
 .sectionHeader,

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx

@@ -37,7 +37,7 @@ export const DiffSection: React.FC<DiffSectionProps> = ({ streams, catalog, diff
             <th>
               <FormattedMessage id="connection.updateSchema.namespace" />
             </th>
-            <th className={styles.padLeft}>
+            <th>
               <FormattedMessage id="connection.updateSchema.streamName" />
             </th>
             <th />

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss

@@ -6,7 +6,7 @@
   flex-direction: row;
   height: 40px;
   align-items: center;
-  padding: variables.$spacing-sm variables.$spacing-xl;
+  padding: variables.$spacing-sm variables.$spacing-lg;
   gap: variables.$spacing-md;
   border-bottom: 1px solid colors.$white;
   width: 100%;
@@ -21,6 +21,19 @@
   }
 }
 
+.content {
+  display: flex;
+  align-items: center;
+}
+
+.iconContainer {
+  width: 10px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-right: variables.$spacing-lg;
+}
+
 .icon {
   margin-top: -1px;
 
@@ -49,7 +62,7 @@
 
 .nameCell,
 %nameCell {
-  width: 140px;
+  width: 150px;
   text-align: left;
 
   & .row {

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx

@@ -35,16 +35,20 @@ export const StreamRow: React.FC<StreamRowProps> = ({ streamTransform, syncMode,
   const namespace = streamTransform.streamDescriptor.namespace;
   return (
     <tr className={rowStyle}>
-      <td>
-        {diffVerb === "new" ? (
-          <FontAwesomeIcon icon={faPlus} size="1x" className={iconStyle} />
-        ) : diffVerb === "removed" ? (
-          <FontAwesomeIcon icon={faMinus} size="1x" className={iconStyle} />
-        ) : (
-          <ModificationIcon />
-        )}
+      <td className={styles.nameCell}>
+        <div className={styles.content}>
+          <div className={styles.iconContainer}>
+            {diffVerb === "new" ? (
+              <FontAwesomeIcon icon={faPlus} size="1x" className={iconStyle} />
+            ) : diffVerb === "removed" ? (
+              <FontAwesomeIcon icon={faMinus} size="1x" className={iconStyle} />
+            ) : (
+              <ModificationIcon />
+            )}
+          </div>
+          {namespace}
+        </div>
       </td>
-      <td className={styles.nameCell}>{namespace}</td>
       <td className={styles.nameCell}>{itemName}</td>
       <td>{diffVerb === "removed" && syncMode && <SyncModeBox syncModeString={syncMode} />} </td>
     </tr>