mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-12 01:29:42 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

ux tweaks

Browse Source
This commit is contained in:
Johannes
2023-04-28 16:27:47 +02:00
parent bcd4f953ee
commit efce2c106a
9 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard.tsx
View File

@@ -11,6 +11,9 @@ import {
CursorArrowRippleIcon,
PresentationChartBarIcon,
QueueListIcon,
StarIcon,
ChevronDownIcon,
ChevronRightIcon,
} from "@heroicons/react/24/solid";
import * as Collapsible from "@radix-ui/react-collapsible";
import { useState } from "react";
@@ -76,10 +79,10 @@ export default function QuestionCard({
className="flex-1 rounded-r-lg border border-slate-200">
<Collapsible.CollapsibleTrigger
asChild
className="flex cursor-pointer justify-between p-4 hover:bg-slate-50">
className={cn(open ? "" : "cursor-pointer hover:bg-slate-50 ", "flex justify-between p-4")}>
<div>
<div className="inline-flex">
<div className="-ml-0.5 mr-2 h-5 w-5 text-slate-400">
<div className="-ml-0.5 mr-3 h-6 w-6 text-slate-400">
{question.type === "openText" ? (
<ChatBubbleBottomCenterTextIcon />
) : question.type === "multipleChoiceSingle" ? (
@@ -90,6 +93,8 @@ export default function QuestionCard({
<PresentationChartBarIcon />
) : question.type === "cta" ? (
<CursorArrowRippleIcon />
) : question.type === "rating" ? (
<StarIcon />
) : null}
</div>
<div>
@@ -168,7 +173,12 @@ export default function QuestionCard({
) : null}
<div className="mt-4 border-t border-slate-200">
<Collapsible.Root open={openAdvanced} onOpenChange={setOpenAdvanced} className="mt-3">
<Collapsible.CollapsibleTrigger className="text-sm text-slate-800">
<Collapsible.CollapsibleTrigger className="flex items-center text-xs text-slate-700 ">
{openAdvanced ? (
<ChevronDownIcon className="mr-1 h-4 w-3" />
) : (
<ChevronRightIcon className="mr-2 h-4 w-3" />
)}
{openAdvanced ? "Hide Advanced Settings" : "Show Advanced Settings"}
</Collapsible.CollapsibleTrigger>

8
apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/RatingQuestionForm.tsx
View File

@@ -78,12 +78,12 @@ export default function RatingQuestionForm({
<div className="mt-3 flex justify-between gap-8">
<div className="flex-1">
<Label htmlFor="loweLabel">Lower label</Label>
<Label htmlFor="lowerLabel">Lower label</Label>
<div className="mt-2">
<Input
id="loweLabel"
name="loweLabel"
placeholder="Very unsatisfied"
id="lowerLabel"
name="lowerLabel"
placeholder="Not good"
value={question.lowerLabel}
onChange={(e) => updateQuestion(questionIdx, { lowerLabel: e.target.value })}
/>

2
apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/UpdateQuestionId.tsx
View File

@@ -21,7 +21,7 @@ export default function UpdateQuestionId({ localSurvey, question, questionIdx, u
return (
<div>
<Label className="block" htmlFor="questionId">
Internal Question Identifier
Question ID
</Label>
<div className="mt-2 inline-flex w-full">
<Input

4
apps/web/components/preview/NPSQuestion.tsx
View File

@@ -39,7 +39,7 @@ export default function NPSQuestion({ question, onSubmit, lastQuestion, brandCol
<Subheader subheader={question.subheader} questionId={question.id} />
<div className="my-4">
<fieldset>
<legend className="sr-only">Choices</legend>
<legend className="sr-only">Options</legend>
<div className="flex">
{Array.from({ length: 11 }, (_, i) => i).map((number) => (
<label
@@ -60,7 +60,7 @@ export default function NPSQuestion({ question, onSubmit, lastQuestion, brandCol
</label>
))}
</div>
<div className="flex justify-between text-sm font-semibold leading-6">
<div className="flex justify-between px-1.5 text-xs leading-6 text-slate-500">
<p>{question.lowerLabel}</p>
<p>{question.upperLabel}</p>
</div>

4
apps/web/components/preview/RatingQuestion.tsx
View File

@@ -46,7 +46,7 @@ export default function RatingQuestion({
<Subheader subheader={question.subheader} questionId={question.id} />
<div className="my-4">
<fieldset>
<legend className="sr-only">Choices</legend>
<legend className="sr-only">Options</legend>
<div className="flex">
{Array.from({ length: question.range }, (_, i) => i + 1).map((number) => (
<label
@@ -67,7 +67,7 @@ export default function RatingQuestion({
</label>
))}
</div>
<div className="flex justify-between text-sm font-semibold leading-6">
<div className="flex justify-between px-1.5 text-xs leading-6 text-slate-500">
<p>{question.lowerLabel}</p>
<p>{question.upperLabel}</p>
</div>

10
apps/web/lib/questions.ts
View File

@@ -1,5 +1,5 @@
import {
ArrowRightOnRectangleIcon,
CursorArrowRippleIcon,
ChatBubbleBottomCenterTextIcon,
ListBulletIcon,
PresentationChartBarIcon,
@@ -70,7 +70,7 @@ export const questionTypes: QuestionType[] = [
id: "cta",
label: "Call-to-Action",
description: "Ask your users to perform an action",
icon: ArrowRightOnRectangleIcon,
icon: CursorArrowRippleIcon,
preset: {
headline: "You are one of our power users!",
buttonLabel: "Book interview",
@@ -84,10 +84,12 @@ export const questionTypes: QuestionType[] = [
description: "Ask your users to rate something",
icon: StarIcon,
preset: {
headline: "How would you rate {{productName}}",
subheader: "Don't worry, be honest.",
scale: "number",
range: 5,
lowerLabel: "Very unsatisfied",
upperLabel: "Very satisfied",
lowerLabel: "Not good",
upperLabel: "Very good",
},
},
];

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

@@ -61,7 +61,7 @@ export default function NPSQuestion({ question, onSubmit, lastQuestion, brandCol
</label>
))}
</div>
<div className="fb-flex fb-justify-between fb-text-sm fb-font-semibold fb-leading-6">
<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>

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

@@ -68,7 +68,7 @@ export default function RatingQuestion({
</label>
))}
</div>
<div className="fb-flex fb-justify-between fb-text-sm fb-font-semibold fb-leading-6">
<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>

4
packages/ui/components/Switch.tsx
View File

@@ -11,14 +11,14 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200",
"peer inline-flex h-[20px] w-[40px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200",
className
)}
{...props}
ref={ref}>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
"pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
)}
/>
</SwitchPrimitives.Root>