kyd-shared-badge 0.1.17 → 0.1.20

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -10,6 +10,7 @@ import AppendixTables from './components/AppendixTables';
 import ProviderInsights from './components/ProviderInsights';
 import IpRiskAnalysisDisplay from './components/IpRiskAnalysisDisplay';
 import Image from 'next/image';
+import { red, yellow, green } from './colors';
 
 // Icon images from this package's public folder (will be bundled as assets)
 import RiskGreen from './public/riskgreen.png';
@@ -23,9 +24,9 @@ import AiYellow from './public/aiyellow.png';
 import AiRed from './public/aired.png';
 
 const getScoreColor = (score: number) => {
-    if (score >= 80) return 'text-[#6A9846]';
-    if (score >= 65) return 'text-[#EABE52]';
-    return 'text-[#D3452E]';
+  if (score >= 80) return green;
+  if (score >= 65) return yellow;
+  return red;
 };
 
 const getRiskText = (risk: number) => {
@@ -72,7 +73,9 @@ interface ScoreCardProps {
 }
 
 const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreType, isRecruiter = false, iconImageSrc }: ScoreCardProps) => {
-    const scoreColor = scoreType === 'descriptor' ? 'text-neutral-400' : getScoreColor(score);
+    const isDescriptor = scoreType === 'descriptor';
+    const scoreHex = isDescriptor ? undefined : getScoreColor(score);
+    const scoreClass = isDescriptor ? 'text-neutral-400' : '';
     let displayScore;
 
     if (scoreType === 'risk') {
@@ -92,7 +95,7 @@ const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreTyp
           }
           style={isRecruiter ? { backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' } : undefined}
         >
-            <div className={`text-3xl mb-4 ${scoreColor}`}>
+            <div className={`text-3xl mb-4 ${scoreClass}`} style={scoreHex ? { color: scoreHex } : undefined}>
                 {iconImageSrc ? (
                   // eslint-disable-next-line @next/next/no-img-element
                   <Image src={iconImageSrc} alt="icon" className="h-8 w-8 object-contain" />
@@ -100,8 +103,8 @@ const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreTyp
                   <Icon />
                 )}
             </div>
-            <h3 className={`font-semibold text-xl ${scoreType === 'descriptor' ? 'text-neutral-400' : ''}`} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>{title}</h3>
-            <p className={`text-4xl font-bold ${scoreColor}`}>{displayScore}</p>
+            <h3 className={`font-semibold text-xl ${isDescriptor ? 'text-neutral-400' : ''}`} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>{title}</h3>
+            <p className={`text-4xl font-bold ${scoreClass}`} style={scoreHex ? { color: scoreHex } : undefined}>{displayScore}</p>
             <p className={isRecruiter ? 'text-sm mt-4' : 'text-sm text-neutral-600 dark:text-neutral-400 mt-4'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>{description}</p>
         </div>
     );
@@ -217,14 +220,14 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                 <div className="pt-8">
                       <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={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={isRecruiter ? 'mb-4 p-4 rounded-lg border' : 'mb-4 p-4 rounded-lg border'} style={isRecruiter ? { backgroundColor: 'var(--icon-button-secondary)', borderColor: 'var(--icon-button-secondary)' } : { backgroundColor: '#FFF7E6', borderColor: yellow }}>
                               <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">
+                                  <span className="h-5 w-5 mr-3 mt-0.5 flex-shrink-0" style={{ color: yellow }}>
                                       <FiAlertTriangle size={20} />
                                   </span>
                                   <div>
-                                      <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}>
+                                      <h4 className={'font-bold'} style={isRecruiter ? { color: 'var(--text-main)' } : { color: yellow }}>User Opted Out of Screening</h4>
+                                      <p className={'text-sm mt-1'} style={isRecruiter ? { color: 'var(--text-secondary)' } : { color: yellow }}>
                                           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>

package/src/colors.ts

@@ -1,26 +1,5 @@
-const redColors = [
-    '#EC6662',
-    '#F1908C',
-    '#F5B7B3',
-    '#FADBDA',
-    '#FDF0EF',
-]
+const red = '#EC6662'
+const yellow = '#ffbb54'
+const green = '#49a08a'
 
-
-const yellowColors = [
-    '#FADBDA',
-    '#F2CA8C',
-    '#F9DFB6',
-    '#FDEFDB',
-    '#FEF9F0',
-]
-
-const greenColors = [
-    '#48A08A',
-    '#7BB9AA',
-    '#A5CCC2',
-    '#D5E8E2',
-    '#EEF6F4',
-]
-
-export { redColors, yellowColors, greenColors }
+export { red, yellow, green }