Change Zap automation UI issues (#5355)

* changed styles for Zap automation ui to match figma

* Increased margintop value

* increase margintop value to mt-4

* fixed some styling issues

* fixed issue with buttons being at different heights

* changed vertical positioning of text and increased min height

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/app-store/_components/AppSettings.tsx

@@ -5,7 +5,7 @@ import { DynamicComponent } from "./DynamicComponent";
 export const AppSettings = (props: { slug: string }) => {
   return (
     <DynamicComponent<typeof AppSettingsComponentsMap>
-      wrapperClassName="border-t border-gray-200"
+      wrapperClassName="border-t border-gray-200 bg-gray-100"
       componentMap={AppSettingsComponentsMap}
       {...props}
     />

packages/app-store/zapier/components/TemplateCard.tsx

@@ -4,24 +4,28 @@ import { Template } from "./AppSettings";
 
 export default function TemplateCard({ template }: { template: Template }) {
   return (
-    <div className="rounded-md border border-gray-200 p-4 ">
-      <div className="flex items-center justify-center">
+    <div className="rounded-md border border-gray-200 bg-white p-5">
+      <div className="min-h-16 flex items-start justify-start">
         <div>
-          <div className="mr-4 flex h-12 w-12 items-center justify-center rounded-md border p-1 ">
+          <div className="mr-4 flex h-12 w-12 items-center justify-center rounded-md p-1">
             <img className="h-8" alt={template.app} src={`/api/app-store/zapier/${template.icon}`} />
           </div>
         </div>
-        <div className="mr-4 ">
+        <div className="mr-4">
           <div>
-            <p className="truncate text-sm font-medium text-neutral-900">{template.app}</p>
-            <p className="mt-[2px] text-xs text-gray-500 ">{template.text}</p>
+            <p className="truncate text-sm font-medium leading-4 text-neutral-900">{template.app}</p>
+            <p className="mt-[2px] text-sm text-gray-500">{template.text}</p>
           </div>
         </div>
-        <div className="ml-auto hidden sm:block">
-          <Button color="secondary" className="w-[90px] " target="_blank" href={template.link}>
-            Use Zap
-          </Button>
-        </div>
+      </div>
+      <div className="relative float-right ml-auto mt-4 hidden h-full sm:block">
+        <Button
+          color="secondary"
+          className="absolute bottom-0 right-0 w-[90px]"
+          target="_blank"
+          href={template.link}>
+          Use Zap
+        </Button>
       </div>
       <div className="mt-2 block w-full sm:hidden">
         <div className="float-right">