From 30a887df6f5cbf4ad8a30a13420fd17be67a0aa1 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Tue, 4 Oct 2022 16:37:20 +0100
Subject: [PATCH] Some tweaks to the ui - use button - use flex justify-between
 (#4826)

---
 .../getting-started/components/CalendarItem.tsx      | 12 ++++++------
 .../getting-started/steps-views/ConnectCalendars.tsx |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/getting-started/components/CalendarItem.tsx b/apps/web/components/getting-started/components/CalendarItem.tsx
index b3662168a3..9ee3854909 100644
--- a/apps/web/components/getting-started/components/CalendarItem.tsx
+++ b/apps/web/components/getting-started/components/CalendarItem.tsx
@@ -14,10 +14,11 @@ const CalendarItem = (props: ICalendarItem) => {
   const { title, imageSrc, type } = props;
   const { t } = useLocale();
   return (
-    <div className="flex flex-row items-center p-5">
-      <img src={imageSrc} alt={title} className="h-8 w-8" />
-      <p className="mx-3 text-sm font-bold">{title}</p>
-
+    <div className="flex flex-row items-center justify-between p-5">
+      <div className="flex items-center space-x-3">
+        <img src={imageSrc} alt={title} className="h-8 w-8" />
+        <p className="text-sm font-bold">{title}</p>
+      </div>
       <InstallAppButtonWithoutPlanCheck
         type={type}
         render={(buttonProps) => (
@@ -29,8 +30,7 @@ const CalendarItem = (props: ICalendarItem) => {
               // Save cookie key to return url step
               document.cookie = `return-to=${window.location.href};path=/;max-age=3600;SameSite=Lax`;
               buttonProps && buttonProps.onClick && buttonProps?.onClick(event);
-            }}
-            className="ml-auto rounded-md border border-gray-200 py-[10px] px-4 text-sm font-bold">
+            }}>
             {t("connect")}
           </Button>
         )}
diff --git a/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx b/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
index 8125a9b3fb..2e33665b14 100644
--- a/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
+++ b/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
@@ -76,7 +76,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         </List>
       )}
 
-      {queryConnectedCalendars.isLoading && (
+      {queryIntegrations.isLoading && (
         <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
           {[0, 0, 0, 0].map((_item, index) => {
             return (