mirror of
https://github.com/formbricks/formbricks.git
synced 2025-12-30 10:19:51 -06:00
fix: made ui changes
This commit is contained in:
Anjy Gupta
@@ -18,17 +18,16 @@ export default function ColorSurveyBg({ localSurvey, handleBgChange, colours }:
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-2 mt-4 rounded-lg border bg-slate-50 p-4">
|
||||
<div className="w-full max-w-xs">
|
||||
<Label htmlFor="brandcolor">Color (HEX)</Label>
|
||||
<ColorPicker color={color} onChange={handleBg} />
|
||||
</div>
|
||||
<div className="w-full max-w-xs py-2">
|
||||
<ColorPicker color={color} onChange={handleBg} />
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="grid grid-cols-10 gap-4">
|
||||
{colours.map((x) => {
|
||||
return (
|
||||
<div
|
||||
className={`h-16 w-16 cursor-pointer ${color === x ? "border-4 border-slate-500" : ""}`}
|
||||
className={`h-16 w-16 cursor-pointer rounded-lg ${
|
||||
color === x ? "border-4 border-slate-500" : ""
|
||||
}`}
|
||||
key={x}
|
||||
style={{ backgroundColor: `${x}` }}
|
||||
onClick={() => handleBg(x)}></div>
|
||||
|
||||
@@ -9,7 +9,7 @@ interface ImageSurveyBgBgProps {
|
||||
export default function ImageSurveyBg({ localSurvey, handleBgChange }: ImageSurveyBgBgProps) {
|
||||
return (
|
||||
<div className="mb-2 mt-4 w-full rounded-lg border bg-slate-50 p-4">
|
||||
<div className="mt-3 flex w-full items-center justify-center">
|
||||
<div className="flex w-full items-center justify-center">
|
||||
<FileInput
|
||||
id="choices-file-input"
|
||||
allowedFileExtensions={["png", "jpeg", "jpg"]}
|
||||
|
||||
@@ -9,9 +9,7 @@ import { CheckCircleIcon } from "@heroicons/react/24/solid";
|
||||
import * as Collapsible from "@radix-ui/react-collapsible";
|
||||
import { useState } from "react";
|
||||
import Placement from "./Placement";
|
||||
import ColorSurveyBg from "./ColorSurveyBg";
|
||||
import ImageSurveyBg from "./ImageSurveyBg";
|
||||
import AnimatedSurveyBg from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg";
|
||||
import SurveyBgSelectorTab from "./SurveyBgSelectorTab";
|
||||
|
||||
interface StylingCardProps {
|
||||
localSurvey: TSurvey;
|
||||
@@ -200,82 +198,65 @@ export default function StylingCard({ localSurvey, setLocalSurvey, colours }: St
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Background */}
|
||||
<div className="p-3">
|
||||
<div className="ml-2 flex items-center space-x-1">
|
||||
<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">
|
||||
Pick a background from our library or upload your own.
|
||||
</p>
|
||||
{type == "link" && (
|
||||
<>
|
||||
{/* Background */}
|
||||
<div className="p-3">
|
||||
<div className="ml-2 flex items-center space-x-1">
|
||||
<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">
|
||||
Pick a background from our library or upload your own.
|
||||
</p>
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
{bg && (
|
||||
<div className="mt-4 flex flex-col items-center justify-center rounded-lg border bg-slate-50 p-4 px-8">
|
||||
<div className="flex w-full items-center justify-between border bg-slate-50 px-6">
|
||||
<button
|
||||
className={tab === "image" ? "rounded-md bg-white p-2" : "rounded-md p-2"}
|
||||
onClick={() => setTab("image")}>
|
||||
Image
|
||||
</button>
|
||||
<button
|
||||
className={tab === "animation" ? "rounded-md bg-white p-2" : "rounded-md p-2"}
|
||||
onClick={() => setTab("animation")}>
|
||||
Animation
|
||||
</button>
|
||||
<button
|
||||
className={tab === "color" ? "rounded-md bg-white p-2" : "rounded-md p-2"}
|
||||
onClick={() => setTab("color")}>
|
||||
Color
|
||||
</button>
|
||||
</div>
|
||||
{tab == "image" ? (
|
||||
<ImageSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
|
||||
) : tab == "animation" ? (
|
||||
<AnimatedSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
|
||||
) : (
|
||||
<ColorSurveyBg
|
||||
{bg && (
|
||||
<SurveyBgSelectorTab
|
||||
localSurvey={localSurvey}
|
||||
handleBgChange={handleBgChange}
|
||||
colours={colours}
|
||||
/>
|
||||
)}
|
||||
</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"
|
||||
{/* 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>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{/* positioning */}
|
||||
{type !== "link" && (
|
||||
<div className="p-3 ">
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { useState } from "react";
|
||||
import ImageSurveyBg from "./ImageSurveyBg";
|
||||
import AnimatedSurveyBg from "./AnimatedSurveyBg";
|
||||
import ColorSurveyBg from "./ColorSurveyBg";
|
||||
import { TSurvey } from "@formbricks/types/surveys";
|
||||
|
||||
interface SurveyBgSelectorTabProps {
|
||||
localSurvey: TSurvey;
|
||||
handleBgChange: (bg: string, bgType: string) => void;
|
||||
colours: string[];
|
||||
}
|
||||
|
||||
export default function SurveyBgSelectorTab({
|
||||
localSurvey,
|
||||
handleBgChange,
|
||||
colours,
|
||||
}: SurveyBgSelectorTabProps) {
|
||||
const [tab, setTab] = useState("image");
|
||||
|
||||
return (
|
||||
<div className="mt-4 flex flex-col items-center justify-center rounded-lg border bg-slate-50 p-4 px-8">
|
||||
<div className="flex w-full items-center justify-between rounded-lg border border-slate-300 bg-slate-50 px-6 py-1.5">
|
||||
<button
|
||||
className={
|
||||
tab === "image"
|
||||
? "w-1/4 rounded-md bg-white p-2 text-sm font-medium leading-none text-slate-800 shadow-sm"
|
||||
: "w-1/4 rounded-md p-2 text-sm font-medium leading-none text-slate-800"
|
||||
}
|
||||
onClick={() => setTab("image")}>
|
||||
Image
|
||||
</button>
|
||||
<button
|
||||
className={
|
||||
tab === "animation"
|
||||
? "w-1/4 rounded-md bg-white p-2 text-sm font-medium leading-none text-slate-800 shadow-sm"
|
||||
: "w-1/4 rounded-md p-2 text-sm font-medium leading-none text-slate-800"
|
||||
}
|
||||
onClick={() => setTab("animation")}>
|
||||
Animation
|
||||
</button>
|
||||
<button
|
||||
className={
|
||||
tab === "color"
|
||||
? "w-1/4 rounded-md bg-white p-2 text-sm font-medium leading-none text-slate-800 shadow-sm"
|
||||
: "w-1/4 rounded-md p-2 text-sm font-medium leading-none text-slate-800"
|
||||
}
|
||||
onClick={() => setTab("color")}>
|
||||
Color
|
||||
</button>
|
||||
</div>
|
||||
{tab === "image" ? (
|
||||
<ImageSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
|
||||
) : tab === "animation" ? (
|
||||
<AnimatedSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
|
||||
) : (
|
||||
<ColorSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} colours={colours} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -53,14 +53,15 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
|
||||
</div>
|
||||
) : (
|
||||
<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: "#ffff",
|
||||
filter: survey.surveyBackground?.brightness
|
||||
? `brightness(${survey.surveyBackground.brightness}%)`
|
||||
: "none",
|
||||
}}>
|
||||
<div className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6">
|
||||
<div
|
||||
className="absolute inset-0 h-full w-full object-cover"
|
||||
style={{
|
||||
backgroundColor: "#ffff",
|
||||
filter: survey.surveyBackground?.brightness
|
||||
? `brightness(${survey.surveyBackground.brightness}%)`
|
||||
: "none",
|
||||
}}></div>
|
||||
<div className="flex h-full w-full items-center justify-center">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -170,7 +170,7 @@ export function Survey({
|
||||
return (
|
||||
<>
|
||||
<AutoCloseWrapper survey={survey} brandColor={brandColor} onClose={onClose}>
|
||||
<div className="flex h-full w-full flex-col justify-between rounded-2xl bg-white px-6 pb-3 pt-6">
|
||||
<div className="flex h-full w-full flex-col justify-between rounded-lg bg-white px-6 pb-3 pt-6 shadow-lg">
|
||||
<div ref={contentRef} className={cn(loadingElement ? "animate-pulse opacity-60" : "", "my-auto")}>
|
||||
{survey.questions.length === 0 && !survey.welcomeCard.enabled && !survey.thankYouCard.enabled ? (
|
||||
// Handle the case when there are no questions and both welcome and thank you cards are disabled
|
||||
|
||||
Reference in New Issue
Block a user