minor layout changes to /integrations (#913)

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
   );

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>

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>
+      <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>
-        <div className="flex-grow">
+        <div className="pl-2 flex-grow">
           <ListItemTitle component="h3">{props.title}</ListItemTitle>
           <ListItemText component="p">{props.description}</ListItemText>
         </div>
@@ -257,6 +259,7 @@ export function CalendarSwitch(props: {
     }
   );
   return (
+    <div className="py-1">
       <Switch
         key={props.externalId}
         name="enabled"
@@ -266,6 +269,7 @@ export function CalendarSwitch(props: {
           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>
+                        )}
                       />
                     }
                   />