ui updates to integrations page (#962)

components/List.tsx

@@ -50,7 +50,7 @@ export function ListItemTitle<TComponent extends keyof JSX.IntrinsicElements = "
     component,
     {
       ...passThroughProps,
-      className: classNames("font-cal text-sm font-medium text-neutral-900 truncate", props.className),
+      className: classNames("text-sm font-medium text-neutral-900 truncate", props.className),
     },
     props.children
   );

components/Shell.tsx

@@ -89,7 +89,7 @@ export function ShellSubHeading(props: {
   return (
     <div className={classNames("block sm:flex justify-between mb-3", props.className)}>
       <div>
-        <h2 className="flex items-center content-center space-x-2 text-lg font-bold text-gray-900">
+        <h2 className="flex items-center content-center space-x-2 text-base font-bold text-gray-900 leading-6">
           {props.title}
         </h2>
         {props.subtitle && <p className="mr-4 text-sm text-neutral-500">{props.subtitle}</p>}
@@ -244,7 +244,7 @@ export default function Shell(props: {
             </nav>
             <div className={classNames(props.centered && "md:max-w-5xl mx-auto", "py-8")}>
               <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8 min-h-[80px]">
-                <div className="w-full mb-8">
+                <div className="w-full mb-10">
                   <h1 className="mb-1 text-xl font-bold tracking-wide text-gray-900 font-cal">
                     {props.heading}
                   </h1>

components/dialog/ConfirmationDialogContent.tsx

@@ -53,10 +53,12 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
           <DialogPrimitive.Title className="font-cal text-xl font-bold text-gray-900">
             {title}
           </DialogPrimitive.Title>
-          <DialogPrimitive.Description className="text-neutral-500">{children}</DialogPrimitive.Description>
+          <DialogPrimitive.Description className="text-neutral-500 text-sm">
+            {children}
+          </DialogPrimitive.Description>
         </div>
       </div>
-      <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
+      <div className="mt-5 sm:mt-8 sm:flex sm:flex-row-reverse gap-x-2">
         <DialogClose onClick={onConfirm} asChild>
           <Button color="primary">{confirmBtnText}</Button>
         </DialogClose>

components/ui/Alert.tsx

@@ -15,10 +15,10 @@ export function Alert(props: AlertProps) {
   return (
     <div
       className={classNames(
-        "rounded-md p-4",
+        "rounded-sm p-2",
         props.className,
         severity === "error" && "bg-red-50 text-red-800",
-        severity === "warning" && "bg-yellow-50 text-yellow-800",
+        severity === "warning" && "bg-yellow-50 text-yellow-700",
         severity === "success" && "bg-gray-900 text-white"
       )}>
       <div className="flex">

components/ui/Button.tsx

@@ -75,7 +75,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         color === "warn" &&
           (disabled
             ? "text-gray-400 bg-transparent"
-            : "text-red-700 bg-transparent hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
+            : "text-gray-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
         // set not-allowed cursor if disabled
         loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",
         props.className

pages/integrations/index.tsx

@@ -129,7 +129,7 @@ function DisconnectIntegration(props: {
         <ConfirmationDialogContent
           variety="danger"
           title="Disconnect Integration"
-          confirmBtnText="Yes, delete integration"
+          confirmBtnText="Yes, disconnect integration"
           cancelBtnText="Cancel"
           onConfirm={() => {
             mutation.mutate();
@@ -169,7 +169,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
   }
   if (!props.installed) {
     return (
-      <div className="h-12 -mt-1 truncate">
+      <div className="flex items-center truncate">
         <Alert severity="warning" title="Not installed" />
       </div>
     );
@@ -183,7 +183,14 @@ function ConnectOrDisconnectIntegrationButton(props: {
     );
   }
   return (
-    <ConnectIntegration type={props.type} render={(btnProps) => <Button {...btnProps}>Connect</Button>} />
+    <ConnectIntegration
+      type={props.type}
+      render={(btnProps) => (
+        <Button color="secondary" {...btnProps}>
+          Connect
+        </Button>
+      )}
+    />
   );
 }
 
@@ -196,7 +203,7 @@ 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 items-center")}>
+      <div className={classNames("flex flex-1 space-x-2 w-full p-3 items-center")}>
         <Image width={40} height={40} src={`/${props.imageSrc}`} alt={props.title} />
         <div className="flex-grow pl-2 truncate">
           <ListItemTitle component="h3">{props.title}</ListItemTitle>
@@ -307,7 +314,7 @@ export default function IntegrationsPage() {
               </List>
 
               <ShellSubHeading
-                className="mt-6"
+                className="mt-10"
                 title={
                   <SubHeadingTitleWithConnections title="Payment" numConnections={data.payment.numActive} />
                 }
@@ -323,7 +330,7 @@ export default function IntegrationsPage() {
               </List>
 
               <ShellSubHeading
-                className="mt-6"
+                className="mt-10"
                 title={
                   <SubHeadingTitleWithConnections
                     title="Calendars"