ui/ux tweaks

apps/web/app/(app)/environments/[environmentId]/integrations/page.tsx

@@ -30,13 +30,13 @@ export default function IntegrationsPage({ params }) {
           icon={<Image src={ZapierLogo} alt="Zapier Logo" />}
         />
         <Card
-          connectHref={`/environments/${params.environmentId}/integrations/custom-webhook`}
-          connectText="Add Webhooks"
+          connectHref={`/environments/${params.environmentId}/integrations/webhooks`}
+          connectText="Manage Webhooks"
           connectNewTab={false}
           docsHref="https://formbricks.com/docs/webhook-api/overview"
           docsText="Docs"
           docsNewTab={true}
-          label="Custom Webhook"
+          label="Webhooks"
           description="Trigger Webhooks based on actions in your surveys"
           icon={<Image src={WebhookLogo} alt="Webhook Logo" />}
         />

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/AddWebhookModal.tsx

@@ -1,7 +1,7 @@
-import SurveyCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/SurveyCheckboxGroup";
-import TriggerCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/TriggerCheckboxGroup";
-import { triggers } from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/HardcodedTriggers";
-import { testEndpoint } from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/testEndpoint";
+import SurveyCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/SurveyCheckboxGroup";
+import TriggerCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/TriggerCheckboxGroup";
+import { triggers } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/HardcodedTriggers";
+import { testEndpoint } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/testEndpoint";
 import Modal from "@/components/shared/Modal";
 import { createWebhook } from "@formbricks/lib/services/webhook";
 import { TPipelineTrigger } from "@formbricks/types/v1/pipelines";

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/SurveyCheckboxGroup.tsx

@@ -19,11 +19,12 @@ export const SurveyCheckboxGroup: React.FC<SurveyCheckboxGroupProps> = ({
 }) => {
   return (
     <div className="mt-1 rounded-lg border border-slate-200">
-      <div className="grid content-center rounded-lg bg-slate-100 p-3 text-left text-sm text-slate-900">
+      <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
         <div className="my-1 flex items-center space-x-2">
           <Checkbox
             type="button"
             id="allSurveys"
+            className="bg-white"
             value=""
             checked={selectedAllSurveys}
             onCheckedChange={onSelectAllSurveys}
@@ -40,6 +41,7 @@ export const SurveyCheckboxGroup: React.FC<SurveyCheckboxGroupProps> = ({
               type="button"
               id={survey.id}
               value={survey.id}
+              className="bg-white"
               checked={selectedSurveys.includes(survey.id) && !selectedAllSurveys}
               disabled={selectedAllSurveys}
               onCheckedChange={() => onSelectedSurveyChange(survey.id)}

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/TriggerCheckboxGroup.tsx

@@ -15,7 +15,7 @@ export const TriggerCheckboxGroup: React.FC<TriggerCheckboxGroupProps> = ({
 }) => {
   return (
     <div className="mt-1 rounded-lg border border-slate-200">
-      <div className="grid content-center rounded-lg bg-slate-100 p-3 text-left text-sm text-slate-900">
+      <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
         {triggers.map((trigger) => (
           <div key={trigger.value} className="my-1 flex items-center space-x-2">
             <label htmlFor={trigger.value} className="flex cursor-pointer items-center">
@@ -23,6 +23,7 @@ export const TriggerCheckboxGroup: React.FC<TriggerCheckboxGroupProps> = ({
                 type="button"
                 id={trigger.value}
                 value={trigger.value}
+                className="bg-white"
                 checked={selectedTriggers.includes(trigger.value)}
                 onCheckedChange={() => {
                   onCheckboxChange(trigger.value);

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookDetailModal.tsx

@@ -1,7 +1,7 @@
 import ModalWithTabs from "@/components/shared/ModalWithTabs";
 import { TWebhook } from "@formbricks/types/v1/webhooks";
-import WebhookOverviewTab from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/WebhookOverviewTab";
-import WebhookSettingsTab from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/WebhookSettingsTab";
+import WebhookOverviewTab from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookOverviewTab";
+import WebhookSettingsTab from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookSettingsTab";
 import { TSurvey } from "@formbricks/types/v1/surveys";
 import { Webhook } from "lucide-react";
 

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookRowData.tsx

@@ -57,7 +57,7 @@ export default function WebhookRowData({ webhook, surveys }: { webhook: TWebhook
           <div className="text-left">
             {webhook.name ? (
               <div className="text-left">
-                <div className="font-medium text-slate-900">{webhook.name ? webhook.name : webhook.url}</div>
+                <div className="font-medium text-slate-900">{webhook.name}</div>
                 <div className="text-xs text-slate-400">{webhook.url}</div>
               </div>
             ) : (
@@ -66,13 +66,12 @@ export default function WebhookRowData({ webhook, surveys }: { webhook: TWebhook
           </div>
         </div>
       </div>
-      <div className="col-span-4 my-auto text-center text-sm text-slate-500">
-        <div className="font-medium text-slate-500">{renderSelectedSurveysText(webhook, surveys)}</div>
+      <div className="col-span-4 my-auto text-center text-sm text-slate-800">
+        {renderSelectedSurveysText(webhook, surveys)}
       </div>
-      <div className="col-span-2 my-auto text-center text-sm text-slate-500">
-        <div className="font-medium text-slate-500">{renderSelectedTriggersText(webhook)}</div>
+      <div className="col-span-2 my-auto text-center text-sm text-slate-800">
+        {renderSelectedTriggersText(webhook)}
       </div>
-
       <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
         {timeSinceConditionally(webhook.createdAt.toString())}
       </div>

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookSettingsTab.tsx

@@ -12,10 +12,10 @@ import { TWebhook, TWebhookInput } from "@formbricks/types/v1/webhooks";
 import { deleteWebhook, updateWebhook } from "@formbricks/lib/services/webhook";
 import { TPipelineTrigger } from "@formbricks/types/v1/pipelines";
 import { TSurvey } from "@formbricks/types/v1/surveys";
-import { testEndpoint } from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/testEndpoint";
-import { triggers } from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/HardcodedTriggers";
-import TriggerCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/TriggerCheckboxGroup";
-import SurveyCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/SurveyCheckboxGroup";
+import { testEndpoint } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/testEndpoint";
+import { triggers } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/HardcodedTriggers";
+import TriggerCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/TriggerCheckboxGroup";
+import SurveyCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/SurveyCheckboxGroup";
 
 interface ActionSettingsTabProps {
   environmentId: string;

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookTable.tsx

@@ -3,9 +3,9 @@
 import { Button } from "@formbricks/ui";
 import { useState } from "react";
 import { TWebhook } from "@formbricks/types/v1/webhooks";
-import AddWebhookModal from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/AddWebhookModal";
+import AddWebhookModal from "@/app/(app)/environments/[environmentId]/integrations/webhooks/AddWebhookModal";
 import { TSurvey } from "@formbricks/types/v1/surveys";
-import WebhookModal from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/WebhookDetailModal";
+import WebhookModal from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookDetailModal";
 import { Webhook } from "lucide-react";
 import EmptySpaceFiller from "@/components/shared/EmptySpaceFiller";
 

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/page.tsx

@@ -1,6 +1,6 @@
-import WebhookRowData from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/WebhookRowData";
-import WebhookTable from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/WebhookTable";
-import WebhookTableHeading from "@/app/(app)/environments/[environmentId]/integrations/custom-webhook/WebhookTableHeading";
+import WebhookRowData from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookRowData";
+import WebhookTable from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookTable";
+import WebhookTableHeading from "@/app/(app)/environments/[environmentId]/integrations/webhooks/WebhookTableHeading";
 import GoBackButton from "@/components/shared/GoBackButton";
 import { getSurveys } from "@formbricks/lib/services/survey";
 import { getWebhooks } from "@formbricks/lib/services/webhook";