mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-20 11:22:55 -05:00
Code Issues Packages Projects Releases 164 Wiki Activity

Fix formbricks-js labels not showing correctly with custom label styles

Browse Source
This commit is contained in:
Matthias Nannt
2023-08-02 16:59:57 +02:00
parent 73904e11a6
commit 235c1afe28
5 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/js/src/components/ConsentQuestion.tsx
View File

@@ -59,7 +59,7 @@ export default function ConsentQuestion({
e.preventDefault();
handleSumbit(answer);
}}>
<label className="fb-relative fb-z-10 fb-mt-4 fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-rounded-md fb-border fb-border-gray-200 fb-bg-slate-50 fb-p-4 fb-text-sm focus:fb-outline-none">
<label className="fb-relative fb-z-10 fb-mt-4 fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-rounded-md fb-border fb-border-gray-200 fb-bg-slate-50 fb-p-4 fb-text-sm focus:fb-outline-none fb-text-slate-800">
<input
type="checkbox"
id={question.id}

2
packages/js/src/components/MultipleChoiceMultiQuestion.tsx
View File

@@ -124,7 +124,7 @@ export default function MultipleChoiceMultiQuestion({
selectedChoices.includes(choice.label)
? "fb-z-10 fb-border-slate-400 fb-bg-slate-50"
: "fb-border-gray-200",
"fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-space-y-3 fb-rounded-md fb-border fb-p-4 hover:fb-bg-slate-50 focus:fb-outline-none"
"fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-space-y-3 fb-rounded-md fb-border fb-p-4 hover:fb-bg-slate-50 focus:fb-outline-none fb-text-slate-800"
)}>
<span className="fb-flex fb-items-center fb-text-sm">
<input

2
packages/js/src/components/MultipleChoiceSingleQuestion.tsx
View File

@@ -107,7 +107,7 @@ export default function MultipleChoiceSingleQuestion({
selectedChoice === choice.label
? "fb-z-10 fb-bg-slate-50 fb-border-slate-400"
: "fb-border-gray-200",
"fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-rounded-md fb-border fb-p-4 focus:fb-outline-none hover:bg-slate-50"
"fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-rounded-md fb-border fb-p-4 focus:fb-outline-none hover:bg-slate-50 fb-text-slate-800"
)}>
<span className="fb-flex fb-items-center fb-text-sm">
<input

2
packages/js/src/components/NPSQuestion.tsx
View File

@@ -72,7 +72,7 @@ export default function NPSQuestion({
key={number}
className={cn(
selectedChoice === number ? "fb-z-10 fb-border-slate-400 fb-bg-slate-50" : "",
"fb-relative fb-h-10 fb-flex-1 fb-cursor-pointer fb-border fb-bg-white fb-text-center fb-text-sm fb-leading-10 first:fb-rounded-l-md last:fb-rounded-r-md hover:fb-bg-gray-100 focus:fb-outline-none"
"fb-relative fb-h-10 fb-flex-1 fb-cursor-pointer fb-border fb-bg-white fb-text-center fb-text-sm fb-leading-10 first:fb-rounded-l-md last:fb-rounded-r-md hover:fb-bg-gray-100 focus:fb-outline-none fb-text-slate-800"
)}>
<input
type="radio"

6
packages/js/src/components/RatingQuestion.tsx
View File

@@ -105,7 +105,7 @@ export default function RatingQuestion({
selectedChoice === number ? "fb-z-10 fb-border-slate-400 fb-bg-slate-50" : "",
a.length === number ? "fb-rounded-r-md" : "",
number === 1 ? "fb-rounded-l-md" : "",
"fb-block fb-h-full fb-w-full fb-border hover:fb-bg-gray-100 focus:fb-outline-none"
"fb-block fb-h-full fb-w-full fb-border hover:fb-bg-gray-100 focus:fb-outline-none fb-text-slate-800"
)}>
<HiddenRadioInput number={number} />
{number}
@@ -148,7 +148,7 @@ export default function RatingQuestion({
)}
</label>
) : (
<label className="fb-flex fb-h-full fb-w-full fb-justify-center">
<label className="fb-flex fb-h-full fb-w-full fb-justify-center fb-text-slate-800">
<HiddenRadioInput number={number} />
<RatingSmiley
active={selectedChoice == number || hoveredNumber == number}
@@ -160,7 +160,7 @@ export default function RatingQuestion({
</span>
))}
</div>
<div className="fb-flex fb-justify-between fb-text-slate-500 fb-leading-6 fb-px-1.5 fb-text-xs">
<div className="fb-flex fb-justify-between fb-text-slate-500 fb-leading-6 fb-px-1.5 fb-text-xs">
<p>{question.lowerLabel}</p>
<p>{question.upperLabel}</p>
</div>