feat: Slick card look (#2531)

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

apps/demo/components/SurveySwitch.tsx

@@ -13,12 +13,16 @@ export const SurveySwitch = ({ value, formbricks }: SurveySwitchProps) => {
         formbricks.logout();
         window.location.href = `/${v}`;
       }}>
-      <SelectTrigger className="w-[180px]">
+      <SelectTrigger className="w-[180px] px-4">
         <SelectValue placeholder="Theme" />
       </SelectTrigger>
       <SelectContent>
-        <SelectItem value="website">Website Surveys</SelectItem>
-        <SelectItem value="app">App Surveys</SelectItem>
+        <SelectItem value="website" className="h-10 px-4 hover:bg-slate-100">
+          Website Surveys
+        </SelectItem>
+        <SelectItem value="app" className="hover:bg-slate-10 h-10 px-4">
+          App Surveys
+        </SelectItem>
       </SelectContent>
     </Select>
   );

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

@@ -99,7 +99,7 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu
         roundness: 8,
         cardArrangement: {
           linkSurveys: "simple",
-          inAppSurveys: "simple",
+          appSurveys: "simple",
         },
       },
     });
@@ -132,7 +132,7 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu
       roundness: 8,
       cardArrangement: {
         linkSurveys: "simple",
-        inAppSurveys: "simple",
+        appSurveys: "simple",
       },
     });
 
@@ -191,16 +191,17 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu
               setOpen={setFormStylingOpen}
               styling={styling}
               setStyling={setStyling}
-              hideCheckmark
+              isSettingsPage
             />
 
             <CardStylingSettings
               open={cardStylingOpen}
               setOpen={setCardStylingOpen}
               styling={styling}
               setStyling={setStyling}
-              hideCheckmark
+              isSettingsPage
               localProduct={localProduct}
+              surveyType={previewSurveyType}
             />
 
             <BackgroundStylingCard
@@ -211,7 +212,7 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu
               environmentId={environmentId}
               colors={colors}
               key={styling.background?.bg}
-              hideCheckmark
+              isSettingsPage
               isUnsplashConfigured={isUnsplashConfigured}
             />
           </div>

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

