mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-25 10:30:30 -06:00
Code Issues Packages Projects Releases 119 Wiki Activity

fix: tweak rating UI after fix (#1834)

Browse Source
This commit is contained in:
Johannes
2023-12-27 11:57:17 -07:00
committed by GitHub
parent 5e1822c9e6
commit 8896cbcd87
2 changed files with 27 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/surveys/src/components/general/Smileys.tsx
View File

@@ -3,7 +3,7 @@ import { FunctionComponent } from "preact";
export const TiredFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
return (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={36} height={36}>
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
<g id="line">
<circle
cx="36"
@@ -64,7 +64,7 @@ export const TiredFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>>
export const WearyFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
return (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={36} height={36}>
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
<g id="line">
<circle
cx="36"
@@ -125,7 +125,7 @@ export const WearyFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>>
export const PerseveringFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
return (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={36} height={36}>
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
<g id="line">
<circle
cx="36"
@@ -195,7 +195,7 @@ export const PerseveringFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElem
export const FrowningFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
return (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={36} height={36}>
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
<g id="line">
<circle
cx="36"
@@ -225,7 +225,7 @@ export const FrowningFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement
export const ConfusedFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
return (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={36} height={36}>
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
<g id="line">
<circle
cx="36"
@@ -254,7 +254,7 @@ export const ConfusedFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement
export const NeutralFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
return (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={36} height={36}>
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
<g id="line">
<circle
cx="36"
@@ -287,7 +287,7 @@ export const NeutralFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>
export const SlightlySmilingFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
return (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={36} height={36}>
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
<g id="line">
<circle
cx="36"
@@ -319,7 +319,7 @@ export const SmilingFaceWithSmilingEyes: FunctionComponent<JSX.HTMLAttributes<SV
props
) => {
return (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={36} height={36}>
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
<g id="line">
<circle
cx="36"
@@ -365,7 +365,7 @@ export const GrinningFaceWithSmilingEyes: FunctionComponent<JSX.HTMLAttributes<S
props
) => {
return (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={36} height={36}>
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
<g id="line">
<circle
cx="36"
@@ -417,7 +417,7 @@ export const GrinningFaceWithSmilingEyes: FunctionComponent<JSX.HTMLAttributes<S
export const GrinningSquintingFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
return (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={36} height={36}>
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
<g id="line">
<circle
cx="36"
@@ -469,5 +469,5 @@ export const GrinningSquintingFace: FunctionComponent<JSX.HTMLAttributes<SVGCirc
};
export let icons = [
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={36} height={36}></svg>,
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}></svg>,
];

50
packages/surveys/src/components/questions/RatingQuestion.tsx
View File

@@ -89,16 +89,16 @@ export default function RatingQuestion({
{question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
<Headline headline={question.headline} questionId={question.id} required={question.required} />
<Subheader subheader={question.subheader} questionId={question.id} />
<div className="mb-4 mt-8 flex items-center justify-center">
<div className="mb-4 mt-6 flex items-center justify-center">
<fieldset className="w-full ">
<legend className="sr-only">Choices</legend>
<div className="flex justify-around">
<div className="flex pb-2">
{Array.from({ length: question.range }, (_, i) => i + 1).map((number, i, a) => (
<span
key={number}
onMouseOver={() => setHoveredNumber(number)}
onMouseLeave={() => setHoveredNumber(0)}
className="bg-survey-bg relative max-h-10 flex-1 cursor-pointer text-center text-sm leading-10">
className="bg-survey-bg relative flex-1 cursor-pointer text-center text-sm leading-[2.8rem]">
{question.scale === "number" ? (
<label
tabIndex={i + 1}
@@ -125,41 +125,23 @@ export default function RatingQuestion({
}
}}
className={cn(
number <= hoveredNumber ? "text-rating-focus" : "text-heading",
"focus:text-rating-focus flex h-full w-full justify-center focus:outline-none"
"flex h-full w-full justify-center focus:outline-none",
number <= hoveredNumber ? "text-amber-400" : "text-slate-300",
"hover:text-amber-400"
)}
onFocus={() => setHoveredNumber(number)}
onBlur={() => setHoveredNumber(0)}>
<HiddenRadioInput number={number} />
{typeof value === "number" && value >= number ? (
<span className="text-rating-fill">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-8 max-h-full w-8 ">
<path
fillRule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clipRule="evenodd"
/>
</svg>
</span>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="h-8 max-h-full w-8">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
/>
</svg>
)}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-14 max-h-full w-14">
<path
fillRule="evenodd"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
/>
</svg>
</label>
) : (
<label