kyd-shared-badge 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/SharedBadgeDisplay.tsx

@@ -65,6 +65,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
   const aiUsageScore = summary_scores.ai_usage;
 
   const wrapperMaxWidth = type === 'recruiter' ? 'max-w-5xl' : 'max-w-6xl';
+  const isRecruiter = type === 'recruiter';
 
   return (
     <div className={`${wrapperMaxWidth} mx-auto`}>
@@ -74,7 +75,11 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                 shareTitle={`KYD Self-Check™ Report | ${badgeData.developerName}`}
                 shareText="Check out my KYD Self-Check™ from Know Your Developer™"
                 buttonText="Share"
-                className="flex items-center justify-center h-10 w-10 sm:w-auto sm:px-4 sm:py-2 bg-indigo-600 text-white rounded-full sm:rounded-md hover:bg-indigo-700 transition-all duration-300 ease-in-out"
+                className={
+                  isRecruiter
+                    ? 'flex items-center justify-center h-10 w-10 sm:w-auto sm:px-4 sm:py-2 text-white rounded-full sm:rounded-md transition-all duration-300 ease-in-out bg-[var(--icon-accent)] hover:bg-[var(--icon-accent-hover)]'
+                    : 'flex items-center justify-center h-10 w-10 sm:w-auto sm:px-4 sm:py-2 bg-indigo-600 text-white rounded-full sm:rounded-md hover:bg-indigo-700 transition-all duration-300 ease-in-out'
+                }
             />
         </div>
         <ReportHeader 
@@ -84,8 +89,16 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
             score={summary_scores.kyd_self_check.score}
             isPublic={true}
             badgeImageUrl={badgeData.badgeImageUrl || ''}
+            type={type}
         />
-        <div className="bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm rounded-lg shadow-xl p-6 sm:p-8 mt-8">
+        <div
+          className={
+            isRecruiter
+              ? 'rounded-xl shadow-xl p-6 sm:p-8 mt-8 border'
+              : 'bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm rounded-lg shadow-xl p-6 sm:p-8 mt-8'
+          }
+          style={isRecruiter ? { backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' } : undefined}
+        >
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                 <ScoreCard 
                   title="KYD Technical™" 
@@ -111,18 +124,18 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                 />
             </div>
 
-            <div className="space-y-12 divide-y divide-neutral-200/50 dark:divide-neutral-700/50">
+            <div className={isRecruiter ? 'space-y-12 divide-y' : 'space-y-12 divide-y divide-neutral-200/50 dark:divide-neutral-700/50'} style={isRecruiter ? { borderColor: 'var(--icon-button-secondary)' } : undefined}>
                 <div className="pt-8 first:pt-0">
-                    <h3 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">1. Summary Findings</h3>
-                    <div className="prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300">
+                    <h3 className={isRecruiter ? 'text-2xl font-bold mb-4' : 'text-2xl font-bold text-neutral-900 dark:text-white mb-4'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>1. Summary Findings</h3>
+                    <div className={isRecruiter ? 'prose prose-sm max-w-none' : 'prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                         <p>{report_summary}</p>
                     </div>
                     {key_skills && key_skills.length > 0 && (
                         <div className="mt-6">
-                            <h4 className="text-lg font-semibold text-neutral-900 dark:text-white mb-3">Key Skills Observed</h4>
+                            <h4 className={isRecruiter ? 'text-lg font-semibold mb-3' : 'text-lg font-semibold text-neutral-900 dark:text-white mb-3'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Key Skills Observed</h4>
                             <div className="flex flex-wrap gap-2">
                                 {key_skills.map((skill: string, index: number) => (
-                                    <span key={index} className="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-1 rounded-full dark:bg-blue-900 dark:text-blue-300">
+                                    <span key={index} className={isRecruiter ? 'text-xs font-medium px-2.5 py-1 rounded-full' : 'bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-1 rounded-full dark:bg-blue-900 dark:text-blue-300'} style={isRecruiter ? { backgroundColor: 'var(--icon-button-secondary)', color: 'var(--text-main)' } : undefined}>
                                         {skill}
                                     </span>
                                 ))}
@@ -132,8 +145,8 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                 </div>
 
                 <div className="pt-8">
-                    <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">2. KYD Technical™ Signals</h3>
-                    <div className="prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300 mb-6">
+                    <h3 className={isRecruiter ? 'text-xl font-bold mb-3' : 'text-xl font-bold text-neutral-900 dark:text-white mb-3'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>2. KYD Technical™ Signals</h3>
+                    <div className={isRecruiter ? 'prose prose-sm max-w-none mb-6' : 'prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300 mb-6'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                         <p>{developer_trust_explanation}</p>
                     </div>
                     <ProviderInsights 
@@ -144,16 +157,16 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                 </div>
                 
                 <div className="pt-8">
-                      <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">3. KYD Risk™ Signals</h3>
+                      <h3 className={isRecruiter ? 'text-xl font-bold mb-3' : 'text-xl font-bold text-neutral-900 dark:text-white mb-3'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>3. KYD Risk™ Signals</h3>
                       {badgeData.optOutScreening ? (
-                          <div className="mb-4 p-4 bg-yellow-100 dark:bg-yellow-900/30 border border-yellow-300 dark:border-yellow-700 rounded-lg">
+                          <div className={isRecruiter ? 'mb-4 p-4 rounded-lg border' : 'mb-4 p-4 bg-yellow-100 dark:bg-yellow-900/30 border border-yellow-300 dark:border-yellow-700 rounded-lg'} style={isRecruiter ? { backgroundColor: 'var(--icon-button-secondary)', borderColor: 'var(--icon-button-secondary)' } : undefined}>
                               <div className="flex items-start">
                                   <span className="h-5 w-5 text-yellow-500 dark:text-yellow-400 mr-3 mt-0.5 flex-shrink-0">
                                       <FiAlertTriangle size={20} />
                                   </span>
                                   <div>
-                                      <h4 className="font-bold text-yellow-800 dark:text-yellow-200">User Opted Out of Screening</h4>
-                                      <p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
+                                      <h4 className={isRecruiter ? 'font-bold' : 'font-bold text-yellow-800 dark:text-yellow-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>User Opted Out of Screening</h4>
+                                      <p className={isRecruiter ? 'text-sm mt-1' : 'text-sm text-yellow-700 dark:text-yellow-300 mt-1'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                                           The user chose not to participate in the automated sanctions and risk screening process. The risk score reflects this decision and is for informational purposes only.
                                       </p>
                                   </div>
@@ -161,7 +174,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                           </div>
                       ) : (
                         <>
-                          <div className="prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300 space-y-4 mb-6">
+                          <div className={isRecruiter ? 'prose prose-sm max-w-none space-y-4 mb-6' : 'prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300 space-y-4 mb-6'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                               <p>{riskScore?.description || ''}</p>
                           </div>
                           <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
@@ -170,8 +183,8 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                 </div>
 
                 <div className="pt-8">
-                      <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">4. KYD AI™ Signals <span className="text-sm font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded-full align-middle">Beta</span></h3>
-                      <div className="prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300 mb-6 space-y-4">
+                      <h3 className={isRecruiter ? 'text-xl font-bold mb-3' : 'text-xl font-bold text-neutral-900 dark:text-white mb-3'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>4. KYD AI™ Signals <span className="text-sm font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded-full align-middle">Beta</span></h3>
+                      <div className={isRecruiter ? 'prose prose-sm max-w-none mb-6 space-y-4' : 'prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300 mb-6 space-y-4'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                         <p>{assessmentResult.ai_usage_summary?.explanation}</p>
                         {assessmentResult.ai_usage_summary?.key_findings && (
                           <ul className="list-disc list-inside">
@@ -184,18 +197,18 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                 </div>
 
                 <div className="pt-8">
-                    <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">5. Industry Considerations</h3>
-                    <div className="prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300">
+                    <h3 className={isRecruiter ? 'text-xl font-bold mb-3' : 'text-xl font-bold text-neutral-900 dark:text-white mb-3'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>5. Industry Considerations</h3>
+                    <div className={isRecruiter ? 'prose prose-sm max-w-none' : 'prose prose-sm dark:prose-invert max-w-none text-neutral-600 dark:text-neutral-300'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                         <p>{industry_considerations}</p>
                     </div>
                 </div>
 
                 {!badgeData.optOutScreening && screening_sources && (
                     <div className="pt-8">
-                        <h3 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">6. Appendix: Data Sources</h3>
+                        <h3 className={isRecruiter ? 'text-2xl font-bold mb-4' : 'text-2xl font-bold text-neutral-900 dark:text-white mb-4'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>6. Appendix: Data Sources</h3>
                         <div className="space-y-8">
                             <div>
-                                <h4 className="text-xl font-bold text-neutral-800 dark:text-white mb-4">Sanctions & Watchlists</h4>
+                                <h4 className={isRecruiter ? 'text-xl font-bold mb-4' : 'text-xl font-bold text-neutral-800 dark:text-white mb-4'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Sanctions & Watchlists</h4>
                                 <AppendixTables
                                     type="sanctions"
                                     sources={[...(screening_sources.ofac_lists || []), ...(screening_sources.additional_watchlists || [])]}
@@ -204,7 +217,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                                 />
                             </div>
                             <div>
-                                <h4 className="text-xl font-bold text-neutral-800 dark:text-white mb-4">Country-specific Entity Affiliations</h4>
+                                <h4 className={isRecruiter ? 'text-xl font-bold mb-4' : 'text-xl font-bold text-neutral-800 dark:text-white mb-4'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Country-specific Entity Affiliations</h4>
                                 <AppendixTables
                                     type="domains"
                                     sources={screening_sources.risk_profile_domains || []}
@@ -216,7 +229,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                     </div>
                 )}
 
-                <div className="pt-8 text-sm text-neutral-500 dark:text-neutral-400 text-center">
+                <div className={isRecruiter ? 'pt-8 text-sm text-center' : 'pt-8 text-sm text-neutral-500 dark:text-neutral-400 text-center'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                     Report Completed: {new Date(updatedAt).toLocaleString(undefined, {
                         year: 'numeric',
                         month: 'long',
@@ -228,8 +241,8 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                 </div>
             </div>
         </div>
-        <footer className="mt-12 pt-6 border-t border-neutral-200 dark:border-neutral-700">
-            <p className="text-center text-xs text-gray-500 dark:text-gray-400 max-w-4xl mx-auto">
+        <footer className={isRecruiter ? 'mt-12 pt-6 border-t' : 'mt-12 pt-6 border-t border-neutral-200 dark:border-neutral-700'} style={isRecruiter ? { borderColor: 'var(--icon-button-secondary)' } : undefined}>
+            <p className={isRecruiter ? 'text-center text-xs max-w-4xl mx-auto' : 'text-center text-xs text-gray-500 dark:text-gray-400 max-w-4xl mx-auto'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                 © 2025 Know Your Developer, LLC. All rights reserved. KYD Self-Check™, and associated marks are trademarks of Know Your Developer, LLC. This document is confidential, proprietary, and intended solely for the individual or entity to whom it is addressed. Unauthorized use, disclosure, copying, or distribution of this document or any of its contents is strictly prohibited and may be unlawful. Know Your Developer, LLC assumes no responsibility or liability for any errors or omissions contained herein. Report validity subject to the terms and conditions stated on the official Know Your Developer website located at https://knowyourdeveloper.ai.
             </p>
         </footer>

package/src/components/ReportHeader.tsx

@@ -15,11 +15,13 @@ interface ReportHeaderProps {
     score: number | undefined;
     isPublic: boolean;
     badgeImageUrl: string;
+    type?: 'recruiter' | 'individual';
 }
 
-const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic, badgeImageUrl }: ReportHeaderProps) => {
+const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic, badgeImageUrl, type = 'individual' }: ReportHeaderProps) => {
     // Use the dynamic image if available, otherwise fall back to the score-based one.
     const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score);
+    const isRecruiter = type === 'recruiter';
     
     const formattedDate = updatedAt ? new Date(updatedAt).toLocaleString(undefined, {
         year: 'numeric',
@@ -30,15 +32,22 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic,
     }) : 'N/A';
 
     return (
-        <div className="mb-8 p-6 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm rounded-lg shadow-lg flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
+        <div
+          className={
+            isRecruiter
+              ? 'mb-8 p-6 rounded-xl shadow-lg flex flex-col md:flex-row items-start md:items-center justify-between gap-6 border'
+              : 'mb-8 p-6 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm rounded-lg shadow-lg flex flex-col md:flex-row items-start md:items-center justify-between gap-6'
+          }
+          style={isRecruiter ? { backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' } : undefined}
+        >
             {/* Left Section */}
             <div className="flex items-center text-left md:text-center">
                 <Image src={finalBadgeImageUrl} alt="KYD Badge" width={150} height={150} unoptimized />
                 <div className='flex flex-col'>
-                    <h1 className="font-bold text-lg text-neutral-900 dark:text-white">
+                    <h1 className={isRecruiter ? 'font-bold text-lg' : 'font-bold text-lg text-neutral-900 dark:text-white'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>
                       KYD Self-Check™
                     </h1>
-                    <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                    <p className={isRecruiter ? 'text-sm' : 'text-sm text-neutral-600 dark:text-neutral-400'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                       {isPublic ? 'Public Report' : 'Private Report'}
                     </p>
                 </div>
@@ -46,16 +55,16 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic,
 
             {/* Middle Section */}
             <div className="text-left md:text-center">
-                <p className="text-sm text-neutral-600 dark:text-neutral-400">Developer</p>
-                <p className="font-semibold text-neutral-900 dark:text-white text-2xl">{developerName || 'N/A'}</p>
+                <p className={isRecruiter ? 'text-sm' : 'text-sm text-neutral-600 dark:text-neutral-400'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>Developer</p>
+                <p className={isRecruiter ? 'font-semibold text-2xl' : 'font-semibold text-neutral-900 dark:text-white text-2xl'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>{developerName || 'N/A'}</p>
             </div>
 
             {/* Right Section */}
-            <div className="text-left text-sm text-neutral-600 dark:text-neutral-400 space-y-1">
-                <p><span className="font-semibold text-neutral-800 dark:text-neutral-200">Requested By:</span> {developerName || 'N/A'}</p>
-                <p><span className="font-semibold text-neutral-800 dark:text-neutral-200">Organization:</span> Unaffiliated</p>
-                <p><span className="font-semibold text-neutral-800 dark:text-neutral-200">Date Completed:</span> {formattedDate}</p>
-                <p><span className="font-semibold text-neutral-800 dark:text-neutral-200">Report ID:</span> {badgeId}</p>
+            <div className={isRecruiter ? 'text-left text-sm space-y-1' : 'text-left text-sm text-neutral-600 dark:text-neutral-400 space-y-1'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
+                <p><span className={isRecruiter ? 'font-semibold' : 'font-semibold text-neutral-800 dark:text-neutral-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Requested By:</span> {developerName || 'N/A'}</p>
+                <p><span className={isRecruiter ? 'font-semibold' : 'font-semibold text-neutral-800 dark:text-neutral-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Organization:</span> Unaffiliated</p>
+                <p><span className={isRecruiter ? 'font-semibold' : 'font-semibold text-neutral-800 dark:text-neutral-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Date Completed:</span> {formattedDate}</p>
+                <p><span className={isRecruiter ? 'font-semibold' : 'font-semibold text-neutral-800 dark:text-neutral-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Report ID:</span> {badgeId}</p>
             </div>
         </div>
     );