fix: /event-type /apps - doesn't match designs (CALCOM-9180) (#9549)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>

apps/web/components/eventtype/EventAppsTab.tsx

@@ -1,3 +1,5 @@
+import { Trans } from "next-i18next";
+import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useFormContext } from "react-hook-form";
 
@@ -158,9 +160,21 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
       {!shouldLockDisableProps("apps").disabled && (
         <div className="bg-muted rounded-md p-8">
           {!isLoading && notInstalledApps?.length ? (
-            <h2 className="text-emphasis text-lg font-semibold">{t("available_apps")}</h2>
+            <>
+              <h2 className="text-emphasis mb-2 text-xl font-semibold leading-5 tracking-[0.01em]">
+                {t("available_apps_lower_case")}
+              </h2>
+              <p className="text-default mb-6 text-sm font-normal">
+                <Trans i18nKey="available_apps_desc">
+                  You have no apps installed. View popular apps below and explore more in our &nbsp;
+                  <Link className="cursor-pointer underline" href="/apps">
+                    App Store
+                  </Link>
+                </Trans>
+              </p>
+            </>
           ) : null}
-          <div className="before:border-0">
+          <div className="bg-default border-subtle divide-subtle divide-y rounded-md border before:border-0">
             {notInstalledApps?.map((app) => (
               <EventTypeAppCard
                 getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}

apps/web/public/static/locales/en/common.json

@@ -244,6 +244,8 @@
   "all": "All",
   "yours": "Your account",
   "available_apps": "Available Apps",
+  "available_apps_lower_case": "Available apps",
+  "available_apps_desc": "You have no apps installed. View popular apps below and explore more in our <1>App Store</1>",
   "check_email_reset_password": "Check your email. We sent you a link to reset your password.",
   "finish": "Finish",
   "organization_general_description": "Manage settings for your team language and timezone",

packages/app-store/_components/AppCard.tsx

@@ -38,27 +38,38 @@ export default function AppCard({
   return (
     <div
       className={classNames(
-        "border-subtle mb-4",
-        app.isInstalled ? "mt-2" : "mt-6",
-        "rounded-md border",
+        "border-subtle",
+        app?.isInstalled && "mb-4 rounded-md border",
         !app.enabled && "grayscale"
       )}>
       <div className={classNames(app.isInstalled ? "p-4 text-sm sm:p-4" : "px-5 py-4 text-sm sm:px-5")}>
         <div className="flex w-full flex-col gap-2 sm:flex-row sm:gap-0">
           {/* Don't know why but w-[42px] isn't working, started happening when I started using next/dynamic */}
-          <Link href={"/apps/" + app.slug} className="mr-3 h-auto w-10 rounded-sm">
+          <Link
+            href={"/apps/" + app.slug}
+            className={classNames(app?.isInstalled ? "mr-[11px]" : "mr-3", "h-auto w-10 rounded-sm")}>
             <img
               className={classNames(
                 app?.logo.includes("-dark") && "dark:invert",
-                `w-full ${app.isInstalled ? "min-w-[42px]" : "min-w-[32.47px]"}`
+                app?.isInstalled ? "min-w-[42px]" : "min-w-[40px]",
+                "w-full"
               )}
               src={app?.logo}
               alt={app?.name}
             />
           </Link>
-          <div className="flex flex-col">
-            <span className="text-emphasis text-base font-semibold leading-4">{app?.name}</span>
-            <p className="text-default max-w-md truncate pt-2 text-sm font-normal ltr:pr-2 rtl:pl-2">
+          <div className="flex flex-col pe-3">
+            <div className="text-emphasis">
+              <span className={classNames(app?.isInstalled && "text-base", "font-semibold leading-4")}>
+                {app?.name}
+              </span>
+              {!app?.isInstalled && (
+                <span className="bg-emphasis ml-1 rounded px-1 py-0.5 text-xs font-medium leading-3 tracking-[0.01em]">
+                  {app?.categories[0].charAt(0).toUpperCase() + app?.categories[0].slice(1)}
+                </span>
+              )}
+            </div>
+            <p title={app?.description} className="text-default line-clamp-1 pt-1 text-sm font-normal">
               {description || app?.description}
             </p>
           </div>
@@ -105,7 +116,9 @@ export default function AppCard({
       </div>
       <div ref={animationRef}>
         {app?.isInstalled && switchChecked && <hr className="border-subtle" />}
-        {app?.isInstalled && switchChecked ? <div className="p-4 text-sm sm:px-4">{children}</div> : null}
+        {app?.isInstalled && switchChecked ? (
+          <div className="p-4 pt-5 text-sm [&_input]:mb-0 [&_input]:leading-4">{children}</div>
+        ) : null}
       </div>
     </div>
   );

packages/app-store/_components/OmniInstallAppButton.tsx

@@ -76,7 +76,7 @@ export default function OmniInstallAppButton({
             className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
             StartIcon={Plus}
             {...props}>
-            {t("install")}
+            {t("add")}
           </Button>
         );
       }}

packages/app-store/plausible/components/EventTypeAppCardInterface.tsx

@@ -23,6 +23,27 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       }}
       switchChecked={enabled}
       teamId={eventType.team?.id || undefined}>
+      <div className="flex flex-col gap-2">
+        <TextField
+          name="Plausible URL"
+          defaultValue="https://plausible.io/js/script.js"
+          placeholder="https://plausible.io/js/script.js"
+          value={plausibleUrl}
+          disabled={disabled}
+          onChange={(e) => {
+            setAppData("PLAUSIBLE_URL", e.target.value);
+          }}
+        />
+        <TextField
+          disabled={disabled}
+          name="Tracked Domain"
+          placeholder="yourdomain.com"
+          value={trackingId}
+          onChange={(e) => {
+            setAppData("trackingId", e.target.value);
+          }}
+        />
+      </div>
       <TextField
         name="Plausible URL"
         defaultValue="https://plausible.io/js/script.js"

packages/app-store/qr_code/components/EventTypeAppCardInterface.tsx

@@ -46,7 +46,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       }}
       switchChecked={enabled}
       teamId={eventType.team?.id || undefined}>
-      <div className="flex w-full flex-col gap-2 text-sm">
+      <div className="flex w-full flex-col gap-5 text-sm">
         <div className="flex w-full">
           <TextField
             name="hello"