fixed <Meta> and fixed dropdown in api keys (#4652)

* fixed dropdown in api keys

* nit

* fixed meta title for settings

apps/web/pages/v2/settings/developer/api-keys.tsx

@@ -39,7 +39,7 @@ const ApiKeysView = () => {
 
   return (
     <>
-      <Meta title="api_keys" description="webhooks_description" />
+      <Meta title="API Keys" description="API keys allow other apps to communicate with Cal.com" />
 
       <LicenseRequired>
         <>

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

@@ -51,7 +51,7 @@ const ConferencingLayout = () => {
 
   return (
     <div className="w-full bg-white sm:mx-0 xl:mt-0">
-      <Meta title="conferencing" description="conferencing_description" />
+      <Meta title="Conferencing" description="Add your favourite video conferencing apps for your meetings" />
       <List roundContainer={true}>
         {apps?.items &&
           apps.items

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

@@ -1196,7 +1196,7 @@
   "event_one": "event",
   "event_other": "events",
   "profile_team_description": "Manage settings for your team profile",
-  "members_team_description": "Users that are in the group. Apes together strong!",
+  "members_team_description": "Users that are in the group",
   "team_url": "Team URL",
   "delete_team": "Delete Team",
   "team_members": "Team members",

packages/features/ee/api-keys/components/v2/ApiKeyListItem.tsx

@@ -7,6 +7,7 @@ import { Icon } from "@calcom/ui";
 import Badge from "@calcom/ui/v2/core/Badge";
 import Button from "@calcom/ui/v2/core/Button";
 import Dropdown, {
+  DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
@@ -50,7 +51,7 @@ const ApiKeyListItem = ({
               {t("active")}
             </Badge>
           )}
-          <p className="text-gray-600">
+          <p className="text-xs text-gray-600">
             {" "}
             {neverExpires ? (
               <div className="flex flex-row space-x-3 text-gray-500">{t("api_key_never_expires")}</div>
@@ -63,24 +64,26 @@ const ApiKeyListItem = ({
       <div>
         <Dropdown>
           <DropdownMenuTrigger asChild>
-            <Button size="icon" StartIcon={Icon.FiMoreHorizontal} color="secondary" />
+            <Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
           </DropdownMenuTrigger>
+
           <DropdownMenuContent>
-            <DropdownMenuItem
-              className="flex items-center space-x-2.5 py-3 pr-32 pl-3.5"
-              onClick={onEditClick}>
-              <Icon.FiEdit2 />
-              <p>{t("edit")}</p>
+            <DropdownMenuItem>
+              <DropdownItem type="button" onClick={onEditClick} StartIcon={Icon.FiEdit2}>
+                {t("edit") as string}
+              </DropdownItem>
             </DropdownMenuItem>
-            <DropdownMenuItem
-              className="flex items-center space-x-2.5 py-3 pr-32 pl-3.5"
-              onClick={() =>
-                deleteApiKey.mutate({
-                  id: apiKey.id,
-                })
-              }>
-              <Icon.FiTrash2 />
-              <p>{t("delete")}</p>
+            <DropdownMenuItem>
+              <DropdownItem
+                type="button"
+                onClick={() =>
+                  deleteApiKey.mutate({
+                    id: apiKey.id,
+                  })
+                }
+                StartIcon={Icon.FiTrash}>
+                {t("delete") as string}
+              </DropdownItem>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </Dropdown>

packages/features/ee/teams/pages/team-appearance-view.tsx

@@ -45,7 +45,7 @@ const ProfileView = () => {
 
   return (
     <>
-      <Meta title="booking_appearance" description="appearance_team_description" />
+      <Meta title="Booking Appearance" description="Manage settings for your team's booking appearance" />
       {!isLoading && (
         <>
           {isAdmin ? (

packages/features/ee/teams/pages/team-members-view.tsx

@@ -36,7 +36,7 @@ const MembersView = () => {
 
   return (
     <>
-      <Meta title="team_members" description="members_team_description" />
+      <Meta title="Team Members" description="Users that are in the group" />
       {!isLoading && (
         <>
           <div>

packages/features/ee/teams/pages/team-profile-view.tsx

@@ -103,7 +103,7 @@ const ProfileView = () => {
 
   return (
     <>
-      <Meta title="profile" description="profile_team_description" />
+      <Meta title="Profile" description="Manage settings for your team profile" />
       {!isLoading && (
         <>
           {isAdmin ? (

packages/features/webhooks/pages/webhook-edit-view.tsx

@@ -50,7 +50,11 @@ const EditWebhook = () => {
 
   return (
     <>
-      <Meta title="edit_webhook" description="add_webhook_description" backButton />
+      <Meta
+        title="Edit Webhook"
+        description="Receive meeting data in real-time when something happens in Cal.com"
+        backButton
+      />
       <WebhookForm
         webhook={webhook}
         onSubmit={(values: WebhookFormSubmitData) => {

packages/features/webhooks/pages/webhook-new-view.tsx

@@ -63,7 +63,11 @@ const NewWebhookView = () => {
 
   return (
     <>
-      <Meta title="add_webhook" description="add_webhook_description" backButton />
+      <Meta
+        title="Add Webhook"
+        description="Receive meeting data in real-time when something happens in Cal.com"
+        backButton
+      />
 
       <WebhookForm onSubmit={onCreateWebhook} apps={installedApps?.items.map((app) => app.slug)} />
     </>

packages/features/webhooks/pages/webhooks-view.tsx

@@ -15,7 +15,10 @@ import { WebhookListItem, WebhookListSkeleton } from "../components";
 const WebhooksView = () => {
   return (
     <>
-      <Meta title="webhooks" description="webhooks_description" />
+      <Meta
+        title="Webhooks"
+        description="Receive meeting data in real-time when something happens in Cal.com"
+      />
       <div>
         <Suspense fallback={<WebhookListSkeleton />}>
           <WebhooksList />