feat: Advanced Custom Styling (#2182)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

apps/demo/pages/app/index.tsx

@@ -96,7 +96,7 @@ export default function AppPage({}) {
                   {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}
                 </strong>
                 <span className="relative ml-2 flex h-3 w-3">
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
                   <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
                 </span>
               </div>

apps/formbricks-com/components/shared/APILayout.tsx

@@ -54,7 +54,7 @@ export function APILayout({ method, url, description, headers, bodies, responses
         className={clsx(
           "mr-3 inline rounded-full p-1 px-3 font-semibold text-white",
           method === "POST" && "bg-red-400 dark:bg-red-800",
-          method === "GET" && "bg-green-400 dark:bg-green-800"
+          method === "GET" && "bg-green-500 dark:bg-green-800"
         )}>
         {method}
       </div>
@@ -174,7 +174,7 @@ function Response({ color, statusCode, description, example }: RespProps) {
         <div
           className={clsx(
             "mr-3 inline h-3 w-3 rounded-full",
-            color === "green" && "bg-green-400",
+            color === "green" && "bg-green-500",
             color === "brown" && "bg-amber-800"
           )}>
           &nbsp;

apps/web/app/(app)/environments/[environmentId]/settings/components/SettingsCard.tsx

@@ -8,16 +8,18 @@ export default function SettingsCard({
   soon = false,
   noPadding = false,
   beta,
+  className,
 }: {
   title: string;
   description: string;
   children: any;
   soon?: boolean;
   noPadding?: boolean;
   beta?: boolean;
+  className?: string;
 }) {
   return (
-    <div className="my-4 w-full bg-white shadow sm:rounded-lg">
+    <div className={cn("my-4 w-full max-w-4xl bg-white shadow sm:rounded-lg", className)}>
       <div className="border-b border-slate-200 bg-slate-100 px-6 py-5">
         <div className="flex">
           <h3 className="text-lg font-medium leading-6 text-slate-900">{title}</h3>

apps/web/app/(app)/environments/[environmentId]/settings/layout.tsx

@@ -49,7 +49,7 @@ export default async function SettingsLayout({ children, params }) {
           isMultiLanguageAllowed={isMultiLanguageAllowed}
         />
         <div className="w-full md:ml-64">
-          <div className="max-w-4xl px-20 pb-6 pt-14 md:pt-6">
+          <div className="max-w-7xl px-20 pb-6 pt-14 md:pt-6">
             <div>{children}</div>
           </div>
         </div>