kyd-shared-badge 0.1.16 → 0.1.18

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -9,6 +9,8 @@ import ReportHeader from './components/ReportHeader';
 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';
@@ -22,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) => {
@@ -71,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') {
@@ -91,16 +95,16 @@ 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
-                  <img src={iconImageSrc} alt="icon" className="h-8 w-8 object-contain" />
+                  <Image src={iconImageSrc} alt="icon" className="h-8 w-8 object-contain" />
                 ) : (
                   <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>
     );

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 }