update the connector details header styling (#244)

Author: aniketkatkar97

components/ConnectorDetailsHeader/ConnectorDetailsHeader.module.css

@@ -2,7 +2,7 @@
     margin: 32px 0px;
     display:flex;
     flex-direction: column;
-    gap: 12px
+    gap: 6px
 }
 
 .Heading{
@@ -39,7 +39,18 @@
     border-radius: 28px;
 }
 
+.FeaturesHeading{
+    font-size: 14px;
+    color: var(--gray-text-color);
+}
+
 .SubHeading{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.FeaturesList{
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
@@ -50,6 +61,9 @@
     font-size: 12px;
     border-radius: 14px;
     width: fit-content;
+    display: flex;
+    align-items: center;
+    gap: 4px
 }
 
 .AvailableFeature{

components/ConnectorDetailsHeader/ConnectorDetailsHeader.tsx

@@ -1,4 +1,6 @@
 import classNames from "classnames";
+import { ReactComponent as CheckIcon } from "../../images/icons/check.svg";
+import { ReactComponent as CrossIcon } from "../../images/icons/cross.svg";
 import {
   getConnectorImage,
   getConnectorPlatformIcon,
@@ -30,22 +32,30 @@ function ConnectorDetailsHeader({
         </div>
       </div>
       <div className={styles.SubHeading}>
-        {availableFeatures.map((feature) => (
-          <div
-            className={classNames(styles.FeatureTag, styles.AvailableFeature)}
-            key={feature}
-          >
-            {feature}
-          </div>
-        ))}
-        {unavailableFeatures.map((feature) => (
-          <div
-            className={classNames(styles.FeatureTag, styles.UnavailableFeature)}
-            key={feature}
-          >
-            {feature}
-          </div>
-        ))}
+        <div className={styles.FeaturesHeading}>Feature List</div>
+        <div className={styles.FeaturesList}>
+          {availableFeatures.map((feature) => (
+            <div
+              className={classNames(styles.FeatureTag, styles.AvailableFeature)}
+              key={feature}
+            >
+              {feature}
+              <CheckIcon height={12} />
+            </div>
+          ))}
+          {unavailableFeatures.map((feature) => (
+            <div
+              className={classNames(
+                styles.FeatureTag,
+                styles.UnavailableFeature
+              )}
+              key={feature}
+            >
+              {feature}
+              <CrossIcon height={14} />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

components/ConnectorsInfo/ConnectorsInfo.constants.ts

@@ -24,6 +24,12 @@ export const CONNECTORS: Array<ConnectorCategory> = [
         icon: "./images/connectors/bigquery.png",
         name: "BigQuery",
       },
+      {
+        url: "/connectors/database/bigtable",
+        icon: "./images/connectors/big-table.png",
+        name: "BigTable",
+        supportedVersion: "v1.3.x",
+      },
       {
         url: "/connectors/database/clickhouse",
         icon: "./images/connectors/clickhouse.png",

components/common/Icon/Icon.tsx

@@ -1,22 +1,23 @@
-import React from "react";
 import { ReactComponent as CheckIcon } from "../../../images/icons/check.svg";
 import { ReactComponent as CrossIcon } from "../../../images/icons/cross.svg";
 
 function Icon({ iconName }: { iconName: string }) {
   let IconComponent: SvgComponent;
+  let iconColor = "currentColor";
 
   switch (iconName) {
     case "check":
       IconComponent = CheckIcon;
       break;
     case "cross":
       IconComponent = CrossIcon;
+      iconColor = "#CB2431";
       break;
     default:
       return <></>;
   }
 
-  return <IconComponent />;
+  return <IconComponent height={16} color={iconColor} />;
 }
 
 export default Icon;

images/icons/check.svg

@@ -73,26 +73,31 @@ export const getConnectorImage = (connector: string) => {
       break;
 
     case "S3":
-    case "Data lake":
+    case "Datalake":
       iconSource = "amazon-s3";
       break;
 
-    case "Azure SQL":
+    case "AzureSQL":
       iconSource = "azuresql";
       break;
 
     case "BigQuery":
       iconSource = "bigquery";
       break;
 
-    case "ClickHouse":
+    case "BigTable":
+      iconSource = "big-table";
+      break;
+
+    case "Clickhouse":
       iconSource = "clickhouse";
       break;
 
     case "Couchbase":
       iconSource = "couchbase";
       break;
 
+    case "Databricks":
     case "Databricks SQL":
     case "Unity Catalog":
     case "Databricks Pipeline":
@@ -107,6 +112,7 @@ export const getConnectorImage = (connector: string) => {
       iconSource = "delta-lake";
       break;
 
+    case "Domo":
     case "Domo Database":
     case "Domo Dashboard":
     case "Domo Pipeline":