From a93a8f99efc7275eab8d4dd5d2ae26a5d94a95d0 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim@airbyte.io>
Date: Tue, 4 Oct 2022 23:16:13 +0200
Subject: [PATCH 1/2] New design and cleanup for CircleLoader

---
 .../StatusIcon/CircleLoader.module.scss       | 25 ++++++++
 .../components/StatusIcon/CircleLoader.tsx    | 61 +++++--------------
 .../src/components/StatusIcon/StatusIcon.tsx  |  2 +-
 .../FrequentlyUsedDestinations.test.tsx.snap  | 14 ++---
 .../StartWithDestination.test.tsx.snap        |  4 +-
 5 files changed, 50 insertions(+), 56 deletions(-)
 create mode 100644 airbyte-webapp/src/components/StatusIcon/CircleLoader.module.scss

diff --git a/airbyte-webapp/src/components/StatusIcon/CircleLoader.module.scss b/airbyte-webapp/src/components/StatusIcon/CircleLoader.module.scss
new file mode 100644
index 0000000000000..bb8f014fb00d3
--- /dev/null
+++ b/airbyte-webapp/src/components/StatusIcon/CircleLoader.module.scss
@@ -0,0 +1,25 @@
+@use "../../scss/colors";
+
+@keyframes spinning {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  animation: spinning 1000ms linear infinite normal forwards;
+}
+
+.centerDot {
+  fill: colors.$blue;
+}
+
+:export {
+  // Export colors to be used in SVG gradients
+  gradientStart: colors.$blue;
+  gradientStop: colors.$blue-transparent;
+}
diff --git a/airbyte-webapp/src/components/StatusIcon/CircleLoader.tsx b/airbyte-webapp/src/components/StatusIcon/CircleLoader.tsx
index 49de2a314da7a..f774995084d6a 100644
--- a/airbyte-webapp/src/components/StatusIcon/CircleLoader.tsx
+++ b/airbyte-webapp/src/components/StatusIcon/CircleLoader.tsx
@@ -1,65 +1,34 @@
-import styled, { keyframes } from "styled-components";
+import styles from "./CircleLoader.module.scss";
 
