From 392c8e8da4dd563df8a120084473dfa113de7004 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Tue, 12 Oct 2021 12:39:02 +0100
Subject: [PATCH] minor layout changes to `/integrations` (#913)

---
 components/List.tsx          |  2 +-
 components/Shell.tsx         |  1 -
 pages/integrations/index.tsx | 40 +++++++++++++++++++++---------------
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/components/List.tsx b/components/List.tsx
index 996d84a0..3e53280c 100644
--- a/components/List.tsx
+++ b/components/List.tsx
@@ -50,7 +50,7 @@ export function ListItemTitle<TComponent extends keyof JSX.IntrinsicElements = "
     component,
     {
       ...passThroughProps,
-      className: classNames("text-sm font-medium text-neutral-900 truncate", props.className),
+      className: classNames("font-cal text-sm font-medium text-neutral-900 truncate", props.className),
     },
     props.children
   );
diff --git a/components/Shell.tsx b/components/Shell.tsx
index 2b7d26db..8ab86ae4 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -66,7 +66,6 @@ export function ShellSubHeading(props: {
   return (
     <div className={classNames("block sm:flex justify-between mb-3", props.className)}>
       <div>
-        {/* TODO should be Roboto */}
         <h2 className="text-lg font-bold text-gray-900 flex items-center content-center space-x-2">
           {props.title}
         </h2>
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 75b98cdf..cf7a8969 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -171,7 +171,11 @@ function ConnectOrDisconnectIntegrationButton(props: {
     );
   }
   if (!props.installed) {
-    return <Alert severity="warning" title="Not installed" />;
+    return (
+      <div className="h-12 -mt-1">
+        <Alert severity="warning" title="Not installed" />
+      </div>
+    );
   }
   return (
     <ConnectIntegration type={props.type} render={(btnProps) => <Button {...btnProps}>Connect</Button>} />
@@ -187,11 +191,9 @@ function IntegrationListItem(props: {
 }) {
   return (
     <ListItem expanded={!!props.children} className={classNames("flex-col")}>
-      <div className={classNames("flex flex-1 space-x-2 w-full p-4")}>
-        <div>
-          <Image width={40} height={40} src={`/${props.imageSrc}`} alt={props.title} />
-        </div>
-        <div className="flex-grow">
+      <div className={classNames("flex flex-1 space-x-2 w-full p-4 items-center")}>
+        <Image width={40} height={40} src={`/${props.imageSrc}`} alt={props.title} />
+        <div className="pl-2 flex-grow">
           <ListItemTitle component="h3">{props.title}</ListItemTitle>
           <ListItemText component="p">{props.description}</ListItemText>
         </div>
@@ -257,15 +259,17 @@ export function CalendarSwitch(props: {
     }
   );
   return (
-    <Switch
-      key={props.externalId}
-      name="enabled"
-      label={props.title}
-      defaultChecked={props.defaultSelected}
-      onCheckedChange={(isOn: boolean) => {
-        mutation.mutate({ isOn });
-      }}
-    />
+    <div className="py-1">
+      <Switch
+        key={props.externalId}
+        name="enabled"
+        label={props.title}
+        defaultChecked={props.defaultSelected}
+        onCheckedChange={(isOn: boolean) => {
+          mutation.mutate({ isOn });
+        }}
+      />
+    </div>
   );
 }
 
@@ -395,7 +399,11 @@ export default function IntegrationsPage() {
                     actions={
                       <ConnectIntegration
                         type={item.type}
-                        render={(btnProps) => <Button {...btnProps}>Connect</Button>}
+                        render={(btnProps) => (
+                          <Button color="secondary" {...btnProps}>
+                            Connect
+                          </Button>
+                        )}
                       />
                     }
                   />