This commit is contained in:
Ra
2025-08-20 12:24:56 -07:00
parent 9332a48542
commit be2cab7c9e
5 changed files with 80 additions and 61 deletions

View File

@@ -82,12 +82,12 @@ export const EnhancedFigmaQuestion: React.FC<FigmaQuestionProps> = ({
if (i < currentStep - 1) {
// Completed steps - elongated orange
dots.push(
<div key={i} className="w-6 h-1 bg-Brand-Orange rounded-3xl" />
<div key={i} className="w-6 h-1 bg-[--Brand-Orange] rounded-3xl" />
);
} else if (i === currentStep - 1) {
// Current step - elongated orange
dots.push(
<div key={i} className="w-6 h-1 bg-Brand-Orange rounded-3xl" />
<div key={i} className="w-6 h-1 bg-[--Brand-Orange] rounded-3xl" />
);
} else {
// Future steps - small gray circles
@@ -160,7 +160,7 @@ export const EnhancedFigmaQuestion: React.FC<FigmaQuestionProps> = ({
data-show-icon-right="false"
data-show-text="true"
data-size="Big"
className={`h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden ${backDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-[--Neutrals-NeutralSlate200]'}`}
className={`h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate50] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden ${backDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-[--Neutrals-NeutralSlate200]'}`}
onClick={!backDisabled ? onBack : undefined}
>
<div className="px-1 flex justify-center items-center">
@@ -230,28 +230,38 @@ export const FigmaQuestionCard: React.FC<FigmaQuestionCardProps> = ({
className = ""
}) => {
return (
<div className="w-full px-5 pt-5 pb-6 bg-white rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-end items-end gap-4">
<div className="self-stretch inline-flex justify-start items-start gap-3">
<div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">Q</div>
<div className="flex-1 inline-flex flex-col justify-start items-start gap-2">
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-xl font-semibold font-['Inter'] leading-loose">
{question}
</div>
{description && (
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-sm font-normal font-['Inter'] leading-tight">
{description}
</div>
)}
</div>
</div>
<div className="self-stretch h-0 rotate-90 shadow-[0px_1.5px_1.5px_0px_rgba(255,255,255,1.00)] outline outline-1 outline-offset-[-0.50px] border-[--Neutrals-NeutralSlate200]" />
<div className="self-stretch inline-flex justify-start items-center gap-3">
<div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">A</div>
<div className="flex-1">
{children}
</div>
</div>
// <div className="w-full px-5 pt-5 pb-6 bg-white rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-grow flex-col gap-4">
// <div className="self-stretch inline-flex justify-start items-center gap-3">
// <div className="flex-1">
// {children}
// </div>
// </div>
// </div>
<div className="self-stretch justify-center flex items-center gap-3">
{children}
</div>
// <div className="w-full px-5 pt-5 pb-6 bg-white rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-end items-end gap-4">
// {/* <div className="self-stretch inline-flex justify-start items-start gap-3">
// <div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">Q</div>
// <div className="flex-1 inline-flex flex-col justify-start items-start gap-2">
// <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-xl font-semibold font-['Inter'] leading-loose">
// {question}
// </div>
// {description && (
// <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-sm font-normal font-['Inter'] leading-tight">
// {description}
// </div>
// )}
// </div>
// </div> */}
// <div className="self-stretch h-0 rotate-90 shadow-[0px_1.5px_1.5px_0px_rgba(255,255,255,1.00)] outline outline-1 outline-offset-[-0.50px] border-[--Neutrals-NeutralSlate200]" />
// <div className="self-stretch inline-flex justify-start items-center gap-3">
// <div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">A</div>
// <div className="flex-1">
// {children}
// </div>
// </div>
// </div>
);
};
@@ -273,8 +283,8 @@ export const EnhancedFigmaInput: React.FC<EnhancedFigmaInputProps> = ({
rows = 4,
className = ""
}) => {
const baseClasses = "self-stretch min-h-40 p-5 relative bg-[--Neutrals-NeutralSlate100] rounded-xl inline-flex justify-start items-start gap-2.5 overflow-hidden";
const inputClasses = "flex-1 justify-start text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal bg-transparent border-none outline-none resize-none";
const baseClasses = "self-stretch min-h-40 p-5 relative bg-[--Neutrals-NeutralSlate50] rounded-xl inline-flex justify-start items-start gap-2.5 overflow-hidden";
const inputClasses = "flex self-stretch w-100 text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal bg-transparent border-none outline-none resize-none";
if (multiline) {
return (