kyd-shared-badge 0.2.3 → 0.2.5

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -17,6 +17,14 @@ const getScoreColor = (score: number) => {
   return red;
 };
 
+const hexToRgba = (hex: string, alpha: number) => {
+  const clean = hex.replace('#', '');
+  const r = parseInt(clean.substring(0, 2), 16);
+  const g = parseInt(clean.substring(2, 4), 16);
+  const b = parseInt(clean.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
 const getRiskText = (risk: number) => {
     if (risk >= 80) return 'Low Risk';
     if (risk >= 65) return 'Medium Risk';
@@ -55,14 +63,14 @@ interface ScoreCardProps {
   description: string;
   descriptor?: string;
   scoreType: 'number' | 'risk' | 'descriptor';
-  isRecruiter?: boolean;
   iconImageSrc: string;
 }
 
-const ScoreCard = ({ title, score, description, descriptor, scoreType, isRecruiter = false, iconImageSrc }: ScoreCardProps) => {
+const ScoreCard = ({ title, score, description, descriptor, scoreType, iconImageSrc }: ScoreCardProps) => {
     const isDescriptor = scoreType === 'descriptor';
     const scoreHex = isDescriptor ? undefined : getScoreColor(score);
     const scoreClass = isDescriptor ? 'text-neutral-400' : '';
+    const overlay = scoreHex ? hexToRgba(scoreHex, 0.08) : 'transparent';
     let displayScore;
 
     if (scoreType === 'risk') {
@@ -76,18 +84,16 @@ const ScoreCard = ({ title, score, description, descriptor, scoreType, isRecruit
     return (
         <div
           className={
-            isRecruiter
-              ? 'p-6 rounded-xl flex flex-col items-center justify-start text-center shadow h-full border'
-              : 'p-6 rounded-lg flex flex-col items-center justify-start text-center dark:bg-neutral-800/50 backdrop-blur-sm bg-white/70 shadow-lg border border-neutral-200 dark:border-neutral-700 h-full'
+              'p-6 rounded-xl flex flex-col items-center justify-start text-center shadow h-full border'
           }
-          style={isRecruiter ? { backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' } : undefined}
+          style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', backgroundImage: `linear-gradient(${overlay}, ${overlay})` }}
         >
             <div className={`text-3xl mb-4 ${scoreClass}`} style={scoreHex ? { color: scoreHex } : undefined}>
               <Image src={iconImageSrc} alt="icon" width={32} height={32} className="h-8 w-8 object-contain" />
             </div>
-            <h3 className={`font-semibold text-xl ${isDescriptor ? 'text-neutral-400' : ''}`} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>{title}</h3>
+            <h3 className={`font-semibold text-xl ${isDescriptor ? 'text-neutral-400' : ''}`} style={{ color: 'var(--text-main)' }}>{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>
+            <p className={'text-sm text-neutral-600 dark:text-neutral-400 mt-4'} style={{ color: 'var(--text-secondary)' }}>{description}</p>
         </div>
     );
 };

package/src/colors.ts

@@ -2,4 +2,42 @@ const red = '#EC6662'
 const yellow = '#ffbb54'
 const green = '#02a389'
 
-export { red, yellow, green }
+export { red, yellow, green }
+
+// red
+
+// #EC6662
+
+// #F1908C
+
+// #F5B7B3
+
+// #FADBDA
+
+// #FDF0EF
+
+
+// // yellow
+
+// #F4BE66
+
+// #F7CF8F
+
+// #F9DFB6
+
+// #FDEFDB
+
+// #FEF9F0
+
+
+// // green
+
+// #02a389
+
+// #7BB9AA
+
+// #A9D1C6
+
+// #D5E8E2
+
+// #EEF6F4

package/src/components/ReportHeader.tsx

@@ -8,6 +8,20 @@ const getBadgeImageUrl = (score: number) => {
   return '/badgered.png';
 };
 
+const hexToRgba = (hex: string, alpha: number) => {
+  const clean = hex.replace('#', '');
+  const r = parseInt(clean.substring(0, 2), 16);
+  const g = parseInt(clean.substring(2, 4), 16);
+  const b = parseInt(clean.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+const pickTint = (score: number) => {
+  if (score >= 75) return '#02a389';
+  if (score >= 50) return '#ffbb54';
+  return '#EC6662';
+};
+
 interface ReportHeaderProps {
     badgeId: string | undefined;
     developerName: string | undefined;
@@ -20,6 +34,7 @@ interface ReportHeaderProps {
 const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic, badgeImageUrl }: ReportHeaderProps) => {
     // Use the dynamic image if available, otherwise fall back to the score-based one.
     const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score);
+    const tint = hexToRgba(pickTint(score), 0.06);
     
     const formattedDate = updatedAt ? new Date(updatedAt).toLocaleString(undefined, {
       year: 'numeric',
@@ -30,7 +45,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic,
     return (
         <div
           className={'mb-8 p-6 rounded-xl shadow-lg flex flex-col md:flex-row items-start md:items-center justify-between gap-6 border'}
-          style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}
+          style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', backgroundImage: `linear-gradient(${tint}, ${tint})` }}
         >
             {/* Left Section */}
             <div className="flex items-center text-left md:text-center gap-5">
@@ -56,7 +71,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic,
                 <p><span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Requested By:</span> {developerName || 'N/A'}</p>
                 <p><span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Organization:</span> Unaffiliated</p>
                 <p><span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Date Generated:</span> {formattedDate}</p>
-                <p><span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Report ID:</span> {badgeId}</p>
+                <p><span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Report ID:</span> {badgeId ? `${badgeId.slice(0,4)}...${badgeId.slice(-4)}` : 'N/A'}</p>
             </div>
         </div>
     );