Plain svg for Zapier icon (#3059)

* use svg instead of functional component for icon

* use svg from static folder

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

packages/app-store/zapier/components/icon.tsx

@@ -1,15 +0,0 @@
-export default function Icon() {
-  return (
-    <svg
-      width="40"
-      height="40"
-      viewBox="0 0 256 256"
-      xmlns="http://www.w3.org/2000/svg"
-      preserveAspectRatio="xMidYMid">
-      <path
-        d="M159.999 128.056a76.55 76.55 0 0 1-4.915 27.024 76.745 76.745 0 0 1-27.032 4.923h-.108c-9.508-.012-18.618-1.75-27.024-4.919A76.557 76.557 0 0 1 96 128.056v-.112a76.598 76.598 0 0 1 4.91-27.02A76.492 76.492 0 0 1 127.945 96h.108a76.475 76.475 0 0 1 27.032 4.923 76.51 76.51 0 0 1 4.915 27.02v.112zm94.223-21.389h-74.716l52.829-52.833a128.518 128.518 0 0 0-13.828-16.349v-.004a129 129 0 0 0-16.345-13.816l-52.833 52.833V1.782A128.606 128.606 0 0 0 128.064 0h-.132c-7.248.004-14.347.62-21.265 1.782v74.716L53.834 23.665A127.82 127.82 0 0 0 37.497 37.49l-.028.02A128.803 128.803 0 0 0 23.66 53.834l52.837 52.833H1.782S0 120.7 0 127.956v.088c0 7.256.615 14.367 1.782 21.289h74.716l-52.837 52.833a128.91 128.91 0 0 0 30.173 30.173l52.833-52.837v74.72a129.3 129.3 0 0 0 21.24 1.778h.181a129.15 129.15 0 0 0 21.24-1.778v-74.72l52.838 52.837a128.994 128.994 0 0 0 16.341-13.82l.012-.012a129.245 129.245 0 0 0 13.816-16.341l-52.837-52.833h74.724c1.163-6.91 1.77-14 1.778-21.24v-.186c-.008-7.24-.615-14.33-1.778-21.24z"
-        fill="#FF4A00"
-      />
-    </svg>
-  );
-}

packages/app-store/zapier/components/index.ts

@@ -1,2 +1 @@
 export { default as InstallAppButton } from "./InstallAppButton";
-export { default as Icon } from "./icon";

packages/app-store/zapier/pages/setup/index.tsx

@@ -10,9 +10,6 @@ import { Button, Loader, Tooltip } from "@calcom/ui";
 
 /** TODO: Maybe extract this into a package to prevent circular dependencies */
 import { trpc } from "@calcom/web/lib/trpc";
-
-import Icon from "../../components/icon";
-
 export interface IZapierSetupProps {
   inviteLink: string;
 }
@@ -49,7 +46,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
 
   if (integrations.isLoading) {
     return (
-      <div className="flex absolute z-50 h-screen w-full items-center bg-gray-200">
+      <div className="absolute z-50 flex items-center w-full h-screen bg-gray-200">
         <Loader />
       </div>
     );
@@ -58,10 +55,10 @@ export default function ZapierSetup(props: IZapierSetupProps) {
   return (
     <div className="flex h-screen bg-gray-200">
       {showContent ? (
-        <div className="m-auto rounded bg-white p-10">
+        <div className="p-10 m-auto bg-white rounded">
           <div className="flex flex-row">
             <div className="mr-5">
-              <Icon />
+              <img className="h-11" src="/api/app-store/zapier/icon.svg" alt="Zapier Logo" />
             </div>
             <div className="ml-5">
               <div className="text-gray-600">{t("setting_up_zapier")}</div>
@@ -76,7 +73,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
                 <>
                   <div className="mt-1 text-xl">{t("your_unique_api_key")}</div>
                   <div className="flex my-2 mt-3">
-                    <div className="mr-1 w-full rounded bg-gray-100 p-3 pr-5">{newApiKey}</div>
+                    <div className="w-full p-3 pr-5 mr-1 bg-gray-100 rounded">{newApiKey}</div>
                     <Tooltip content="copy to clipboard">
                       <Button
                         onClick={() => {
@@ -85,7 +82,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
                         }}
                         type="button"
                         className="px-4 text-base ">
-                        <ClipboardCopyIcon className="mr-2 h-5 w-5 text-neutral-100" />
+                        <ClipboardCopyIcon className="w-5 h-5 mr-2 text-neutral-100" />
                         {t("copy")}
                       </Button>
                     </Tooltip>