update docs template, adjust link survey width

apps/demo/pages/app/index.tsx

@@ -72,6 +72,9 @@ export default function AppPage({}) {
               }}>
               Feedback
             </button>
+            <button className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50">
+              No Code Feedback Btn Click
+            </button>
             <button
               className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
               onClick={() => {
@@ -344,8 +347,9 @@ export default function AppPage({}) {
                     <div className="flex flex-1 justify-between sm:justify-end">
                       <a
                         href="#"
+                        id="test-css"
                         className="relative inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
-                        Previous
+                        CSS ID Test
                       </a>
                       <a
                         href="#"

apps/web/app/environments/[environmentId]/surveys/templates/templates.ts

@@ -1,17 +1,20 @@
-import { AppPieChartIcon } from "@formbricks/ui";
-import { CancelSubscriptionIcon } from "@formbricks/ui";
-import { CashCalculatorIcon } from "@formbricks/ui";
-import { DashboardIcon } from "@formbricks/ui";
-import { DogChaserIcon } from "@formbricks/ui";
-import { DoorIcon } from "@formbricks/ui";
-import { FeedbackIcon } from "@formbricks/ui";
-import { OnboardingIcon } from "@formbricks/ui";
-import { PMFIcon } from "@formbricks/ui";
-import { TaskListSearchIcon } from "@formbricks/ui";
-import { BaseballIcon } from "@formbricks/ui";
-import { CheckMarkIcon } from "@formbricks/ui";
-import { ArrowRightCircleIcon } from "@formbricks/ui";
 import type { Template } from "@formbricks/types/templates";
+import {
+  AppPieChartIcon,
+  ArrowRightCircleIcon,
+  BaseballIcon,
+  CancelSubscriptionIcon,
+  CashCalculatorIcon,
+  CheckMarkIcon,
+  CodeBookIcon,
+  DashboardIcon,
+  DogChaserIcon,
+  DoorIcon,
+  FeedbackIcon,
+  OnboardingIcon,
+  PMFIcon,
+  TaskListSearchIcon,
+} from "@formbricks/ui";
 import { createId } from "@paralleldrive/cuid2";
 
 const thankYouCardDefault = {
@@ -692,7 +695,7 @@ export const templates: Template[] = [
   },
   {
     name: "Docs Feedback",
-    icon: DashboardIcon,
+    icon: CodeBookIcon,
     category: "Product Experience",
     description: "Measure how clear each page of your developer documentation is.",
     preset: {

apps/web/app/s/[surveyId]/LinkSurvey.tsx

@@ -113,7 +113,7 @@ export default function LinkSurvey({ survey }: LinkSurveyProps) {
           loadingElement && "fb-animate-pulse fb-opacity-60",
           "flex h-full flex-1 items-center overflow-y-auto bg-white"
         )}>
-        <ContentWrapper className="w-full lg:max-w-3xl">
+        <ContentWrapper className="w-full md:max-w-2xl">
           {finished ? (
             <div>
               <Confetti colors={[survey.brandColor, "#eee"]} />

packages/ui/components/icons/CodeBookIcon.tsx

@@ -0,0 +1,44 @@
+export function CodeBookIcon(props: any) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <defs />
+      <path d="M19.5,4.5v-3a1,1,0,0,0-1-1H5.5a2,2,0,0,0,0,4Z" fill="#c4f0eb" />
+      <path d="M3.5,2.5a2,2,0,0,0,2,2h14a1,1,0,0,1,1,1v17a1,1,0,0,1-1,1H5.5a2,2,0,0,1-2-2Z" fill="#00e6ca" />
+      <path
+        d="M19.5,4.5H5.5a2,2,0,0,1-2-2v3a2,2,0,0,0,2,2h14a1,1,0,0,1,1,1v-3A1,1,0,0,0,19.5,4.5Z"
+        fill="#c4f0eb"
+      />
+      <path
+        d="M5.5,2.5h11a1,1,0,0,1,1,1v1"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.5,4.5v-3a1,1,0,0,0-1-1H5.5a2,2,0,0,0,0,4h14a1,1,0,0,1,1,1v17a1,1,0,0,1-1,1H5.5a2,2,0,0,1-2-2V2.5"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <polyline
+        points="7.5 10.504 10 13.004 7.5 15.504"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <line
+        x1={12.5}
+        y1={14.504}
+        x2={16.5}
+        y2={14.504}
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

packages/ui/index.tsx

@@ -62,6 +62,7 @@ export { CancelSubscriptionIcon } from "./components/icons/CancelSubscriptionIco
 export { CashCalculatorIcon } from "./components/icons/CashCalculatorIcon";
 export { CheckMarkIcon } from "./components/icons/CheckMarkIcon";
 export { ClockIcon } from "./components/icons/ClockIcon";
+export { CodeBookIcon } from "./components/icons/CodeBookIcon";
 export { CodeFileIcon } from "./components/icons/CodeFileIcon";
 export { ComplimentIcon } from "./components/icons/ComplimentIcon";
 export { CrossMarkIcon } from "./components/icons/CrossMarkIcon";