Fix up a ton of pages, settings/help/wiki need improvements, report generation needs slight updates. Otherwise completed
This commit is contained in:
@@ -16,46 +16,81 @@ export const FigmaOnboardingIntro: React.FC<FigmaOnboardingIntroProps> = ({
|
||||
onStart
|
||||
}) => {
|
||||
return (
|
||||
<div className="w-[1440px] bg-white inline-flex justify-start items-center overflow-hidden">
|
||||
<div className="flex-1 h-[810px] px-32 py-48 bg-Neutrals-NeutralSlate0 flex justify-center items-center gap-2.5 overflow-hidden">
|
||||
<div className="w-[1440px] bg-transparent inline-flex justify-start items-center overflow-hidden">
|
||||
<div className="flex-1 h-[810px] px-32 py-48 bg-[--Neutrals-NeutralSlate0] flex justify-center items-center gap-2.5 overflow-hidden">
|
||||
<div className="flex-1 max-w-[464px] inline-flex flex-col justify-start items-start gap-12">
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-6">
|
||||
<div className="w-12 h-12 relative bg-Brand-Orange rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
|
||||
<div className="w-12 h-12 relative bg-[--Brand-Orange] rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
|
||||
<div className="w-12 h-12 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
|
||||
<div className="left-[12px] top-[9.33px] absolute">
|
||||
<div data-svg-wrapper className="left-[12px] top-[9.33px] absolute">
|
||||
<svg width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M2.57408 17.8128C3.11835 18.3639 3.11834 19.2575 2.57406 19.8087L2.54619 19.8369C2.00191 20.3881 1.11946 20.3881 0.57519 19.8369C0.030919 19.2857 0.0309274 18.3921 0.575208 17.841L0.603083 17.8128C1.14736 17.2616 2.02981 17.2616 2.57408 17.8128Z" fill="url(#paint0_linear_755_3218)" />
|
||||
<path opacity="0.7" fillRule="evenodd" clipRule="evenodd" d="M9.12583 18.2379C9.66912 18.7901 9.66752 19.6837 9.12226 20.2338L5.2617 24.1291C4.71644 24.6792 3.83399 24.6776 3.2907 24.1255C2.74741 23.5733 2.74901 22.6797 3.29427 22.1296L7.15483 18.2343C7.70009 17.6842 8.58254 17.6858 9.12583 18.2379Z" fill="url(#paint1_linear_755_3218)" />
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.57408 17.8128C3.11835 18.3639 3.11834 19.2575 2.57406 19.8087L2.54619 19.8369C2.00191 20.3881 1.11946 20.3881 0.57519 19.8369C0.030919 19.2857 0.0309274 18.3921 0.575208 17.841L0.603083 17.8128C1.14736 17.2616 2.02981 17.2616 2.57408 17.8128Z" fill="url(#paint0_linear_759_16243)" />
|
||||
<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" d="M9.12583 18.2379C9.66912 18.7901 9.66752 19.6837 9.12226 20.2338L5.2617 24.1291C4.71644 24.6792 3.83399 24.6776 3.2907 24.1255C2.74741 23.5733 2.74901 22.6797 3.29427 22.1296L7.15483 18.2343C7.70009 17.6842 8.58254 17.6858 9.12583 18.2379Z" fill="url(#paint1_linear_759_16243)" />
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14.3656 24.9431C14.7925 24.2945 15.6578 24.1193 16.2983 24.5516L16.3819 24.6081C17.0224 25.0404 17.1954 25.9167 16.7685 26.5652C16.3415 27.2138 15.4762 27.389 14.8357 26.9567L14.7521 26.9002C14.1117 26.4678 13.9386 25.5916 14.3656 24.9431Z" fill="url(#paint2_linear_759_16243)" />
|
||||
<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" d="M23.5637 17.7278C24.108 18.279 24.108 19.1726 23.5637 19.7237L21.6683 21.6431C21.124 22.1943 20.2415 22.1943 19.6973 21.6431C19.153 21.092 19.153 20.1984 19.6973 19.6472L21.5927 17.7278C22.137 17.1767 23.0194 17.1767 23.5637 17.7278Z" fill="url(#paint3_linear_759_16243)" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.592 10.6292C24.1363 11.1803 24.1363 12.0739 23.592 12.6251L9.58526 26.8089C9.04098 27.36 8.15854 27.36 7.61426 26.8089C7.06999 26.2577 7.06999 25.3641 7.61426 24.8129L21.621 10.6292C22.1653 10.078 23.0477 10.078 23.592 10.6292Z" fill="url(#paint4_linear_759_16243)" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9426 6.26835C21.4869 6.8195 21.4869 7.7131 20.9426 8.26425L12.887 16.4217C12.3427 16.9728 11.4603 16.9728 10.916 16.4217C10.3717 15.8705 10.3717 14.9769 10.916 14.4258L18.9716 6.26835C19.5159 5.71719 20.3984 5.71719 20.9426 6.26835Z" fill="url(#paint5_linear_759_16243)" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6918 3.50156C17.2364 4.05235 17.237 4.94594 16.6931 5.49747L6.33787 15.9977C5.79396 16.5492 4.91152 16.5498 4.36688 15.999C3.82224 15.4482 3.82164 14.5546 4.36555 14.0031L14.7208 3.5029C15.2647 2.95138 16.1471 2.95078 16.6918 3.50156Z" fill="url(#paint6_linear_759_16243)" />
|
||||
<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" d="M6.43658 6.86284C6.97992 7.41494 6.9784 8.30854 6.43319 8.85874L2.37751 12.9516C1.83229 13.5018 0.94985 13.5002 0.406512 12.9481C-0.136826 12.396 -0.135307 11.5024 0.409905 10.9522L4.46559 6.8594C5.0108 6.3092 5.89324 6.31074 6.43658 6.86284Z" fill="url(#paint7_linear_759_16243)" />
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M8.92007 2.77832C9.6898 2.77832 10.3138 3.41019 10.3138 4.18964V4.33077C10.3138 5.11022 9.6898 5.74209 8.92007 5.74209C8.15035 5.74209 7.52637 5.11022 7.52637 4.33077V4.18964C7.52637 3.41019 8.15035 2.77832 8.92007 2.77832Z" fill="url(#paint8_linear_759_16243)" />
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_755_3218" x1="1.57463" y1="17.3994" x2="1.57463" y2="20.2503" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="white" stopOpacity="0.8" />
|
||||
<stop offset="1" stopColor="white" stopOpacity="0.5" />
|
||||
<linearGradient id="paint0_linear_759_16243" x1="1.57463" y1="17.3994" x2="1.57463" y2="20.2503" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.8" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_755_3218" x1="6.20827" y1="17.8228" x2="6.20827" y2="24.5406" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="white" stopOpacity="0.8" />
|
||||
<stop offset="1" stopColor="white" stopOpacity="0.5" />
|
||||
<linearGradient id="paint1_linear_759_16243" x1="6.20827" y1="17.8228" x2="6.20827" y2="24.5406" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.8" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_759_16243" x1="15.567" y1="24.3145" x2="15.567" y2="27.1938" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.8" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_759_16243" x1="21.6305" y1="17.3145" x2="21.6305" y2="22.0565" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.8" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_759_16243" x1="15.6031" y1="10.2158" x2="15.6031" y2="27.2222" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.8" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_759_16243" x1="15.9293" y1="5.85498" x2="15.9293" y2="16.835" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.8" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_759_16243" x1="10.5293" y1="3.08887" x2="10.5293" y2="16.4117" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.8" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_759_16243" x1="3.42155" y1="6.44775" x2="3.42155" y2="13.3632" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.8" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_759_16243" x1="8.92007" y1="2.77832" x2="8.92007" y2="5.74209" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.8" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-4">
|
||||
<div className="px-3 py-1.5 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
|
||||
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">
|
||||
<div className="px-3 py-1.5 bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] uppercase leading-none">
|
||||
{section} of {totalSections}
|
||||
</div>
|
||||
</div>
|
||||
<div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">
|
||||
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">
|
||||
{title}
|
||||
</div>
|
||||
<div className="self-stretch justify-center text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">
|
||||
<div className="self-stretch justify-center text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal">
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onStart}
|
||||
className="self-stretch px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden hover:bg-Brand-Orange/90 transition-colors"
|
||||
className="self-stretch px-4 py-3.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Brand-Orange]/90 transition-colors"
|
||||
>
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Start</div>
|
||||
@@ -63,9 +98,9 @@ export const FigmaOnboardingIntro: React.FC<FigmaOnboardingIntroProps> = ({
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 h-[810px] px-20 py-16 flex justify-center items-center gap-2.5 overflow-hidden">
|
||||
<div className="self-stretch h-[810px] px-20 py-16 inline-flex justify-center items-center gap-2.5 overflow-hidden">
|
||||
<div className="flex-1 self-stretch origin-top-left rotate-180 rounded-3xl inline-flex flex-col justify-center items-center gap-2.5 overflow-hidden">
|
||||
<img className="self-stretch flex-1 object-cover" src="https://placehold.co/560x682" alt="Onboarding illustration" />
|
||||
<img className="self-stretch flex-1" src="/public/image/onboarding-robot.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -123,17 +158,17 @@ export const FigmaOnboardingQuestion: React.FC<FigmaOnboardingQuestionProps> = (
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-36">
|
||||
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-36">
|
||||
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-8">
|
||||
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">
|
||||
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">
|
||||
{question}
|
||||
</div>
|
||||
<div className="self-stretch min-h-40 p-5 relative bg-Neutrals-NeutralSlate100 rounded-xl inline-flex justify-start items-start gap-2.5">
|
||||
<div className="self-stretch min-h-40 p-5 relative bg-[--Neutrals-NeutralSlate100] rounded-xl inline-flex justify-start items-start gap-2.5">
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 outline-none resize-none"
|
||||
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-base font-normal font-['Inter'] leading-normal placeholder:text-[--Neutrals-NeutralSlate950] outline-none resize-none"
|
||||
placeholder={placeholder}
|
||||
rows={rows}
|
||||
/>
|
||||
@@ -146,16 +181,16 @@ export const FigmaOnboardingQuestion: React.FC<FigmaOnboardingQuestionProps> = (
|
||||
<div className="self-stretch inline-flex justify-start items-start gap-2">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200 transition-colors"
|
||||
className="h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate100] transition-colors"
|
||||
>
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
|
||||
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Back</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={onNext}
|
||||
disabled={!canProceed}
|
||||
className="flex-1 h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-Brand-Orange/90 transition-colors"
|
||||
className="flex-1 h-12 px-4 py-3.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[--Brand-Orange]/90 transition-colors"
|
||||
>
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
|
||||
@@ -163,24 +198,24 @@ export const FigmaOnboardingQuestion: React.FC<FigmaOnboardingQuestionProps> = (
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
|
||||
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">
|
||||
|
||||
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] uppercase leading-none">
|
||||
{sectionPosition} of {totalInSection}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{canSkip && (
|
||||
<div className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden cursor-pointer hover:bg-Neutrals-NeutralSlate200 transition-colors">
|
||||
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
|
||||
<div className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden cursor-pointer hover:bg-[--Neutrals-NeutralSlate100] transition-colors">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-none">Skip</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
|
||||
<div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
|
||||
<div className="p-4 bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
|
||||
{renderProgressDots()}
|
||||
</div>
|
||||
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">
|
||||
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate500] text-base font-medium font-['Neue_Montreal'] leading-normal">
|
||||
{sectionName}
|
||||
</div>
|
||||
</div>
|
||||
@@ -219,7 +254,7 @@ export const FigmaOnboardingMultipleChoice: React.FC<FigmaOnboardingMultipleChoi
|
||||
for (let i = 1; i <= 7; i++) {
|
||||
if (i === sectionPosition) {
|
||||
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 {
|
||||
dots.push(
|
||||
@@ -233,10 +268,10 @@ export const FigmaOnboardingMultipleChoice: React.FC<FigmaOnboardingMultipleChoi
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
|
||||
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-9">
|
||||
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-8">
|
||||
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">
|
||||
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">
|
||||
{question}
|
||||
</div>
|
||||
<div className="self-stretch inline-flex justify-center items-center gap-3">
|
||||
@@ -244,17 +279,15 @@ export const FigmaOnboardingMultipleChoice: React.FC<FigmaOnboardingMultipleChoi
|
||||
<button
|
||||
key={option}
|
||||
onClick={() => onSelect(option)}
|
||||
className={`flex-1 h-20 relative rounded-[999px] overflow-hidden transition-colors ${
|
||||
selectedValue === option
|
||||
? 'bg-Neutrals-NeutralSlate800'
|
||||
: 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'
|
||||
}`}
|
||||
className={`flex-1 h-20 relative rounded-[999px] overflow-hidden transition-colors ${selectedValue === option
|
||||
? 'bg-[--Neutrals-NeutralSlate800]'
|
||||
: 'bg-[--Neutrals-NeutralSlate100] hover:bg-[--Neutrals-NeutralSlate50]'
|
||||
}`}
|
||||
>
|
||||
<div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${
|
||||
selectedValue === option
|
||||
? 'text-Neutrals-NeutralSlate0'
|
||||
: 'text-Neutrals-NeutralSlate950'
|
||||
}`}>
|
||||
<div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${selectedValue === option
|
||||
? 'text-[--Neutrals-NeutralSlate0]'
|
||||
: 'text-[--Neutrals-NeutralSlate950]'
|
||||
}`}>
|
||||
{option}
|
||||
</div>
|
||||
</button>
|
||||
@@ -264,16 +297,16 @@ export const FigmaOnboardingMultipleChoice: React.FC<FigmaOnboardingMultipleChoi
|
||||
<div className="self-stretch inline-flex justify-start items-start gap-2">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200 transition-colors"
|
||||
className="h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate100] transition-colors"
|
||||
>
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
|
||||
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Back</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={onNext}
|
||||
disabled={!selectedValue}
|
||||
className="flex-1 h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-Brand-Orange/90 transition-colors"
|
||||
className="flex-1 h-12 px-4 py-3.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[--Brand-Orange]/90 transition-colors"
|
||||
>
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
|
||||
@@ -281,24 +314,24 @@ export const FigmaOnboardingMultipleChoice: React.FC<FigmaOnboardingMultipleChoi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
|
||||
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">
|
||||
|
||||
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] uppercase leading-none">
|
||||
{sectionPosition} of {totalInSection}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{canSkip && (
|
||||
<div className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden cursor-pointer hover:bg-Neutrals-NeutralSlate200 transition-colors">
|
||||
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
|
||||
<div className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden cursor-pointer hover:bg-[--Neutrals-NeutralSlate100] transition-colors">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-none">Skip</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
|
||||
<div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
|
||||
<div className="p-4 bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
|
||||
{renderProgressDots()}
|
||||
</div>
|
||||
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">
|
||||
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate500] text-base font-medium font-['Neue_Montreal'] leading-normal">
|
||||
{sectionName}
|
||||
</div>
|
||||
</div>
|
||||
@@ -335,16 +368,16 @@ export const FigmaOnboardingForm: React.FC<FigmaOnboardingFormProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-[1440px] h-[810px] px-[488px] py-32 bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
|
||||
<div className="w-[1440px] h-[810px] px-[488px] py-32 bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-9">
|
||||
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-8">
|
||||
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">
|
||||
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">
|
||||
Company Details
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-6">
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-2">
|
||||
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
|
||||
<div className="justify-start text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight">Company Logo</div>
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight">Company Logo</div>
|
||||
</div>
|
||||
<div className="self-stretch p-4 rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-start items-center gap-4">
|
||||
<div className="w-16 h-16 relative bg-gray-200 rounded-[250px]">
|
||||
@@ -361,7 +394,7 @@ export const FigmaOnboardingForm: React.FC<FigmaOnboardingFormProps> = ({
|
||||
<path d="M14 2H2M12 8.66667L8 4.66667M8 4.66667L4 8.66667M8 4.66667V14" stroke="var(--Neutrals-NeutralSlate950, #0A0D12)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Upload image</div>
|
||||
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Upload image</div>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@@ -375,16 +408,16 @@ export const FigmaOnboardingForm: React.FC<FigmaOnboardingFormProps> = ({
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-2">
|
||||
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
|
||||
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">Your Name</div>
|
||||
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate900] text-sm font-normal font-['Inter'] leading-tight">Your Name</div>
|
||||
<div className="justify-start text-[--Brand-Orange] text-sm font-medium font-['Inter'] leading-tight">*</div>
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-1">
|
||||
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
|
||||
<div className="self-stretch px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
|
||||
<input
|
||||
type="text"
|
||||
value={yourName}
|
||||
onChange={(e) => onYourNameChange(e.target.value)}
|
||||
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
|
||||
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</div>
|
||||
@@ -392,16 +425,16 @@ export const FigmaOnboardingForm: React.FC<FigmaOnboardingFormProps> = ({
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-2">
|
||||
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
|
||||
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">Company Name</div>
|
||||
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate900] text-sm font-normal font-['Inter'] leading-tight">Company Name</div>
|
||||
<div className="justify-start text-[--Brand-Orange] text-sm font-medium font-['Inter'] leading-tight">*</div>
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-1">
|
||||
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
|
||||
<div className="self-stretch px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
|
||||
<input
|
||||
type="text"
|
||||
value={companyName}
|
||||
onChange={(e) => onCompanyNameChange(e.target.value)}
|
||||
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
|
||||
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none"
|
||||
placeholder="Doe Enterprises"
|
||||
/>
|
||||
</div>
|
||||
@@ -412,7 +445,7 @@ export const FigmaOnboardingForm: React.FC<FigmaOnboardingFormProps> = ({
|
||||
<button
|
||||
onClick={onNext}
|
||||
disabled={!canProceed}
|
||||
className="self-stretch h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-Brand-Orange/90 transition-colors"
|
||||
className="self-stretch h-12 px-4 py-3.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[--Brand-Orange]/90 transition-colors"
|
||||
>
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
|
||||
|
||||
Reference in New Issue
Block a user