fix: added overlay

2025-12-30 02:10:12 -06:00 · 2023-10-31 01:33:34 +05:30
parent 8d028cdf45
commit 2213adb24a
8 changed files with 174 additions and 52 deletions
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx
@@ -95,6 +95,7 @@ export default function AnimatedSurveyBg({ localSurvey, handleBgChange }: Animat
                className="absolute right-2 top-2 h-4 w-4 rounded-sm bg-white "
                type="checkbox"
                checked={color === value}
+                onChange={() => handleBg(value)}
              />
            </div>
          );
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx
@@ -14,10 +14,10 @@ export default function ImageSurveyBg({ localSurvey, handleBgChange }: ImageSurv
          id="choices-file-input"
          allowedFileExtensions={["png", "jpeg", "jpg"]}
          environmentId={localSurvey?.environmentId}
-          onFileUpload={(url: string) => {
-            handleBgChange(url, "image");
+          onFileUpload={(url: string[]) => {
+            handleBgChange(url[0], "image");
          }}
-          fileUrl={localSurvey?.welcomeCard?.fileUrl}
+          // fileUrl={localSurvey?.surveyBackground?.bg}
        />
      </div>
    </div>
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx
@@ -23,10 +23,17 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard

  const { type, productOverwrites, surveyBackground } = localSurvey;
  const { brandColor, clickOutside, darkOverlay, placement, highlightBorderColor } = productOverwrites ?? {};
-  const { bg, bgType } = surveyBackground ?? {};
+  const { bg, bgType, brightness } = surveyBackground ?? {};

  const [tab, setTab] = useState(bgType || "image");

+  const [inputValue, setInputValue] = useState(100);
+
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+    handleBrightnessChange(parseInt(e.target.value));
+  };
+
  const togglePlacement = () => {
    setLocalSurvey({
      ...localSurvey,
@@ -58,6 +65,17 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
    });
  };

+  const toggleBrightness = () => {
+    setLocalSurvey({
+      ...localSurvey,
+      surveyBackground: {
+        ...localSurvey.surveyBackground,
+        brightness: !!brightness ? undefined : 100,
+      },
+    });
+    setInputValue(100);
+  };
+
  const toggleHighlightBorderColor = () => {
    setLocalSurvey({
      ...localSurvey,
@@ -79,6 +97,7 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
  };

  const handleBgChange = (color: string, type: string) => {
+    setInputValue(100);
    setLocalSurvey({
      ...localSurvey,
      surveyBackground: {
@@ -89,6 +108,16 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
    });
  };

+  const handleBrightnessChange = (percent: number) => {
+    setLocalSurvey({
+      ...localSurvey,
+      surveyBackground: {
+        ...localSurvey.surveyBackground,
+        brightness: percent,
+      },
+    });
+  };
+
  const handleBorderColorChange = (color: string) => {
    setLocalSurvey({
      ...localSurvey,
@@ -173,8 +202,8 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
          {/* Background */}
          <div className="p-3">
            <div className="ml-2 flex items-center space-x-1">
-              <Switch id="autoComplete" checked={!!bg} onCheckedChange={toggleBackgroundColor} />
-              <Label htmlFor="autoComplete" className="cursor-pointer">
+              <Switch id="autoCompleteBg" checked={!!bg} onCheckedChange={toggleBackgroundColor} />
+              <Label htmlFor="autoCompleteBg" className="cursor-pointer">
                <div className="ml-2">
                  <h3 className="text-sm font-semibold text-slate-700">Change Background</h3>
                  <p className="text-xs font-normal text-slate-500">
@@ -212,6 +241,36 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
              </div>
            )}
          </div>
+          {/* Overlay */}
+          <div className="p-3">
+            <div className="ml-2 flex items-center space-x-1">
+              <Switch id="autoCompleteOverlay" checked={!!brightness} onCheckedChange={toggleBrightness} />
+              <Label htmlFor="autoCompleteOverlay" className="cursor-pointer">
+                <div className="ml-2">
+                  <h3 className="text-sm font-semibold text-slate-700">Background Overlay</h3>
+                  <p className="text-xs font-normal text-slate-500">
+                    Darken or lighten background of your choice.
+                  </p>
+                </div>
+              </Label>
+            </div>
+            {brightness && (
+              <div>
+                <div className="mt-4 flex flex-col justify-center rounded-lg border bg-slate-50 p-4 px-8">
+                  <h3 className="mb-4 text-sm font-semibold text-slate-700">Transparency</h3>
+                  <input
+                    id="small-range"
+                    type="range"
+                    min="1"
+                    max="200"
+                    value={inputValue}
+                    onChange={handleInputChange}
+                    className="range-sm mb-6 h-1 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
          {/* positioning */}
          {type !== "link" && (
            <div className="p-3 ">
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx
@@ -3,9 +3,13 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
    <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
      <div
        className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
-        style={{ backgroundColor: survey.surveyBackground.bg || "#ffff" }}>
-        {children}
-      </div>
+        style={{
+          backgroundColor: survey.surveyBackground.bg || "#ffff",
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute flex h-full w-full items-center justify-center">{children}</div>
    </div>
  ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
    <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
@@ -13,22 +17,34 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
        className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
        style={{
          background: `url(${survey.surveyBackground.bg}) no-repeat center center fixed`,
-          // backgroundSize: 'cover',
        }}>
-        <video muted loop autoPlay className="absolute inset-0 h-full w-full object-cover">
+        <video
+          muted
+          loop
+          autoPlay
+          className="absolute inset-0 h-full w-full object-cover"
+          style={{
+            filter: survey.surveyBackground.brightness
+              ? `brightness(${survey.surveyBackground.brightness}%)`
+              : "none",
+          }}>
          <source src={survey.surveyBackground.bg} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
-        {children}
+        <div className="flex h-full w-full items-center justify-center">{children}</div>
      </div>
    </div>
  ) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? (
    <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
      <div
        className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
-        style={{ backgroundImage: `url(${survey.surveyBackground.bg})` }}>
-        {children}
-      </div>
+        style={{
+          backgroundImage: `url(${survey.surveyBackground.bg})`,
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute flex h-full w-full items-center justify-center">{children}</div>
    </div>
  ) : (
    <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx
@@ -1,22 +1,24 @@
 export default function PreviewSurveyBgMobile({ children, survey, ContentRef }) {
-  console.log(survey.surveyBackground);
-
  return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? (
-    <div
-      className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500"
-      style={{ backgroundColor: survey.surveyBackground.bg }}>
+    <div className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500">
      <div
-        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
-        ref={ContentRef}>
-        <div className="relative flex w-full flex-grow flex-col items-center justify-center">{children}</div>
+        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col"
+        ref={ContentRef}
+        style={{
+          backgroundColor: survey.surveyBackground.bg,
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute flex h-full w-full items-center justify-center overflow-y-auto">
+        {children}
      </div>
    </div>
  ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
    <div className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500">
      <div
        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
-        ref={ContentRef}
-        style={{ position: "relative" }}>
+        ref={ContentRef}>
        <div className="relative flex w-full flex-grow flex-col items-center justify-center">
          <div className="absolute inset-0 h-full w-full object-cover">
            <video
@@ -24,7 +26,13 @@ export default function PreviewSurveyBgMobile({ children, survey, ContentRef })
              loop
              autoPlay
              className="h-full w-full object-cover"
-              style={{ width: "100%", height: "100%" }}>
+              style={{
+                width: "100%",
+                height: "100%",
+                filter: survey.surveyBackground.brightness
+                  ? `brightness(${survey.surveyBackground.brightness}%)`
+                  : "none",
+              }}>
              <source src={survey.surveyBackground.bg} type="video/mp4" />
              Your browser does not support the video tag.
            </video>
@@ -34,23 +42,33 @@ export default function PreviewSurveyBgMobile({ children, survey, ContentRef })
      </div>
    </div>
  ) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? (
-    <div
-      className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500"
-      style={{ backgroundImage: `url(${survey.surveyBackground.bg})` }}>
+    <div className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500">
      <div
        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
-        ref={ContentRef}>
-        <div className="relative flex w-full flex-grow flex-col items-center justify-center">{children}</div>
+        ref={ContentRef}
+        style={{
+          backgroundImage: `url(${survey.surveyBackground.bg})`,
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute flex h-full w-full items-center justify-center overflow-y-auto">
+        {children}
      </div>
    </div>
  ) : (
-    <div
-      className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500"
-      style={{ backgroundColor: "#ffff" }}>
+    <div className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500">
      <div
-        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
-        ref={ContentRef}>
-        <div className="relative flex w-full flex-grow flex-col items-center justify-center">{children}</div>
+        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col"
+        ref={ContentRef}
+        style={{
+          backgroundColor: "#ffff",
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute flex h-full w-full items-center justify-center overflow-y-auto">
+        {children}
      </div>
    </div>
  );
--- a/apps/web/app/s/[surveyId]/components/SurveyBg.tsx
+++ b/apps/web/app/s/[surveyId]/components/SurveyBg.tsx
@@ -1,30 +1,57 @@
 export default async function SurveyBg({ children, survey }) {
  return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? (
-    <div
-      className={`flex h-full items-center justify-center `}
-      style={{ backgroundColor: `${survey.surveyBackground?.bg}` }}>
-      <div className="h-[60%]">{children}</div>
+    <div className={`flex h-full items-center justify-center `}>
+      <div
+        className={`flex h-full w-full`}
+        style={{
+          backgroundColor: `${survey.surveyBackground?.bg}`,
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute h-[60%]">{children}</div>
    </div>
  ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
    <div className={`flex h-full items-center justify-center `}>
-      <video muted loop autoPlay className="fixed left-0 top-0 -z-50 h-full w-full object-cover">
+      <video
+        muted
+        loop
+        autoPlay
+        className="fixed left-0 top-0 -z-50 h-full w-full object-cover"
+        style={{
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}>
        <source src={survey.surveyBackground?.bg} type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <div className="h-[60%]">{children}</div>
    </div>
  ) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? (
-    <div
-      className={`flex h-full items-center justify-center `}
-      style={{
-        backgroundImage: `url(${survey.surveyBackground?.bg})`,
-        backgroundSize: "inherit",
-      }}>
-      <div className="h-[60%]">{children}</div>
+    <div className={`flex h-full items-center justify-center `}>
+      <div
+        className={`flex h-full w-full`}
+        style={{
+          backgroundImage: `url(${survey.surveyBackground?.bg})`,
+          backgroundSize: "inherit",
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute h-[60%]">{children}</div>
    </div>
  ) : (
-    <div className={`flex h-full items-center justify-center `} style={{ backgroundColor: "#ffff" }}>
-      <div className="h-[60%]">{children}</div>
+    <div className={`flex h-full items-center justify-center `}>
+      <div
+        className={`flex h-full w-full`}
+        style={{
+          backgroundColor: "#ffff",
+          filter: survey.surveyBackground.brightness
+            ? `brightness(${survey.surveyBackground.brightness}%)`
+            : "none",
+        }}></div>
+      <div className="absolute h-[60%]">{children}</div>
    </div>
  );
 }
--- a/packages/types/surveys.ts
+++ b/packages/types/surveys.ts
@@ -44,6 +44,7 @@ export const ZSurveyProductOverwrites = z.object({
 export const ZSurveyBackground = z.object({
  bg: z.string().nullish(),
  bgType: z.string().nullish(),
+  brightness: z.number().nullish(),
  // darkOverlay: z.boolean().nullish(),
 });

--- a/packages/ui/FileInput/index.tsx
+++ b/packages/ui/FileInput/index.tsx
@@ -17,7 +17,7 @@ interface FileInputProps {
  id: string;
  allowedFileExtensions: TAllowedFileExtensions[];
  environmentId: string | undefined;
-  onFileUpload: (uploadedUrl: string[] | string | undefined) => void;
+  onFileUpload: (uploadedUrl: string[] | undefined) => void;
  fileUrl?: string | string[];
  multiple?: boolean;
 }