ra/auditly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

60
components/figma/EnhancedFigmaQuestion.tsx
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">
// <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>
</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 (

8
components/figma/FigmaAlert.tsx
View File

@@ -18,7 +18,7 @@ export const FigmaAlert: React.FC<FigmaAlertProps> = ({
}) => {
const getBorderColor = () => {
switch (variant) {
case 'success': return 'bg-Other-Green';
case 'success': return 'bg-[--Other-Green]';
case 'error': return 'bg-red-500';
case 'warning': return 'bg-yellow-500';
default: return 'bg-blue-500';
@@ -26,10 +26,10 @@ export const FigmaAlert: React.FC<FigmaAlertProps> = ({
};
return (
<div className={`p-4 relative bg-Other-White rounded-lg shadow-[0px_2px_2px_-1px_rgba(10,13,18,0.04)] shadow-[0px_4px_6px_-2px_rgba(10,13,18,0.03)] shadow-[0px_12px_16px_-4px_rgba(10,13,18,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-center items-center gap-2.5 overflow-hidden ${className}`}>
<div className="w-96 max-w-96 justify-start text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">
<div className={`p-4 relative bg-white rounded-lg shadow-[0px_2px_2px_-1px_rgba(10,13,18,0.04)] shadow-[0px_4px_6px_-2px_rgba(10,13,18,0.03)] shadow-[0px_12px_16px_-4px_rgba(10,13,18,0.08)] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex justify-center items-center gap-2.5 overflow-hidden ${className}`}>
<div className="w-96 max-w-96 justify-start text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">
{title}
{children && <div className="mt-1 text-xs text-Neutrals-NeutralSlate600">{children}</div>}
{children && <div className="mt-1 text-xs text-[--Neutrals-NeutralSlate600]">{children}</div>}
</div>
{onClose && (

8
components/figma/FigmaMultipleChoice.tsx
View File

@@ -21,14 +21,14 @@ export const FigmaMultipleChoice: React.FC<FigmaMultipleChoiceProps> = ({
<div
key={index}
className={`flex-1 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${isSelected
? 'bg-Neutrals-NeutralSlate800'
: 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'
? 'bg-[--Neutrals-NeutralSlate800]'
: 'bg-[--Neutrals-NeutralSlate100] hover:bg-[--Neutrals-NeutralSlate200]'
}`}
onClick={() => onSelect?.(option)}
>
<div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${isSelected
? 'text-Neutrals-NeutralSlate0'
: 'text-Neutrals-NeutralSlate950'
? 'text-[--Neutrals-NeutralSlate0]'
: 'text-[--Neutrals-NeutralSlate950]'
}`}>
{option}
</div>

16
components/figma/FigmaProgress.tsx
View File

@@ -15,20 +15,20 @@ interface FigmaProgressProps {
const ProgressStep: React.FC<ProgressStepProps> = ({ number, title, isActive = false, isCompleted = false }) => {
const stepClasses = isActive
? "p-2 bg-Main-BG-Gray-50 rounded-[10px] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]"
: "p-2 bg-Other-White rounded-[10px]";
? "p-2 bg-[--Neutrals-NeutralSlate50] rounded-[10px] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]"
: "p-2 bg-white rounded-[10px]";
const numberClasses = isActive || isCompleted
? "h-5 p-0.5 bg-Brand-Orange rounded-[999px]"
: "h-5 p-0.5 bg-bg-white-0 rounded-[999px] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200";
? "h-5 p-0.5 bg-[--Brand-Orange] rounded-[999px]"
: "h-5 p-0.5 bg-[--Neutrals-NeutralSlate0] rounded-[999px] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200]";
const numberTextClasses = isActive || isCompleted
? "w-4 text-center justify-start text-Neutrals-NeutralSlate0 text-xs font-medium font-['Inter'] leading-none"
: "w-4 text-center justify-start text-Neutrals-NeutralSlate600 text-xs font-medium font-['Inter'] leading-none";
? "w-4 text-center justify-start text-[--Neutrals-NeutralSlate0] text-xs font-medium font-['Inter'] leading-none"
: "w-4 text-center justify-start text-[--Neutrals-NeutralSlate600] text-xs font-medium font-['Inter'] leading-none";
const titleClasses = isActive
? "flex-1 justify-start text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight"
: "flex-1 justify-start text-Neutrals-NeutralSlate600 text-sm font-normal font-['Inter'] leading-tight";
? "flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight"
: "flex-1 justify-start text-[--Neutrals-NeutralSlate600] text-sm font-normal font-['Inter'] leading-tight";
return (
<div className={`self-stretch inline-flex justify-start items-center gap-2.5 overflow-hidden ${stepClasses}`}>

47
components/figma/Sidebar.tsx
View File

@@ -96,14 +96,14 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
};
return (
<div className="w-64 h-[810px] max-w-64 min-w-64 px-3 pt-4 pb-3 bg-Neutrals-NeutralSlate0 border-r border-Neutrals-NeutralSlate200 inline-flex flex-col justify-between items-center overflow-hidden">
<div className="w-64 max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-between items-center overflow-hidden">
{/* Header Section */}
<div className="self-stretch flex flex-col justify-start items-start gap-5">
{/* Company Selector */}
<div className="w-60 pl-2 pr-4 py-2 bg-Neutrals-NeutralSlate0 rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-between items-center overflow-hidden">
<div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex justify-between items-center overflow-hidden">
<div className="flex-1 flex justify-start items-center gap-2">
<div className="w-8 h-8 rounded-full flex justify-start items-center gap-2.5">
<div className="w-8 h-8 relative bg-Brand-Orange rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
<div className="w-8 h-8 relative bg-[--Brand-Orange] rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
<div className="left-0 top-0 absolute">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" fill="url(#paint0_linear_731_19280)" />
@@ -147,7 +147,7 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
</div>
</div>
<div className="flex-1 inline-flex flex-col justify-start items-start gap-0.5">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-base font-medium font-['Inter'] leading-normal">{companyName}</div>
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">{companyName}</div>
</div>
</div>
<div>
@@ -165,8 +165,8 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
key={index}
onClick={() => handleNavClick(item.path)}
className={`w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2 cursor-pointer ${item.active
? 'bg-Neutrals-NeutralSlate100'
: 'hover:bg-Neutrals-NeutralSlate50'
? 'bg-[--Neutrals-NeutralSlate100]'
: 'hover:bg-[--Neutrals-NeutralSlate50]'
}`}
>
<div className="relative">
@@ -175,8 +175,8 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
})}
</div>
<div className={`justify-start text-sm font-medium font-['Inter'] leading-tight ${item.active
? 'text-Neutrals-NeutralSlate950'
: 'text-Neutrals-NeutralSlate500'
? 'text-[--Neutrals-NeutralSlate950]'
: 'text-[--Neutrals-NeutralSlate500]'
}`}>
{item.label}
</div>
@@ -191,30 +191,39 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
{/* Settings */}
<div
onClick={() => handleNavClick("/settings")}
className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2 cursor-pointer hover:bg-Neutrals-NeutralSlate50"
className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2 cursor-pointer hover:bg-[--Neutrals-NeutralSlate50]"
>
<div className="relative">
{settingsIcon}
</div>
<div className="flex-1 justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Settings</div>
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Settings</div>
</div>
{/* Build Report Card */}
<div className="self-stretch bg-Neutrals-NeutralSlate0 rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 flex flex-col justify-start items-start overflow-hidden">
<div className="self-stretch bg-[--Neutrals-NeutralSlate0] rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start overflow-hidden">
<div className="self-stretch h-24 relative">
<div className="w-60 h-32 left-0 top-[-0.50px] absolute bg-gradient-to-b from-black to-black/0" />
<div className="w-60 p-3 left-[18.12px] top-[42.51px] absolute origin-top-left rotate-[-28.34deg] bg-Neutrals-NeutralSlate0 rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
<div className="w-60 p-3 left-[31.44px] top-[22px] absolute origin-top-left rotate-[-28.34deg] bg-Neutrals-NeutralSlate0 rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
<div className="w-20 h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1.5">
<div className="w-20 h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
<div className="self-stretch h-5 bg-Neutrals-NeutralSlate100 rounded-sm" />
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1.5">
<div className="w-20 h-2 bg-Neutrals-NeutralSlate100 rounded-sm" />
<div className="self-stretch h-5 bg-Neutrals-NeutralSlate100 rounded-sm" />
</div>
</div>
<div className="self-stretch p-3 flex flex-col justify-start items-start gap-1">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>
<div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-xs font-normal font-['Inter'] leading-none">Share this form with your team members to capture valuable info about your company to train Auditly.</div>
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-xs font-normal font-['Inter'] leading-none">Share this form with your team members to capture valuable info about your company to train Auditly.</div>
</div>
<div className="self-stretch px-3 pb-3 flex flex-col justify-start items-start gap-8">
<div className="self-stretch inline-flex justify-start items-start gap-2">
<div className="flex-1 px-3 py-1.5 bg-Button-Secondary rounded-[999px] flex justify-center items-center gap-0.5 overflow-hidden">
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Invite</div>
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Invite</div>
</div>
<div>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -222,14 +231,14 @@ export default function Sidebar({ companyName = "Zitlac Media", collapsed = fals
</svg>
</div>
</div>
<div className="flex-1 px-3 py-1.5 bg-Brand-Orange rounded-[999px] outline outline-1 outline-offset-[-1px] outline-blue-400 flex justify-center items-center gap-0.5 overflow-hidden">
<div className="flex-1 px-3 py-1.5 bg-[--Brand-Orange] rounded-[999px] outline outline-1 outline-offset-[-1px] outline-blue-400 flex justify-center items-center gap-0.5 overflow-hidden">
<div>
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.97203 12.2426L8.02922 13.1854C6.72748 14.4872 4.61693 14.4872 3.31518 13.1854C2.01343 11.8837 2.01343 9.77312 3.31518 8.47138L4.25799 7.52857M12.7433 8.47138L13.6861 7.52857C14.9878 6.22682 14.9878 4.11627 13.6861 2.81452C12.3843 1.51277 10.2738 1.51277 8.97203 2.81452L8.02922 3.75733M6.16729 10.3333L10.834 5.66662" stroke="var(--Other-White, white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Copy</div>
<div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">Copy</div>
</div>
</div>
</div>