@@ -105,9 +105,9 @@ export const ThemeStylingPreviewSurvey = ({
 
   const highlightBorderColor = product.styling.highlightBorderColor?.light;
 
-  function resetQuestionProgress() {
+  const resetQuestionProgress = () => {
     setQuestionId(survey?.questions[0]?.id);
-  }
+  };
 
   const onFileUpload = async (file: File) => file.name;
 
@@ -121,7 +121,7 @@ export const ThemeStylingPreviewSurvey = ({
   };
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-items-center">
+    <div className="flex h-full w-full flex-col items-center justify-items-center overflow-hidden">
       <motion.div
         variants={previewParentContainerVariant}
         className="fixed hidden h-[95%] w-5/6"
@@ -158,14 +158,13 @@ export const ThemeStylingPreviewSurvey = ({
             <Modal
               isOpen
               placement={placement}
-              highlightBorderColor={highlightBorderColor}
               clickOutsideClose={clickOutsideClose}
               darkOverlay={darkOverlay}
               previewMode="desktop"
               background={product.styling.cardBackgroundColor?.light}
               borderRadius={product.styling.roundness ?? 8}>
               <SurveyInline
-                survey={survey}
+                survey={{ ...survey, type: "app" }}
                 isBrandingEnabled={product.inAppSurveyBranding}
                 isRedirectDisabled={true}
                 onFileUpload={onFileUpload}
@@ -187,7 +186,7 @@ export const ThemeStylingPreviewSurvey = ({
               <div
                 className={`${product.logo?.url && !product.styling.isLogoHidden && !isFullScreenPreview ? "mt-12" : ""} z-0  w-full max-w-md rounded-lg p-4`}>
                 <SurveyInline
-                  survey={survey}
+                  survey={{ ...survey, type: "link" }}
                   isBrandingEnabled={product.linkSurveyBranding}
                   isRedirectDisabled={true}
                   onFileUpload={onFileUpload}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/BackgroundStylingCard.tsx

@@ -17,7 +17,7 @@ interface BackgroundStylingCardProps {
   styling: TSurveyStyling | TProductStyling | null;
   setStyling: React.Dispatch<React.SetStateAction<TSurveyStyling | TProductStyling>>;
   colors: string[];
-  hideCheckmark?: boolean;
+  isSettingsPage?: boolean;
   disabled?: boolean;
   environmentId: string;
   isUnsplashConfigured: boolean;
@@ -29,7 +29,7 @@ export default function BackgroundStylingCard({
   styling,
   setStyling,
   colors,
-  hideCheckmark,
+  isSettingsPage = false,
   disabled,
   environmentId,
   isUnsplashConfigured,
@@ -79,7 +79,7 @@ export default function BackgroundStylingCard({
           disabled && "cursor-not-allowed opacity-60 hover:bg-white"
         )}>
         <div className="inline-flex px-4 py-4">
-          {!hideCheckmark && (
+          {!isSettingsPage && (
             <div className="flex items-center pl-2 pr-5">
               <CheckIcon
                 strokeWidth={3}
@@ -89,10 +89,12 @@ export default function BackgroundStylingCard({
           )}
           <div className="flex flex-col">
             <div className="flex items-center gap-2">
-              <p className="font-semibold text-slate-800">Background Styling</p>
-              {hideCheckmark && <Badge text="Link Surveys" type="gray" size="normal" />}
+              <p className={cn("font-semibold text-slate-800", isSettingsPage ? "text-sm" : "text-base")}>
+                Background Styling
+              </p>
+              {isSettingsPage && <Badge text="Link Surveys" type="gray" size="normal" />}
             </div>
-            <p className="mt-1 truncate text-sm text-slate-500">
+            <p className={cn("mt-1 text-slate-500", isSettingsPage ? "text-xs" : "text-sm")}>
               Change the background to a color, image or animation.
             </p>
           </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx

@@ -7,20 +7,21 @@ import React, { useMemo } from "react";
 import { cn } from "@formbricks/lib/cn";
 import { COLOR_DEFAULTS } from "@formbricks/lib/styling/constants";
 import { TProduct, TProductStyling } from "@formbricks/types/product";
+import { TCardArrangementOptions } from "@formbricks/types/styling";
 import { TSurveyStyling, TSurveyType } from "@formbricks/types/surveys";
 import { Badge } from "@formbricks/ui/Badge";
 import { ColorPicker } from "@formbricks/ui/ColorPicker";
 import { Label } from "@formbricks/ui/Label";
 import { Slider } from "@formbricks/ui/Slider";
-import { ColorSelectorWithLabel } from "@formbricks/ui/Styling";
+import { CardArrangement, ColorSelectorWithLabel } from "@formbricks/ui/Styling";
 import { Switch } from "@formbricks/ui/Switch";
 
 type CardStylingSettingsProps = {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   styling: TSurveyStyling | TProductStyling | null;
   setStyling: React.Dispatch<React.SetStateAction<TSurveyStyling | TProductStyling>>;
-  hideCheckmark?: boolean;
+  isSettingsPage?: boolean;
   surveyType?: TSurveyType;
   disabled?: boolean;
   localProduct: TProduct;
@@ -29,7 +30,7 @@ type CardStylingSettingsProps = {
 const CardStylingSettings = ({
   setStyling,
   styling,
-  hideCheckmark,
+  isSettingsPage = false,
   surveyType,
   disabled,
   open,
@@ -43,6 +44,10 @@ const CardStylingSettings = ({
 
   const isLogoVisible = !!localProduct.logo?.url;
 
+  const linkSurveyCardArrangement = styling?.cardArrangement?.linkSurveys ?? "straight";
+
+  const inAppSurveyCardArrangement = styling?.cardArrangement?.appSurveys ?? "straight";
+
   const setCardBgColor = (color: string) => {
     setStyling((prev) => ({
       ...prev,
@@ -113,6 +118,24 @@ const CardStylingSettings = ({
     }));
   };
 
+  const setCardArrangement = (arrangement: TCardArrangementOptions, surveyType: TSurveyType) => {
+    const newCardArrangement = {
+      linkSurveys: linkSurveyCardArrangement,
+      appSurveys: inAppSurveyCardArrangement,
+    };
+
+    if (surveyType === "link") {
+      newCardArrangement.linkSurveys = arrangement;
+    } else if (surveyType === "app" || surveyType === "website") {
+      newCardArrangement.appSurveys = arrangement;
+    }
+
+    setStyling((prev) => ({
+      ...prev,
+      cardArrangement: newCardArrangement,
+    }));
+  };
+
   const toggleProgressBarVisibility = (hideProgressBar: boolean) => {
     setStyling({
       ...styling,
@@ -147,7 +170,7 @@ const CardStylingSettings = ({
           disabled && "cursor-not-allowed opacity-60 hover:bg-white"
         )}>
         <div className="inline-flex px-4 py-4">
-          {!hideCheckmark && (
+          {!isSettingsPage && (
             <div className="flex items-center pl-2 pr-5">
               <CheckIcon
                 strokeWidth={3}
@@ -157,8 +180,12 @@ const CardStylingSettings = ({
           )}
 
           <div>
-            <p className="font-semibold text-slate-800">Card Styling</p>
-            <p className="mt-1 text-sm text-slate-500">Style the survey card.</p>
+            <p className={cn("font-semibold text-slate-800", isSettingsPage ? "text-sm" : "text-base")}>
+              Card Styling
+            </p>
+            <p className={cn("mt-1 text-slate-500", isSettingsPage ? "text-xs" : "text-sm")}>
+              Style the survey card.
+            </p>
           </div>
         </div>
       </Collapsible.CollapsibleTrigger>
@@ -198,6 +225,12 @@ const CardStylingSettings = ({
             description="Change the shadow color of the card."
           />
 
+          <CardArrangement
+            surveyType={isAppSurvey ? "app" : "link"}
+            activeCardArrangement={isAppSurvey ? inAppSurveyCardArrangement : linkSurveyCardArrangement}
+            setActiveCardArrangement={setCardArrangement}
+          />
+
           <>
             <div className="flex items-center space-x-1">
               <Switch
@@ -215,14 +248,14 @@ const CardStylingSettings = ({
               </Label>
             </div>
 
-            {isLogoVisible && (!surveyType || surveyType === "link") && (
+            {isLogoVisible && (!surveyType || surveyType === "link") && !isSettingsPage && (
               <div className="flex items-center space-x-1">
                 <Switch id="isLogoHidden" checked={isLogoHidden} onCheckedChange={toggleLogoVisibility} />
                 <Label htmlFor="isLogoHidden" className="cursor-pointer">
                   <div className="ml-2 flex flex-col">
                     <div className="flex items-center gap-2">
                       <h3 className="text-sm font-semibold text-slate-700">Hide logo</h3>
-                      {hideCheckmark && <Badge text="Link Surveys" type="gray" size="normal" />}
+                      <Badge text="Link Surveys" type="gray" size="normal" />
                     </div>
                     <p className="text-xs font-normal text-slate-500">
                       Hides the logo in this specific survey
@@ -238,8 +271,15 @@ const CardStylingSettings = ({
                   <Switch checked={isHighlightBorderAllowed} onCheckedChange={setIsHighlightBorderAllowed} />
                   <div className="flex flex-col">
                     <div className="flex items-center gap-2">
-                      <h3 className="text-sm font-semibold text-slate-700">Add highlight border</h3>
-                      <Badge text="In-App and Website Surveys" type="gray" size="normal" />
+                      <h3 className="whitespace-nowrap text-sm font-semibold text-slate-700">
+                        Add highlight border
+                      </h3>
+                      <Badge
+                        text="App & Website Surveys"
+                        type="gray"
+                        size="normal"
+                        className="whitespace-nowrap"
+                      />
                     </div>
                     <p className="text-xs text-slate-500">Add an outer border to your survey card.</p>
                   </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx

@@ -17,15 +17,15 @@ type FormStylingSettingsProps = {
   setStyling: React.Dispatch<React.SetStateAction<TSurveyStyling | TProductStyling>>;
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  hideCheckmark?: boolean;
+  isSettingsPage?: boolean;
   disabled?: boolean;
 };
 
 const FormStylingSettings = ({
   styling,
   setStyling,
   open,
-  hideCheckmark = false,
+  isSettingsPage = false,
   disabled = false,
   setOpen,
 }: FormStylingSettingsProps) => {
@@ -134,7 +134,7 @@ const FormStylingSettings = ({
           disabled && "cursor-not-allowed opacity-60 hover:bg-white"
         )}>
         <div className="inline-flex px-4 py-4">
-          {!hideCheckmark && (
+          {!isSettingsPage && (
             <div className="flex items-center pl-2 pr-5">
               <CheckIcon
                 strokeWidth={3}
@@ -144,8 +144,10 @@ const FormStylingSettings = ({
           )}
 
           <div>
-            <p className="font-semibold text-slate-800">Form Styling</p>
-            <p className="mt-1 text-sm text-slate-500">
+            <p className={cn("font-semibold text-slate-800", isSettingsPage ? "text-sm" : "text-base")}>
+              Form Styling
+            </p>
+            <p className={cn("mt-1 text-slate-500", isSettingsPage ? "text-xs" : "text-sm")}>
               Style the question texts, descriptions and input fields.
             </p>
           </div>

apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx

@@ -1,5 +1,5 @@
 import { getPlacementStyle } from "@/app/lib/preview";
-import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 
 import { cn } from "@formbricks/lib/cn";
 import { TPlacement } from "@formbricks/types/common";
@@ -9,7 +9,6 @@ export default function Modal({
   isOpen,
   placement,
   previewMode,
-  highlightBorderColor,
   clickOutsideClose,
   darkOverlay,
   borderRadius,
@@ -19,7 +18,6 @@ export default function Modal({
   isOpen: boolean;
   placement: TPlacement;
   previewMode: string;
-  highlightBorderColor: string | null | undefined;
   clickOutsideClose: boolean;
   darkOverlay: boolean;
   borderRadius?: number;
@@ -102,14 +100,6 @@ export default function Modal({
     };
   }, [clickOutsideClose, scalingClasses.transformOrigin]);
 
-  const highlightBorderColorStyle = useMemo(() => {
-    if (!highlightBorderColor) return;
-
-    return {
-      border: `2px solid ${highlightBorderColor}`,
-    };
-  }, [highlightBorderColor]);
-
   useEffect(() => {
     setShow(isOpen);
   }, [isOpen]);
@@ -144,7 +134,6 @@ export default function Modal({
       <div
         ref={modalRef}
         style={{
-          ...highlightBorderColorStyle,
           ...scalingClasses,
           ...(borderRadius && {
             borderRadius: `${borderRadius}px`,
@@ -154,7 +143,7 @@ export default function Modal({
           }),
         }}
         className={cn(
-          "no-scrollbar pointer-events-auto absolute h-fit max-h-[90%] w-full max-w-sm bg-white shadow-lg transition-all duration-500 ease-in-out ",
+          "no-scrollbar pointer-events-auto absolute h-fit max-h-[90%] w-full max-w-sm transition-all duration-500 ease-in-out ",
           previewMode === "desktop" ? getPlacementStyle(placement) : "max-w-full",
           slidingAnimationClass
         )}>