-const spinAnimation = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-
-const SpinnerSVG = styled.svg`
-  animation: ${spinAnimation} 1000ms linear infinite normal forwards;
-`;
-
-interface Props {
+interface CircleLoaderProps {
   title?: string;
 }
 
-const CircleLoader = ({ title }: Props): JSX.Element => (
-  <SpinnerSVG
-    viewBox="0 0 16 16"
-    width="18"
-    height="18"
-    shape-rendering="geometricPrecision"
-    text-rendering="geometricPrecision"
-    role="img"
-    data-icon="circle-loader"
-  >
+export const CircleLoader = ({ title }: CircleLoaderProps): JSX.Element => (
+  <svg className={styles.spinner} role="img" viewBox="0 0 16 16" width="18" height="18" data-icon="circle-loader">
     <defs>
       <linearGradient
-        id="eDwmAshgIQE3-fill"
+        id="circleLoaderGradient"
         x1="4.25"
         y1="0.5"
         x2="4.25"
         y2="15.5"
         spreadMethod="pad"
         gradientUnits="userSpaceOnUse"
-        gradientTransform="translate(0 0)"
       >
-        <stop id="eDwmAshgIQE3-fill-0" offset="17.9167%" stopColor="#d1d1db" />
-        <stop id="eDwmAshgIQE3-fill-1" offset="100%" stopColor="rgba(209,209,219,0)" />
+        <stop offset="0%" stopColor={styles.gradientStart} />
+        <stop offset="100%" stopColor={styles.gradientStop} />
       </linearGradient>
     </defs>
     {title && <title>{title}</title>}
     <g>
-      <g>
-        <path
-          d="M8,0.5C3.85775,0.5,0.5,3.85775,0.5,8s3.35775,7.5,7.5,7.5v-2c-3.03768,0-5.5-2.4623-5.5-5.5s2.46232-5.5,5.5-5.5v-2Z"
-          clipRule="evenodd"
-          fill="url(#eDwmAshgIQE3-fill)"
-          fillRule="evenodd"
-        />
-        <path
-          d="M8,15.5c4.1423,0,7.5-3.3577,7.5-7.5s-3.3577-7.5-7.5-7.5v2c3.0377,0,5.5,2.46232,5.5,5.5s-2.4623,5.5-5.5,5.5v2Z"
-          clipRule="evenodd"
-          fill="#d1d1db"
-          fillRule="evenodd"
-        />
-      </g>
+      <path
+        d="M8,0.5C3.85775,0.5,0.5,3.85775,0.5,8s3.35775,7.5,7.5,7.5v-2c-3.03768,0-5.5-2.4623-5.5-5.5s2.46232-5.5,5.5-5.5v-2Z"
+        clipRule="evenodd"
+        fill="url(#circleLoaderGradient)"
+        fillRule="evenodd"
+      />
+      <circle cx="8" cy="8" r="3" className={styles.centerDot} />
     </g>
-  </SpinnerSVG>
+  </svg>
 );
-
-export default CircleLoader;
diff --git a/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx b/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx
index 2da76601b8bd8..80910eb63c096 100644
--- a/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx
+++ b/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx
@@ -6,7 +6,7 @@ import styled from "styled-components";
 import { MoonIcon } from "components/icons/MoonIcon";
 
 import PauseIcon from "../icons/PauseIcon";
-import CircleLoader from "./CircleLoader";
+import { CircleLoader } from "./CircleLoader";
 
 export type StatusIconStatus = "sleep" | "inactive" | "success" | "warning" | "loading" | "error";
 
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap b/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
index 3270eeb4fa50d..be6a868520516 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-himrzO gCuIyJ"
+                        class="sc-jIZahH bHaxCq"
                         src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2025.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20363.6%20500%22%20enable-background%3D%22new%200%200%20363.6%20500%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%2300832D%22%20d%3D%22M238.6%2C0l125%2C125l-62.5%2C11.4L238.6%2C125l-11.4-62.5L238.6%2C0z%22%2F%3E%0A%09%3Cpath%20fill%3D%22%2300AC47%22%20d%3D%22M238.6%2C125V0H34.1C15.3%2C0%2C0%2C15.3%2C0%2C34.1v431.8C0%2C484.7%2C15.3%2C500%2C34.1%2C500h295.5c18.8%2C0%2C34.1-15.3%2C34.1-34.1%0A%09%09V125H238.6z%22%2F%3E%0A%09%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M68.2%2C193.2V358h227.3V193.2H68.2z%20M167.6%2C329.5h-71v-39.8h71V329.5z%20M167.6%2C261.4h-71v-39.8h71V261.4z%0A%09%09%20M267%2C329.5h-71v-39.8h71V329.5z%20M267%2C261.4h-71v-39.8h71V261.4z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
                       />
                     </div>
@@ -93,7 +93,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                           class="container"
                         >
                           <div
-                            class="sc-jIZahH gqWSUB"
+                            class="sc-ikZpkk dwHHud"
                           >
                             Alpha
                           </div>
@@ -125,7 +125,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-himrzO gCuIyJ"
+                        class="sc-jIZahH bHaxCq"
                         src="data:image/svg+xml;utf8,%3Csvg%20height%3D%222500%22%20width%3D%222500%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1.633235433328256%207.0326093303156565%20131.26574682416876%20114.63439066968435%22%3E%3ClinearGradient%20id%3D%22a%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2264%22%20x2%3D%2264%22%20y1%3D%227.034%22%20y2%3D%22120.789%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234387fd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234683ea%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20d%3D%22M27.79%20115.217L1.54%2069.749a11.499%2011.499%200%200%201%200-11.499l26.25-45.467a11.5%2011.5%200%200%201%209.96-5.75h52.5a11.5%2011.5%200%200%201%209.959%205.75l26.25%2045.467a11.499%2011.499%200%200%201%200%2011.5l-26.25%2045.467a11.5%2011.5%200%200%201-9.959%205.749h-52.5a11.499%2011.499%200%200%201-9.96-5.75z%22%20fill%3D%22url(%23a)%22%2F%3E%3Cpath%20clip-path%3D%22url(%23b)%22%20d%3D%22M119.229%2086.48L80.625%2047.874%2064%2043.425l-14.933%205.55L43.3%2064l4.637%2016.729%2040.938%2040.938%208.687-.386z%22%20opacity%3D%22.07%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M64%2040.804c-12.81%200-23.195%2010.385-23.195%2023.196%200%2012.81%2010.385%2023.195%2023.195%2023.195S87.194%2076.81%2087.194%2064c0-12.811-10.385-23.196-23.194-23.196m0%2040.795c-9.72%200-17.6-7.88-17.6-17.6S54.28%2046.4%2064%2046.4%2081.6%2054.28%2081.6%2064%2073.72%2081.6%2064%2081.6%22%2F%3E%3Cpath%20d%3D%22M52.99%2063.104v7.21a12.794%2012.794%200%200%200%204.38%204.475V63.104zM61.675%2057.026v19.411c.745.137%201.507.22%202.29.22.714%200%201.41-.075%202.093-.189V57.026zM70.766%2066.1v8.562a12.786%2012.786%200%200%200%204.382-4.7v-3.861zM80.691%2078.287l-2.403%202.405a1.088%201.088%200%200%200%200%201.537l9.115%209.112a1.088%201.088%200%200%200%201.537%200l2.403-2.402a1.092%201.092%200%200%200%200-1.536l-9.116-9.116a1.09%201.09%200%200%200-1.536%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                       />
                     </div>
@@ -188,7 +188,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-himrzO gCuIyJ"
+                        class="sc-jIZahH bHaxCq"
                         src="data:image/svg+xml;utf8,%3Csvg%20width%3D%222215%22%20height%3D%222500%22%20viewBox%3D%220%200%20256%20289%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22xMidYMid%22%3E%3Cpath%20d%3D%22M165.258%20288.501h3.508l57.261-28.634.953-1.347V29.964l-.953-1.354L168.766%200h-3.551l.043%20288.501%22%20fill%3D%22%235294CF%22%2F%3E%3Cpath%20d%3D%22M90.741%20288.501h-3.557l-57.212-28.634-1.161-1.997-.589-226.742%201.75-2.518L87.184%200h3.601l-.044%20288.501%22%20fill%3D%22%231F5B98%22%2F%3E%3Cpath%20d%3D%22M87.285%200h81.426v288.501H87.285V0z%22%20fill%3D%22%232D72B8%22%2F%3E%3Cpath%20d%3D%22M256%20137.769l-1.935-.429-27.628-2.576-.41.204-57.312-2.292h-81.43l-57.313%202.292V91.264l-.06.032.06-.128%2057.313-13.28h81.43l57.312%2013.28%2021.069%2011.199v-7.2l8.904-.974-.922-1.798-28.192-20.159-.859.279-57.312-17.759h-81.43L29.972%2072.515V28.61L0%2063.723v30.666l.232-.168%208.672.946v7.348L0%20107.28v30.513l.232-.024%208.672.128v12.807l-7.482.112L0%20150.68v30.525l8.904%204.788v7.433l-8.531.942-.373-.28v30.661l29.972%2035.118v-43.901l57.313%2017.759h81.43l57.481-17.811.764.335%2027.821-19.862%201.219-1.979-8.904-.982v-7.284l-1.167-.466-19.043%2010.265-.69%201.44-57.481%2013.203v.016h-81.43v-.016l-57.313-13.259v-43.864l57.313%202.284v.056h81.43l57.312-2.34%201.305.6%2026.779-2.306%201.889-.923-8.904-.128v-12.807l8.904-.128%22%20fill%3D%22%231A476F%22%2F%3E%3Cpath%20d%3D%22M226.027%20215.966v43.901L256%20224.749v-30.461l-29.8%2021.626-.173.052M226.027%20197.421l.173-.04%2029.8-16.028v-30.649l-29.973%202.757v43.96M226.2%2091.208l-.173-.04v43.8L256%20137.769v-30.634l-29.8-15.927M226.2%2072.687L256%2094.193V63.731L226.027%2028.61v43.905l.173.06v.112%22%20fill%3D%22%232D72B8%22%2F%3E%3C%2Fsvg%3E"
                       />
                     </div>
@@ -230,7 +230,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-himrzO gCuIyJ"
+                        class="sc-jIZahH bHaxCq"
                         src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%20640%20640%22%20width%3D%22640%22%20height%3D%22640%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.85%2036.65%20322.83%2024.62%20317.93%2012.13C317.72%2011.55%20317.48%2010.98%20317.21%2010.43C317.65%2022.19%20312.69%2033.5%20303.74%2041.15C284.96%2055.79%20188.75%20136.46%20180.85%20300.76C173.57%20453.48%20291.52%20545.1%20307.51%20556.78C307.69%20556.91%20309.13%20557.91%20309.31%20558.04C313.89%20547.62%20318.29%20517.71%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.62%20552.65C343.71%20552.59%20344.43%20552.08%20344.52%20552.02C351.58%20547.01%20358.3%20541.55%20364.64%20535.67C404.62%20498.84%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22b3m9u0RT9j%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M321.43%20477.01C318.2%20517.98%20313.53%20547.8%20309.04%20557.86C309.04%20557.86%20314.07%20593.79%20318.02%20632.24C319.27%20632.24%20329.26%20632.24%20330.51%20632.24C333.44%20605.49%20337.82%20578.92%20343.62%20552.65C327.36%20545.1%20322.6%20509.71%20321.88%20476.65%22%20id%3D%22aevBvhJN5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.81%2036.67%20322.79%2024.64%20317.93%2012.13C325.66%2042.41%20324.4%20284.14%20325.21%20313.07C326.92%20367.62%20325.75%20422.22%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.53%20552.74C343.63%20552.67%20344.42%20552.09%20344.52%20552.02C351.58%20547.06%20358.31%20541.62%20364.64%20535.76C364.72%20535.7%20365.29%20535.2%20365.36%20535.13C404.53%20499.2%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22akHagKvoh%22%3E%3C%2Fpath%3E%3C%2Fdefs%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill%3D%22%2312a950%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill%3D%22%23b8c5c2%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill%3D%22%2313994f%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                       />
                     </div>
@@ -272,7 +272,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-himrzO gCuIyJ"
+                        class="sc-jIZahH bHaxCq"
                         src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%0D%0A%20%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%0D%0A%3Csvg%20width%3D%22432.071pt%22%20height%3D%22445.383pt%22%20viewBox%3D%220%200%20432.071%20445.383%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%0A%3Cg%20id%3D%22orginal%22%20style%3D%22fill-rule%3Anonzero%3Bclip-rule%3Anonzero%3Bstroke%3A%23000000%3Bstroke-miterlimit%3A4%3B%22%3E%0D%0A%09%3C%2Fg%3E%0D%0A%3Cg%20id%3D%22Layer_x0020_3%22%20style%3D%22fill-rule%3Anonzero%3Bclip-rule%3Anonzero%3Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A12.4651%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A4%3B%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23000000%3Bstroke%3A%23000000%3Bstroke-width%3A37.3953%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%20d%3D%22M323.205%2C324.227c2.833-23.601%2C1.984-27.062%2C19.563-23.239l4.463%2C0.392c13.517%2C0.615%2C31.199-2.174%2C41.587-7c22.362-10.376%2C35.622-27.7%2C13.572-23.148c-50.297%2C10.376-53.755-6.655-53.755-6.655c53.111-78.803%2C75.313-178.836%2C56.149-203.322%20%20%20%20C352.514-5.534%2C262.036%2C26.049%2C260.522%2C26.869l-0.482%2C0.089c-9.938-2.062-21.06-3.294-33.554-3.496c-22.761-0.374-40.032%2C5.967-53.133%2C15.904c0%2C0-161.408-66.498-153.899%2C83.628c1.597%2C31.936%2C45.777%2C241.655%2C98.47%2C178.31%20%20%20%20c19.259-23.163%2C37.871-42.748%2C37.871-42.748c9.242%2C6.14%2C20.307%2C9.272%2C31.912%2C8.147l0.897-0.765c-0.281%2C2.876-0.157%2C5.689%2C0.359%2C9.019c-13.572%2C15.167-9.584%2C17.83-36.723%2C23.416c-27.457%2C5.659-11.326%2C15.734-0.797%2C18.367c12.768%2C3.193%2C42.305%2C7.716%2C62.268-20.224%20%20%20%20l-0.795%2C3.188c5.325%2C4.26%2C4.965%2C30.619%2C5.72%2C49.452c0.756%2C18.834%2C2.017%2C36.409%2C5.856%2C46.771c3.839%2C10.36%2C8.369%2C37.05%2C44.036%2C29.406c29.809-6.388%2C52.6-15.582%2C54.677-101.107%22%2F%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23336791%3Bstroke%3Anone%3B%22%20d%3D%22M402.395%2C271.23c-50.302%2C10.376-53.76-6.655-53.76-6.655c53.111-78.808%2C75.313-178.843%2C56.153-203.326c-52.27-66.785-142.752-35.2-144.262-34.38l-0.486%2C0.087c-9.938-2.063-21.06-3.292-33.56-3.496c-22.761-0.373-40.026%2C5.967-53.127%2C15.902%20%20%20%20c0%2C0-161.411-66.495-153.904%2C83.63c1.597%2C31.938%2C45.776%2C241.657%2C98.471%2C178.312c19.26-23.163%2C37.869-42.748%2C37.869-42.748c9.243%2C6.14%2C20.308%2C9.272%2C31.908%2C8.147l0.901-0.765c-0.28%2C2.876-0.152%2C5.689%2C0.361%2C9.019c-13.575%2C15.167-9.586%2C17.83-36.723%2C23.416%20%20%20%20c-27.459%2C5.659-11.328%2C15.734-0.796%2C18.367c12.768%2C3.193%2C42.307%2C7.716%2C62.266-20.224l-0.796%2C3.188c5.319%2C4.26%2C9.054%2C27.711%2C8.428%2C48.969c-0.626%2C21.259-1.044%2C35.854%2C3.147%2C47.254c4.191%2C11.4%2C8.368%2C37.05%2C44.042%2C29.406c29.809-6.388%2C45.256-22.942%2C47.405-50.555%20%20%20%20c1.525-19.631%2C4.976-16.729%2C5.194-34.28l2.768-8.309c3.192-26.611%2C0.507-35.196%2C18.872-31.203l4.463%2C0.392c13.517%2C0.615%2C31.208-2.174%2C41.591-7c22.358-10.376%2C35.618-27.7%2C13.573-23.148z%22%2F%3E%0D%0A%3Cpath%20d%3D%22M215.866%2C286.484c-1.385%2C49.516%2C0.348%2C99.377%2C5.193%2C111.495c4.848%2C12.118%2C15.223%2C35.688%2C50.9%2C28.045c29.806-6.39%2C40.651-18.756%2C45.357-46.051c3.466-20.082%2C10.148-75.854%2C11.005-87.281%22%2F%3E%0D%0A%3Cpath%20d%3D%22M173.104%2C38.256c0%2C0-161.521-66.016-154.012%2C84.109c1.597%2C31.938%2C45.779%2C241.664%2C98.473%2C178.316c19.256-23.166%2C36.671-41.335%2C36.671-41.335%22%2F%3E%0D%0A%3Cpath%20d%3D%22M260.349%2C26.207c-5.591%2C1.753%2C89.848-34.889%2C144.087%2C34.417c19.159%2C24.484-3.043%2C124.519-56.153%2C203.329%22%2F%3E%0D%0A%3Cpath%20style%3D%22stroke-linejoin%3Abevel%3B%22%20d%3D%22M348.282%2C263.953c0%2C0%2C3.461%2C17.036%2C53.764%2C6.653c22.04-4.552%2C8.776%2C12.774-13.577%2C23.155c-18.345%2C8.514-59.474%2C10.696-60.146-1.069c-1.729-30.355%2C21.647-21.133%2C19.96-28.739c-1.525-6.85-11.979-13.573-18.894-30.338%20%20%20%20c-6.037-14.633-82.796-126.849%2C21.287-110.183c3.813-0.789-27.146-99.002-124.553-100.599c-97.385-1.597-94.19%2C119.762-94.19%2C119.762%22%2F%3E%0D%0A%3Cpath%20d%3D%22M188.604%2C274.334c-13.577%2C15.166-9.584%2C17.829-36.723%2C23.417c-27.459%2C5.66-11.326%2C15.733-0.797%2C18.365c12.768%2C3.195%2C42.307%2C7.718%2C62.266-20.229c6.078-8.509-0.036-22.086-8.385-25.547c-4.034-1.671-9.428-3.765-16.361%2C3.994z%22%2F%3E%0D%0A%3Cpath%20d%3D%22M187.715%2C274.069c-1.368-8.917%2C2.93-19.528%2C7.536-31.942c6.922-18.626%2C22.893-37.255%2C10.117-96.339c-9.523-44.029-73.396-9.163-73.436-3.193c-0.039%2C5.968%2C2.889%2C30.26-1.067%2C58.548c-5.162%2C36.913%2C23.488%2C68.132%2C56.479%2C64.938%22%2F%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23FFFFFF%3Bstroke-width%3A4.155%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%20d%3D%22M172.517%2C141.7c-0.288%2C2.039%2C3.733%2C7.48%2C8.976%2C8.207c5.234%2C0.73%2C9.714-3.522%2C9.998-5.559c0.284-2.039-3.732-4.285-8.977-5.015c-5.237-0.731-9.719%2C0.333-9.996%2C2.367z%22%2F%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23FFFFFF%3Bstroke-width%3A2.0775%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%20d%3D%22M331.941%2C137.543c0.284%2C2.039-3.732%2C7.48-8.976%2C8.207c-5.238%2C0.73-9.718-3.522-10.005-5.559c-0.277-2.039%2C3.74-4.285%2C8.979-5.015c5.239-0.73%2C9.718%2C0.333%2C10.002%2C2.368z%22%2F%3E%0D%0A%3Cpath%20d%3D%22M350.676%2C123.432c0.863%2C15.994-3.445%2C26.888-3.988%2C43.914c-0.804%2C24.748%2C11.799%2C53.074-7.191%2C81.435%22%2F%3E%0D%0A%3Cpath%20style%3D%22stroke-width%3A3%3B%22%20d%3D%22M0%2C60.232%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E"
                       />
                     </div>
@@ -291,7 +291,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                           class="container"
                         >
                           <div
-                            class="sc-jIZahH gqWSUB"
+                            class="sc-ikZpkk dwHHud"
                           >
                             Alpha
                           </div>
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
index e4704e8a81c54..8ab58ac929b86 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`<StartWithDestinations /> should renders without crash with provided pr
             >
               <img
                 alt=""
-                class="sc-himrzO gCuIyJ"
+                class="sc-jIZahH bHaxCq"
                 src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%20640%20640%22%20width%3D%22640%22%20height%3D%22640%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.85%2036.65%20322.83%2024.62%20317.93%2012.13C317.72%2011.55%20317.48%2010.98%20317.21%2010.43C317.65%2022.19%20312.69%2033.5%20303.74%2041.15C284.96%2055.79%20188.75%20136.46%20180.85%20300.76C173.57%20453.48%20291.52%20545.1%20307.51%20556.78C307.69%20556.91%20309.13%20557.91%20309.31%20558.04C313.89%20547.62%20318.29%20517.71%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.62%20552.65C343.71%20552.59%20344.43%20552.08%20344.52%20552.02C351.58%20547.01%20358.3%20541.55%20364.64%20535.67C404.62%20498.84%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22b3m9u0RT9j%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M321.43%20477.01C318.2%20517.98%20313.53%20547.8%20309.04%20557.86C309.04%20557.86%20314.07%20593.79%20318.02%20632.24C319.27%20632.24%20329.26%20632.24%20330.51%20632.24C333.44%20605.49%20337.82%20578.92%20343.62%20552.65C327.36%20545.1%20322.6%20509.71%20321.88%20476.65%22%20id%3D%22aevBvhJN5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.81%2036.67%20322.79%2024.64%20317.93%2012.13C325.66%2042.41%20324.4%20284.14%20325.21%20313.07C326.92%20367.62%20325.75%20422.22%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.53%20552.74C343.63%20552.67%20344.42%20552.09%20344.52%20552.02C351.58%20547.06%20358.31%20541.62%20364.64%20535.76C364.72%20535.7%20365.29%20535.2%20365.36%20535.13C404.53%20499.2%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22akHagKvoh%22%3E%3C%2Fpath%3E%3C%2Fdefs%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill%3D%22%2312a950%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill%3D%22%23b8c5c2%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill%3D%22%2313994f%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
               />
             </div>
@@ -41,7 +41,7 @@ exports[`<StartWithDestinations /> should renders without crash with provided pr
                   class="container"
                 >
                   <div
-                    class="sc-jIZahH gqWSUB"
+                    class="sc-ikZpkk dwHHud"
                   >
                     Alpha
                   </div>

From b2e8a366ddce77e5f76a51e145871cba138463bd Mon Sep 17 00:00:00 2001
From: Tim Roes <tim@airbyte.io>
Date: Wed, 5 Oct 2022 13:17:20 +0200
Subject: [PATCH 2/2] Adjust snapshots

---
 .../FrequentlyUsedDestinations.test.tsx.snap       | 14 +++++++-------
 .../StartWithDestination.test.tsx.snap             |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap b/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
index a83d88e7e2175..45ccd7d816031 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-dmRaPn kMLQpG"
+                        class="sc-hHLeRK cbImFm"
                         src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2025.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20363.6%20500%22%20enable-background%3D%22new%200%200%20363.6%20500%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%2300832D%22%20d%3D%22M238.6%2C0l125%2C125l-62.5%2C11.4L238.6%2C125l-11.4-62.5L238.6%2C0z%22%2F%3E%0A%09%3Cpath%20fill%3D%22%2300AC47%22%20d%3D%22M238.6%2C125V0H34.1C15.3%2C0%2C0%2C15.3%2C0%2C34.1v431.8C0%2C484.7%2C15.3%2C500%2C34.1%2C500h295.5c18.8%2C0%2C34.1-15.3%2C34.1-34.1%0A%09%09V125H238.6z%22%2F%3E%0A%09%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M68.2%2C193.2V358h227.3V193.2H68.2z%20M167.6%2C329.5h-71v-39.8h71V329.5z%20M167.6%2C261.4h-71v-39.8h71V261.4z%0A%09%09%20M267%2C329.5h-71v-39.8h71V329.5z%20M267%2C261.4h-71v-39.8h71V261.4z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
                       />
                     </div>
@@ -93,7 +93,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                           class="container"
                         >
                           <div
-                            class="sc-hHLeRK hOvRwZ"
+                            class="sc-dIouRR dyVMPi"
                           >
                             Alpha
                           </div>
@@ -125,7 +125,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-dmRaPn kMLQpG"
+                        class="sc-hHLeRK cbImFm"
                         src="data:image/svg+xml;utf8,%3Csvg%20height%3D%222500%22%20width%3D%222500%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1.633235433328256%207.0326093303156565%20131.26574682416876%20114.63439066968435%22%3E%3ClinearGradient%20id%3D%22a%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2264%22%20x2%3D%2264%22%20y1%3D%227.034%22%20y2%3D%22120.789%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234387fd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234683ea%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20d%3D%22M27.79%20115.217L1.54%2069.749a11.499%2011.499%200%200%201%200-11.499l26.25-45.467a11.5%2011.5%200%200%201%209.96-5.75h52.5a11.5%2011.5%200%200%201%209.959%205.75l26.25%2045.467a11.499%2011.499%200%200%201%200%2011.5l-26.25%2045.467a11.5%2011.5%200%200%201-9.959%205.749h-52.5a11.499%2011.499%200%200%201-9.96-5.75z%22%20fill%3D%22url(%23a)%22%2F%3E%3Cpath%20clip-path%3D%22url(%23b)%22%20d%3D%22M119.229%2086.48L80.625%2047.874%2064%2043.425l-14.933%205.55L43.3%2064l4.637%2016.729%2040.938%2040.938%208.687-.386z%22%20opacity%3D%22.07%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M64%2040.804c-12.81%200-23.195%2010.385-23.195%2023.196%200%2012.81%2010.385%2023.195%2023.195%2023.195S87.194%2076.81%2087.194%2064c0-12.811-10.385-23.196-23.194-23.196m0%2040.795c-9.72%200-17.6-7.88-17.6-17.6S54.28%2046.4%2064%2046.4%2081.6%2054.28%2081.6%2064%2073.72%2081.6%2064%2081.6%22%2F%3E%3Cpath%20d%3D%22M52.99%2063.104v7.21a12.794%2012.794%200%200%200%204.38%204.475V63.104zM61.675%2057.026v19.411c.745.137%201.507.22%202.29.22.714%200%201.41-.075%202.093-.189V57.026zM70.766%2066.1v8.562a12.786%2012.786%200%200%200%204.382-4.7v-3.861zM80.691%2078.287l-2.403%202.405a1.088%201.088%200%200%200%200%201.537l9.115%209.112a1.088%201.088%200%200%200%201.537%200l2.403-2.402a1.092%201.092%200%200%200%200-1.536l-9.116-9.116a1.09%201.09%200%200%200-1.536%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                       />
                     </div>
@@ -188,7 +188,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-dmRaPn kMLQpG"
+                        class="sc-hHLeRK cbImFm"
                         src="data:image/svg+xml;utf8,%3Csvg%20width%3D%222215%22%20height%3D%222500%22%20viewBox%3D%220%200%20256%20289%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22xMidYMid%22%3E%3Cpath%20d%3D%22M165.258%20288.501h3.508l57.261-28.634.953-1.347V29.964l-.953-1.354L168.766%200h-3.551l.043%20288.501%22%20fill%3D%22%235294CF%22%2F%3E%3Cpath%20d%3D%22M90.741%20288.501h-3.557l-57.212-28.634-1.161-1.997-.589-226.742%201.75-2.518L87.184%200h3.601l-.044%20288.501%22%20fill%3D%22%231F5B98%22%2F%3E%3Cpath%20d%3D%22M87.285%200h81.426v288.501H87.285V0z%22%20fill%3D%22%232D72B8%22%2F%3E%3Cpath%20d%3D%22M256%20137.769l-1.935-.429-27.628-2.576-.41.204-57.312-2.292h-81.43l-57.313%202.292V91.264l-.06.032.06-.128%2057.313-13.28h81.43l57.312%2013.28%2021.069%2011.199v-7.2l8.904-.974-.922-1.798-28.192-20.159-.859.279-57.312-17.759h-81.43L29.972%2072.515V28.61L0%2063.723v30.666l.232-.168%208.672.946v7.348L0%20107.28v30.513l.232-.024%208.672.128v12.807l-7.482.112L0%20150.68v30.525l8.904%204.788v7.433l-8.531.942-.373-.28v30.661l29.972%2035.118v-43.901l57.313%2017.759h81.43l57.481-17.811.764.335%2027.821-19.862%201.219-1.979-8.904-.982v-7.284l-1.167-.466-19.043%2010.265-.69%201.44-57.481%2013.203v.016h-81.43v-.016l-57.313-13.259v-43.864l57.313%202.284v.056h81.43l57.312-2.34%201.305.6%2026.779-2.306%201.889-.923-8.904-.128v-12.807l8.904-.128%22%20fill%3D%22%231A476F%22%2F%3E%3Cpath%20d%3D%22M226.027%20215.966v43.901L256%20224.749v-30.461l-29.8%2021.626-.173.052M226.027%20197.421l.173-.04%2029.8-16.028v-30.649l-29.973%202.757v43.96M226.2%2091.208l-.173-.04v43.8L256%20137.769v-30.634l-29.8-15.927M226.2%2072.687L256%2094.193V63.731L226.027%2028.61v43.905l.173.06v.112%22%20fill%3D%22%232D72B8%22%2F%3E%3C%2Fsvg%3E"
                       />
                     </div>
@@ -230,7 +230,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-dmRaPn kMLQpG"
+                        class="sc-hHLeRK cbImFm"
                         src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%20640%20640%22%20width%3D%22640%22%20height%3D%22640%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.85%2036.65%20322.83%2024.62%20317.93%2012.13C317.72%2011.55%20317.48%2010.98%20317.21%2010.43C317.65%2022.19%20312.69%2033.5%20303.74%2041.15C284.96%2055.79%20188.75%20136.46%20180.85%20300.76C173.57%20453.48%20291.52%20545.1%20307.51%20556.78C307.69%20556.91%20309.13%20557.91%20309.31%20558.04C313.89%20547.62%20318.29%20517.71%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.62%20552.65C343.71%20552.59%20344.43%20552.08%20344.52%20552.02C351.58%20547.01%20358.3%20541.55%20364.64%20535.67C404.62%20498.84%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22b3m9u0RT9j%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M321.43%20477.01C318.2%20517.98%20313.53%20547.8%20309.04%20557.86C309.04%20557.86%20314.07%20593.79%20318.02%20632.24C319.27%20632.24%20329.26%20632.24%20330.51%20632.24C333.44%20605.49%20337.82%20578.92%20343.62%20552.65C327.36%20545.1%20322.6%20509.71%20321.88%20476.65%22%20id%3D%22aevBvhJN5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.81%2036.67%20322.79%2024.64%20317.93%2012.13C325.66%2042.41%20324.4%20284.14%20325.21%20313.07C326.92%20367.62%20325.75%20422.22%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.53%20552.74C343.63%20552.67%20344.42%20552.09%20344.52%20552.02C351.58%20547.06%20358.31%20541.62%20364.64%20535.76C364.72%20535.7%20365.29%20535.2%20365.36%20535.13C404.53%20499.2%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22akHagKvoh%22%3E%3C%2Fpath%3E%3C%2Fdefs%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill%3D%22%2312a950%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill%3D%22%23b8c5c2%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill%3D%22%2313994f%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                       />
                     </div>
@@ -272,7 +272,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-dmRaPn kMLQpG"
+                        class="sc-hHLeRK cbImFm"
                         src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%0D%0A%20%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%0D%0A%3Csvg%20width%3D%22432.071pt%22%20height%3D%22445.383pt%22%20viewBox%3D%220%200%20432.071%20445.383%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%0A%3Cg%20id%3D%22orginal%22%20style%3D%22fill-rule%3Anonzero%3Bclip-rule%3Anonzero%3Bstroke%3A%23000000%3Bstroke-miterlimit%3A4%3B%22%3E%0D%0A%09%3C%2Fg%3E%0D%0A%3Cg%20id%3D%22Layer_x0020_3%22%20style%3D%22fill-rule%3Anonzero%3Bclip-rule%3Anonzero%3Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A12.4651%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A4%3B%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23000000%3Bstroke%3A%23000000%3Bstroke-width%3A37.3953%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%20d%3D%22M323.205%2C324.227c2.833-23.601%2C1.984-27.062%2C19.563-23.239l4.463%2C0.392c13.517%2C0.615%2C31.199-2.174%2C41.587-7c22.362-10.376%2C35.622-27.7%2C13.572-23.148c-50.297%2C10.376-53.755-6.655-53.755-6.655c53.111-78.803%2C75.313-178.836%2C56.149-203.322%20%20%20%20C352.514-5.534%2C262.036%2C26.049%2C260.522%2C26.869l-0.482%2C0.089c-9.938-2.062-21.06-3.294-33.554-3.496c-22.761-0.374-40.032%2C5.967-53.133%2C15.904c0%2C0-161.408-66.498-153.899%2C83.628c1.597%2C31.936%2C45.777%2C241.655%2C98.47%2C178.31%20%20%20%20c19.259-23.163%2C37.871-42.748%2C37.871-42.748c9.242%2C6.14%2C20.307%2C9.272%2C31.912%2C8.147l0.897-0.765c-0.281%2C2.876-0.157%2C5.689%2C0.359%2C9.019c-13.572%2C15.167-9.584%2C17.83-36.723%2C23.416c-27.457%2C5.659-11.326%2C15.734-0.797%2C18.367c12.768%2C3.193%2C42.305%2C7.716%2C62.268-20.224%20%20%20%20l-0.795%2C3.188c5.325%2C4.26%2C4.965%2C30.619%2C5.72%2C49.452c0.756%2C18.834%2C2.017%2C36.409%2C5.856%2C46.771c3.839%2C10.36%2C8.369%2C37.05%2C44.036%2C29.406c29.809-6.388%2C52.6-15.582%2C54.677-101.107%22%2F%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23336791%3Bstroke%3Anone%3B%22%20d%3D%22M402.395%2C271.23c-50.302%2C10.376-53.76-6.655-53.76-6.655c53.111-78.808%2C75.313-178.843%2C56.153-203.326c-52.27-66.785-142.752-35.2-144.262-34.38l-0.486%2C0.087c-9.938-2.063-21.06-3.292-33.56-3.496c-22.761-0.373-40.026%2C5.967-53.127%2C15.902%20%20%20%20c0%2C0-161.411-66.495-153.904%2C83.63c1.597%2C31.938%2C45.776%2C241.657%2C98.471%2C178.312c19.26-23.163%2C37.869-42.748%2C37.869-42.748c9.243%2C6.14%2C20.308%2C9.272%2C31.908%2C8.147l0.901-0.765c-0.28%2C2.876-0.152%2C5.689%2C0.361%2C9.019c-13.575%2C15.167-9.586%2C17.83-36.723%2C23.416%20%20%20%20c-27.459%2C5.659-11.328%2C15.734-0.796%2C18.367c12.768%2C3.193%2C42.307%2C7.716%2C62.266-20.224l-0.796%2C3.188c5.319%2C4.26%2C9.054%2C27.711%2C8.428%2C48.969c-0.626%2C21.259-1.044%2C35.854%2C3.147%2C47.254c4.191%2C11.4%2C8.368%2C37.05%2C44.042%2C29.406c29.809-6.388%2C45.256-22.942%2C47.405-50.555%20%20%20%20c1.525-19.631%2C4.976-16.729%2C5.194-34.28l2.768-8.309c3.192-26.611%2C0.507-35.196%2C18.872-31.203l4.463%2C0.392c13.517%2C0.615%2C31.208-2.174%2C41.591-7c22.358-10.376%2C35.618-27.7%2C13.573-23.148z%22%2F%3E%0D%0A%3Cpath%20d%3D%22M215.866%2C286.484c-1.385%2C49.516%2C0.348%2C99.377%2C5.193%2C111.495c4.848%2C12.118%2C15.223%2C35.688%2C50.9%2C28.045c29.806-6.39%2C40.651-18.756%2C45.357-46.051c3.466-20.082%2C10.148-75.854%2C11.005-87.281%22%2F%3E%0D%0A%3Cpath%20d%3D%22M173.104%2C38.256c0%2C0-161.521-66.016-154.012%2C84.109c1.597%2C31.938%2C45.779%2C241.664%2C98.473%2C178.316c19.256-23.166%2C36.671-41.335%2C36.671-41.335%22%2F%3E%0D%0A%3Cpath%20d%3D%22M260.349%2C26.207c-5.591%2C1.753%2C89.848-34.889%2C144.087%2C34.417c19.159%2C24.484-3.043%2C124.519-56.153%2C203.329%22%2F%3E%0D%0A%3Cpath%20style%3D%22stroke-linejoin%3Abevel%3B%22%20d%3D%22M348.282%2C263.953c0%2C0%2C3.461%2C17.036%2C53.764%2C6.653c22.04-4.552%2C8.776%2C12.774-13.577%2C23.155c-18.345%2C8.514-59.474%2C10.696-60.146-1.069c-1.729-30.355%2C21.647-21.133%2C19.96-28.739c-1.525-6.85-11.979-13.573-18.894-30.338%20%20%20%20c-6.037-14.633-82.796-126.849%2C21.287-110.183c3.813-0.789-27.146-99.002-124.553-100.599c-97.385-1.597-94.19%2C119.762-94.19%2C119.762%22%2F%3E%0D%0A%3Cpath%20d%3D%22M188.604%2C274.334c-13.577%2C15.166-9.584%2C17.829-36.723%2C23.417c-27.459%2C5.66-11.326%2C15.733-0.797%2C18.365c12.768%2C3.195%2C42.307%2C7.718%2C62.266-20.229c6.078-8.509-0.036-22.086-8.385-25.547c-4.034-1.671-9.428-3.765-16.361%2C3.994z%22%2F%3E%0D%0A%3Cpath%20d%3D%22M187.715%2C274.069c-1.368-8.917%2C2.93-19.528%2C7.536-31.942c6.922-18.626%2C22.893-37.255%2C10.117-96.339c-9.523-44.029-73.396-9.163-73.436-3.193c-0.039%2C5.968%2C2.889%2C30.26-1.067%2C58.548c-5.162%2C36.913%2C23.488%2C68.132%2C56.479%2C64.938%22%2F%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23FFFFFF%3Bstroke-width%3A4.155%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%20d%3D%22M172.517%2C141.7c-0.288%2C2.039%2C3.733%2C7.48%2C8.976%2C8.207c5.234%2C0.73%2C9.714-3.522%2C9.998-5.559c0.284-2.039-3.732-4.285-8.977-5.015c-5.237-0.731-9.719%2C0.333-9.996%2C2.367z%22%2F%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23FFFFFF%3Bstroke-width%3A2.0775%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%20d%3D%22M331.941%2C137.543c0.284%2C2.039-3.732%2C7.48-8.976%2C8.207c-5.238%2C0.73-9.718-3.522-10.005-5.559c-0.277-2.039%2C3.74-4.285%2C8.979-5.015c5.239-0.73%2C9.718%2C0.333%2C10.002%2C2.368z%22%2F%3E%0D%0A%3Cpath%20d%3D%22M350.676%2C123.432c0.863%2C15.994-3.445%2C26.888-3.988%2C43.914c-0.804%2C24.748%2C11.799%2C53.074-7.191%2C81.435%22%2F%3E%0D%0A%3Cpath%20style%3D%22stroke-width%3A3%3B%22%20d%3D%22M0%2C60.232%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E"
                       />
                     </div>
@@ -291,7 +291,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                           class="container"
                         >
                           <div
-                            class="sc-hHLeRK hOvRwZ"
+                            class="sc-dIouRR dyVMPi"
                           >
                             Alpha
                           </div>
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
index 6555679b3e5ab..c6e68f28119c6 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`<StartWithDestinations /> should renders without crash with provided pr
             >
               <img
                 alt=""
-                class="sc-dmRaPn kMLQpG"
+                class="sc-hHLeRK cbImFm"
                 src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%20640%20640%22%20width%3D%22640%22%20height%3D%22640%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.85%2036.65%20322.83%2024.62%20317.93%2012.13C317.72%2011.55%20317.48%2010.98%20317.21%2010.43C317.65%2022.19%20312.69%2033.5%20303.74%2041.15C284.96%2055.79%20188.75%20136.46%20180.85%20300.76C173.57%20453.48%20291.52%20545.1%20307.51%20556.78C307.69%20556.91%20309.13%20557.91%20309.31%20558.04C313.89%20547.62%20318.29%20517.71%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.62%20552.65C343.71%20552.59%20344.43%20552.08%20344.52%20552.02C351.58%20547.01%20358.3%20541.55%20364.64%20535.67C404.62%20498.84%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22b3m9u0RT9j%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M321.43%20477.01C318.2%20517.98%20313.53%20547.8%20309.04%20557.86C309.04%20557.86%20314.07%20593.79%20318.02%20632.24C319.27%20632.24%20329.26%20632.24%20330.51%20632.24C333.44%20605.49%20337.82%20578.92%20343.62%20552.65C327.36%20545.1%20322.6%20509.71%20321.88%20476.65%22%20id%3D%22aevBvhJN5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.81%2036.67%20322.79%2024.64%20317.93%2012.13C325.66%2042.41%20324.4%20284.14%20325.21%20313.07C326.92%20367.62%20325.75%20422.22%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.53%20552.74C343.63%20552.67%20344.42%20552.09%20344.52%20552.02C351.58%20547.06%20358.31%20541.62%20364.64%20535.76C364.72%20535.7%20365.29%20535.2%20365.36%20535.13C404.53%20499.2%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22akHagKvoh%22%3E%3C%2Fpath%3E%3C%2Fdefs%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill%3D%22%2312a950%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill%3D%22%23b8c5c2%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill%3D%22%2313994f%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
               />
             </div>