kyd-shared-badge 0.3.109 → 0.3.110

package/package.json

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

package/src/PrintableBadgeDisplay.tsx

@@ -139,6 +139,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
             accountAuthenticity={assessmentResult?.account_authenticity}
             companyName={badgeData.companyName}
+            rightBadgeLayout={!assessmentResult?.enterprise_match}
         />
       </Reveal>
       {/* Coaching / Evidence under header when present */}

package/src/SharedBadgeDisplay.tsx

@@ -226,6 +226,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false
               companyName={badgeData.companyName}
               sourcesProviders={(badgeData?.connectedAccounts || []).map(a => (a?.name || '').toLowerCase())}
               selfCheck={selfCheck}
+              rightBadgeLayout={!hasEnterpriseMatch}
             />
           </div>
           {/* Top-right: Role match section */}

package/src/components/GaugeCard.tsx

@@ -74,10 +74,8 @@ export default function GaugeCard({
     >
       <div className="mb-3 flex items-start justify-between gap-2 pt-5 px-5">
         <div>
-          <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{title}</div>
-          {description ? (
-            <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>{description}</div>
-          ) : null}
+          <div className={'font-semibold text-xl'} style={{ color: 'var(--text-main)' }}>{title}</div>
+          <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>{description}</div>
         </div>
         {(tooltipText || description) && (
           <span className={'relative inline-flex items-center group cursor-help'} style={{ color: 'var(--text-secondary)' }}>

package/src/components/ReportHeader.tsx

@@ -52,9 +52,10 @@ interface ReportHeaderProps {
     companyName?: string;
     sourcesProviders?: string[];
     selfCheck?: boolean;
+    rightBadgeLayout?: boolean;
 }
 
-const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [], accountAuthenticity, companyName, sourcesProviders = [], selfCheck }: ReportHeaderProps) => {
+const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [], accountAuthenticity, companyName, sourcesProviders = [], selfCheck, rightBadgeLayout }: ReportHeaderProps) => {
   // Use the dynamic image if available, otherwise fall back to the score-based one.
   const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score || 0);
   const tint = hexToRgba(pickTint(score || 0, selfCheck), 0.06);
@@ -98,9 +99,9 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
           </div>
         );
       })()}
-      <div className="flex flex-col gap-3">
+      <div className={`flex gap-3 ${rightBadgeLayout ? 'flex-col md:flex-row items-center justify-between' : 'flex-col'}`}>
         {/* Info section: Title, Candidate, Details and Summary */}
-        <div className="w-full">
+        <div className={`w-full ${rightBadgeLayout ? 'md:flex-1' : ''}`}>
           <div className='space-y-2'>
             <span className='flex gap-2 w-full items-end text-start justify-start'>
               <h2 className={'text-xl font-light'} style={{ color: 'var(--text-main)' }}>KYD Candidate:</h2>
@@ -188,11 +189,18 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
         </div>
 
         {/* Badge Image with robust centered overlay */}
-        <div className="w-full flex items-center justify-center self-stretch">
-          <div className="relative w-full max-w-xs select-none">
-            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={100} height={100} priority className='w-full h-auto pointer-events-none p-10'/>
-            <div className="pointer-events-none absolute left-1/2 top-[66%] -translate-x-1/2 -translate-y-1/2">
-              <div className="font-extrabold text-black text-3xl ">
+        <div className={`flex items-center ${rightBadgeLayout ? 'md:justify-end h-20' : 'justify-center w-full mt-4'} `}>
+          <div className={`relative w-full ${rightBadgeLayout ? 'max-w-[85px]' : 'px-20'} select-none`}>
+            <Image 
+              src={finalBadgeImageUrl} 
+              alt="KYD Badge" 
+              width={rightBadgeLayout ? 25 : 100} 
+              height={rightBadgeLayout ? 25 : 100} 
+              priority 
+              className='w-full h-auto pointer-events-none'
+            />
+            <div className={`pointer-events-none absolute left-1/2  -translate-x-1/2 -translate-y-1/2 ${rightBadgeLayout ? 'top-[72%]' : 'top-[69%]'}`}>
+              <div className={`font-extrabold text-black ${rightBadgeLayout ? 'text-xs' : 'text-3xl'}`}>
                 {Math.round(score || 0)}%
               </div>
             </div>

package/src/components/RiskCard.tsx

@@ -58,9 +58,9 @@ export default function RiskCard({
     >
       <div className="mb-3 flex items-start justify-between gap-2">
         <div>
-          <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{title}</div>
+          <div className={'font-semibold text-xl'} style={{ color: 'var(--text-main)' }}>{title}</div>
           {description ? (
-            <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>{description}</div>
+            <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>{description}</div>
           ) : null}
         </div>
         {(tooltipText || description) && (

package/src/components/RoleOverviewCard.tsx

@@ -31,7 +31,7 @@ export default function RoleOverviewCard({
 
   const tickLabels = useMemo(() => ({
     type: 'outer' as const,
-    hideMinMax: false,
+    hideMinMax: true,
     defaultTickLineConfig: {
       length: 7,
       width: 1,
@@ -45,11 +45,9 @@ export default function RoleOverviewCard({
       }
     },
     ticks: [
-      { value: 0, valueConfig: { formatTextValue: () => 'Very Weak' } }, // Incompatible is too long, gets cut off
-      { value: 25, valueConfig: { formatTextValue: () => 'Weak' } },
+      { value: 16, valueConfig: { formatTextValue: () => 'Weak' } },
       { value: 50, valueConfig: { formatTextValue: () => 'Partial' } },
-      { value: 75, valueConfig: { formatTextValue: () => 'Strong' } },
-      { value: 100, valueConfig: { formatTextValue: () => 'Optimal' } },
+      { value: 83, valueConfig: { formatTextValue: () => 'Strong' } },
     ]
   }), []);