fix: app list item ui issues in `/settings/my-account/conferencing` (#6565)

* fix: border color

* fix: padding and title line-height

* feat: add app-list card

* feat: use the AppListCard component

* nit: remove unused imports

apps/web/components/AppListCard.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Badge, ListItemText } from "@calcom/ui";
+
+interface AppListCardProps {
+  logo?: string;
+  title: string;
+  description: string;
+  actions?: ReactNode;
+  isDefault?: boolean;
+}
+
+export default function AppListCard(props: AppListCardProps) {
+  const { t } = useLocale();
+  const { logo, title, description, actions, isDefault } = props;
+
+  return (
+    <div className="p-4">
+      <div className="flex items-center gap-x-3">
+        {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
+
+        <div className="flex grow flex-col gap-y-1 truncate">
+          <div className="flex items-center gap-x-2">
+            <h3 className="truncate text-sm font-semibold text-gray-900">{title}</h3>
+            {isDefault ? <Badge variant="green">{t("default")}</Badge> : null}
+          </div>
+          <ListItemText component="p">{description}</ListItemText>
+        </div>
+
+        {actions}
+      </div>
+    </div>
+  );
+}

apps/web/pages/settings/my-account/conferencing.tsx

@@ -17,15 +17,14 @@ import {
   DropdownMenuTrigger,
   Icon,
   List,
-  ListItem,
-  ListItemText,
-  ListItemTitle,
   Meta,
   showToast,
   SkeletonContainer,
   SkeletonText,
 } from "@calcom/ui";
 
+import AppListCard from "@components/AppListCard";
+
 import { ssrInit } from "@server/lib/ssr";
 
 const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
@@ -76,18 +75,13 @@ const ConferencingLayout = () => {
           apps.items
             .map((app) => ({ ...app, title: app.title || app.name }))
             .map((app) => (
-              <ListItem className="flex-col border-0" key={app.title}>
-                <div className="flex w-full flex-1 items-center space-x-2 p-4 rtl:space-x-reverse">
-                  {
-                    // eslint-disable-next-line @next/next/no-img-element
-                    app.logo && <img className="h-10 w-10" src={app.logo} alt={app.title} />
-                  }
-                  <div className="flex-grow truncate pl-2">
-                    <ListItemTitle component="h3" className="mb-1 space-x-2 rtl:space-x-reverse">
-                      <h3 className="truncate text-sm font-medium text-gray-900">{app.title}</h3>
-                    </ListItemTitle>
-                    <ListItemText component="p">{app.description}</ListItemText>
-                  </div>
+              <AppListCard
+                description={app.description}
+                title={app.title}
+                logo={app.logo}
+                key={app.title}
+                isDefault={app.isGlobal}
+                actions={
                   <div>
                     <Dropdown>
                       <DropdownMenuTrigger asChild>
@@ -110,8 +104,8 @@ const ConferencingLayout = () => {
                       </DropdownMenuContent>
                     </Dropdown>
                   </div>
-                </div>
-              </ListItem>
+                }
+              />
             ))}
       </List>
 

packages/features/settings/layouts/SettingsLayout.tsx

@@ -423,7 +423,7 @@ function ShellHeader() {
   const { t, isLocaleReady } = useLocale();
   return (
     <header className="mx-auto block justify-between pt-8 sm:flex">
-      <div className="mb-8 flex w-full items-center border-b border-gray-200 pb-8">
+      <div className="mb-8 flex w-full items-center border-b border-gray-200 pb-6">
         {meta.backButton && (
           <a href="javascript:history.back()">
             <Icon.FiArrowLeft className="mr-7" />
@@ -431,7 +431,9 @@ function ShellHeader() {
         )}
         <div>
           {meta.title && isLocaleReady ? (
-            <h1 className="font-cal mb-1 text-xl font-bold tracking-wide text-black">{t(meta.title)}</h1>
+            <h1 className="font-cal mb-1 text-xl font-bold leading-5 tracking-wide text-black">
+              {t(meta.title)}
+            </h1>
           ) : (
             <div className="mb-1 h-6 w-24 animate-pulse rounded-md bg-gray-200" />
           )}

packages/ui/components/list/List.tsx

@@ -17,7 +17,7 @@ export function List(props: ListProps) {
         "-mx-4 rounded-sm sm:mx-0 sm:overflow-hidden ",
         // Add rounded top and bottome if roundContainer is true
         props.roundContainer && "[&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md ",
-        !props.noBorderTreatment && "divide-y divide-neutral-200 rounded-md border border-l border-r ",
+        !props.noBorderTreatment && "divide-y divide-gray-200 rounded-md border border-l border-r ",
         props.className
       )}>
       {props.children}