integration with checkly done

frontend/src/components/integrations/CloudIntegration.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
+import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import deleteIntegrationAuth from '../../pages/api/integrations/DeleteIntegrationAuth';
@@ -44,9 +44,9 @@ const CloudIntegration = ({
       tabIndex={0}
       className={`relative ${
         cloudIntegrationOption.isAvailable
-          ? 'cursor-pointer duration-200 hover:bg-white/10'
+          ? 'cursor-pointer duration-200 hover:bg-mineshaft-700'
           : 'opacity-50'
-      } flex h-32 flex-row items-center rounded-md bg-white/5 p-4`}
+      } flex h-32 flex-row items-center rounded-md bg-mineshaft-800 border border-mineshaft-600 p-4`}
       onClick={() => {
         if (!cloudIntegrationOption.isAvailable) return;
         setSelectedIntegrationOption(cloudIntegrationOption);
@@ -95,12 +95,12 @@ const CloudIntegration = ({
                   integrationAuth: deletedIntegrationAuth
                 });
               }}
-              className="flex w-max cursor-pointer flex-row items-center rounded-b-md bg-red py-0.5 px-2 text-xs opacity-0 duration-200 group-hover:opacity-100"
+              className="flex w-max cursor-pointer flex-row items-center rounded-bl-md bg-red py-0.5 px-2 text-xs opacity-30 duration-200 group-hover:opacity-100"
             >
-              <FontAwesomeIcon icon={faX} className="mr-2 py-px text-xs" />
+              <FontAwesomeIcon icon={faXmark} className="mr-2 text-xs" />
               Revoke
             </div>
-            <div className="flex w-max flex-row items-center rounded-bl-md rounded-tr-md bg-primary py-0.5 px-2 text-xs text-black opacity-90 duration-200 group-hover:opacity-100">
+            <div className="flex w-max flex-row items-center rounded-tr-md bg-primary py-0.5 px-2 text-xs text-black opacity-70 duration-200 group-hover:opacity-100">
               <FontAwesomeIcon icon={faCheck} className="mr-2 text-xs" />
               Authorized
             </div>

frontend/src/components/integrations/FrameworkIntegration.tsx

@@ -12,10 +12,10 @@ const FrameworkIntegration = ({ framework }: { framework: Framework }) => (
     href={framework.docsLink}
     rel="noopener noreferrer"
     target="_blank"
-    className="relative flex flex-row justify-center bg-bunker-500 hover:bg-gradient-to-tr  duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer"
+    className="relative flex flex-row justify-center duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer"
   >
     <div
-      className={`hover:bg-white/10 cursor-pointer font-semibold bg-bunker-500 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${
+      className={`hover:bg-mineshaft-700 cursor-pointer font-semibold bg-mineshaft-800 border border-mineshaft-600 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${
         framework?.name?.split(' ').length > 1 ? 'text-sm px-1' : 'text-xl px-2'
       } text-center w-full max-w-xs`}
     >

frontend/src/components/integrations/Integration.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import { faArrowRight, faRotate, faX } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 // TODO: This needs to be moved from public folder
 import { contextNetlifyMapping, integrationSlugNameMapping, reverseContextNetlifyMapping } from 'public/data/frequentConstants';
@@ -212,10 +212,10 @@ const IntegrationTile = ({
     return <div />;
   };
 
-  if (!integrationApp) return <div />;
+  if (!integrationApp && integration.integration !== "checkly") return  <div />;
 
   return (
-    <div className="mx-6 mb-8 flex max-w-5xl justify-between rounded-md bg-white/5 p-6">
+    <div className="mx-6 mb-8 flex max-w-5xl justify-between rounded-md bg-mineshaft-800 border border-mineshaft-600 p-6">
       <div className="flex">
         <div>
           <p className="mb-2 text-xs font-semibold text-gray-400">ENVIRONMENT</p>
@@ -238,27 +238,27 @@ const IntegrationTile = ({
         </div>
         <div className="mr-2">
           <p className="text-gray-400 text-xs font-semibold mb-2">INTEGRATION</p>
-          <div className="py-2.5 bg-white/[.07] rounded-md pl-4 pr-10 text-sm font-semibold text-gray-300">
+          <div className="py-2.5 bg-white/[.07] rounded-md pl-4 pr-10 text-sm font-semibold text-gray-300 cursor-default">
             {/* {integration.integration.charAt(0).toUpperCase() + integration.integration.slice(1)} */}
             {integrationSlugNameMapping[integration.integration]}
           </div>
         </div>
         <div className="mr-2">
           <div className="mb-2 text-xs font-semibold text-gray-400">APP</div>
-          <ListBox
+          {integrationApp ? <div title={integrationApp}><ListBox
             data={!integration.isActive ? apps.map((app) => app.name) : null}
             isSelected={integrationApp}
             onChange={(app) => {
               setIntegrationApp(app);
             }}
-          />
+          /></div> : <div className='w-52 h-10 rounded-md bg-mineshaft-600 animate-pulse px-4 font-bold py-2'>-</div>}
         </div>
         {renderIntegrationSpecificParams(integration)}
       </div>
-      <div className="flex items-end">
+      <div className="flex items-end cursor-default">
         {integration.isActive ? (
-          <div className="flex max-w-5xl flex-row items-center rounded-md bg-white/5 p-2 px-4">
-            <FontAwesomeIcon icon={faRotate} className="mr-2.5 animate-spin text-lg text-primary" />
+          <div className="flex max-w-5xl flex-row items-center rounded-md bg-mineshaft-600 p-[0.44rem] px-4 border border-mineshaft-500">
+            <FontAwesomeIcon icon={faCheck} className="mr-2.5 text-lg text-primary" />
             <div className="font-semibold text-gray-300">In Sync</div>
           </div>
         ) : (
@@ -269,7 +269,7 @@ const IntegrationTile = ({
             size="md"
           />
         )}
-        <div className="ml-2 opacity-50 duration-200 hover:opacity-100">
+        <div className="ml-2 opacity-80 duration-200 hover:opacity-100">
           <Button
             onButtonPressed={() =>
               handleDeleteIntegration({
@@ -278,7 +278,7 @@ const IntegrationTile = ({
             }
             color="red"
             size="icon-md"
-            icon={faX}
+            icon={faXmark}
           />
         </div>
       </div>

frontend/src/components/integrations/IntegrationSection.tsx

@@ -37,7 +37,7 @@ const ProjectIntegrationSection = ({
     <div className="mb-12">
       <div className="mx-4 mb-4 mt-6 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
         <h1 className="text-3xl font-semibold">Current Integrations</h1>
-        <p className="text-base text-gray-400">Manage integrations with third-party services.</p>
+        <p className="text-base text-bunker-300">Manage integrations with third-party services.</p>
       </div>
       {integrations.map((integration: Integration) => {
         return (