redesigned card to light theme and added official logo

Author: SamXop123

src/utils/cardGenerator.ts

@@ -76,17 +76,48 @@ export async function generateShareCard(data: ShareCardData): Promise<Blob> {
     throw new Error("Could not get 2d context from canvas");
   }
 
-  // 1. Draw Base Dark Gradient Background
+  // 0. Pre-load all assets concurrently (Logo, Avatar, and Badges)
+  let logoImg: HTMLImageElement | null = null;
+  let avatarImg: HTMLImageElement | null = null;
+
+  const logoPromise = loadImage("/img/logo.png")
+    .then((img) => {
+      logoImg = img;
+    })
+    .catch((err) => console.warn("Could not load logo: ", err));
+
+  const avatarPromise = loadImage(data.avatarUrl)
+    .then((img) => {
+      avatarImg = img;
+    })
+    .catch((err) => console.warn("Could not load avatar: ", err));
+
+  const badgePromises = data.allBadges.map(async (badge) => {
+    try {
+      const img = await loadImage(badge.image);
+      return { image: badge.image, img, loaded: true };
+    } catch {
+      return { image: badge.image, img: null, loaded: false };
+    }
+  });
+
+  const [, , loadedBadges] = await Promise.all([
+    logoPromise,
+    avatarPromise,
+    Promise.all(badgePromises),
+  ]);
+
+  // 1. Draw Base Light Radial Gradient Background
   const bgGrad = ctx.createRadialGradient(600, 315, 100, 600, 315, 700);
-  bgGrad.addColorStop(0, "#1e1b4b"); // Dark Indigo center
-  bgGrad.addColorStop(1, "#09090e"); // Near-black edges
+  bgGrad.addColorStop(0, "#ffffff"); // Pure white center
+  bgGrad.addColorStop(1, "#f1f5f9"); // Soft slate-grey-blue edges
   ctx.fillStyle = bgGrad;
   ctx.fillRect(0, 0, 1200, 630);
 
-  // 2. Draw Decorative Ambient Glow Circles
+  // 2. Draw Decorative Subtle Ambient Glow Circles
   // Left ambient glow (indigo)
   const leftGlow = ctx.createRadialGradient(250, 250, 50, 250, 250, 350);
-  leftGlow.addColorStop(0, "rgba(99, 102, 241, 0.12)");
+  leftGlow.addColorStop(0, "rgba(99, 102, 241, 0.05)");
   leftGlow.addColorStop(1, "rgba(99, 102, 241, 0)");
   ctx.fillStyle = leftGlow;
   ctx.beginPath();
@@ -95,80 +126,86 @@ export async function generateShareCard(data: ShareCardData): Promise<Blob> {
 
   // Right ambient glow (violet/purple)
   const rightGlow = ctx.createRadialGradient(950, 380, 50, 950, 380, 350);
-  rightGlow.addColorStop(0, "rgba(139, 92, 246, 0.12)");
-  rightGlow.addColorStop(1, "rgba(139, 92, 246, 0)");
+  rightGlow.addColorStop(0, "rgba(168, 85, 247, 0.05)");
+  rightGlow.addColorStop(1, "rgba(168, 85, 247, 0)");
   ctx.fillStyle = rightGlow;
   ctx.beginPath();
   ctx.arc(950, 380, 350, 0, Math.PI * 2);
   ctx.fill();
 
-  // 3. Draw Glassmorphic Card Container
+  // 3. Draw Premium Light Glassmorphic Card Container
   ctx.save();
+  // Premium soft drop shadow
+  ctx.shadowColor = "rgba(15, 23, 42, 0.06)";
+  ctx.shadowBlur = 30;
+  ctx.shadowOffsetY = 12;
+  ctx.shadowOffsetX = 0;
+
   drawRoundedRect(ctx, 50, 50, 1100, 530, 24);
   // Fill gradient
   const cardGrad = ctx.createLinearGradient(50, 50, 1150, 580);
-  cardGrad.addColorStop(0, "rgba(30, 41, 59, 0.45)");
-  cardGrad.addColorStop(1, "rgba(15, 23, 42, 0.65)");
+  cardGrad.addColorStop(0, "rgba(255, 255, 255, 0.92)");
+  cardGrad.addColorStop(1, "rgba(248, 250, 252, 0.95)");
   ctx.fillStyle = cardGrad;
   ctx.fill();
+
+  // Disable shadow for border/stroke
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetY = 0;
+
   // Stroke border
   ctx.lineWidth = 1.5;
   const strokeGrad = ctx.createLinearGradient(50, 50, 1150, 580);
-  strokeGrad.addColorStop(0, "rgba(255, 255, 255, 0.12)");
-  strokeGrad.addColorStop(0.5, "rgba(255, 255, 255, 0.04)");
-  strokeGrad.addColorStop(1, "rgba(99, 102, 241, 0.25)");
+  strokeGrad.addColorStop(0, "rgba(255, 255, 255, 0.9)");
+  strokeGrad.addColorStop(0.5, "rgba(226, 232, 240, 0.8)");
+  strokeGrad.addColorStop(1, "rgba(99, 102, 241, 0.15)");
   ctx.strokeStyle = strokeGrad;
   ctx.stroke();
   ctx.restore();
 
   // 4. Draw Recode Hive Logo (Top-Left)
-  // Glowing hexagon logo mark
-  ctx.save();
-  drawHexagon(ctx, 110, 115, 22);
-  const logoGrad = ctx.createLinearGradient(90, 95, 130, 135);
-  logoGrad.addColorStop(0, "#6366f1"); // Indigo
-  logoGrad.addColorStop(1, "#a855f7"); // Purple
-  ctx.fillStyle = logoGrad;
-  ctx.fill();
-  ctx.restore();
+  if (logoImg) {
+    ctx.drawImage(logoImg, 86, 91, 48, 48);
+  } else {
+    // Fallback: Glowing hexagon logo mark
+    ctx.save();
+    drawHexagon(ctx, 110, 115, 22);
+    const logoGrad = ctx.createLinearGradient(90, 95, 130, 135);
+    logoGrad.addColorStop(0, "#6366f1"); // Indigo
+    logoGrad.addColorStop(1, "#a855f7"); // Purple
+    ctx.fillStyle = logoGrad;
+    ctx.fill();
+    ctx.restore();
+  }
 
   // Logo text
   ctx.font = "bold 38px Inter, system-ui, -apple-system, sans-serif";
-  ctx.fillStyle = "#ffffff";
+  ctx.fillStyle = "#0f172a"; // Deep slate
   ctx.fillText("recode", 155, 120);
 
-  ctx.fillStyle = "#f59e0b"; // Golden yellow
+  ctx.fillStyle = "#d97706"; // Amber-gold (highly readable on light theme)
   ctx.fillText("hive", 280, 120);
 
   // Subtitle / Tagline
   ctx.font = "500 16px Inter, system-ui, -apple-system, sans-serif";
-  ctx.fillStyle = "#64748b"; // Cool slate gray
+  ctx.fillStyle = "#475569"; // Slate gray (darker for readability)
   ctx.fillText("Learn, Build & Grow with Open Source", 155, 146);
 
-  // 5. Load and Draw Contributor Avatar
+  // 5. Draw Contributor Avatar
   const avatarX = 160;
   const avatarY = 285;
   const avatarRadius = 70;
 
-  let avatarLoaded = false;
-  let avatarImg: HTMLImageElement | null = null;
-  try {
-    avatarImg = await loadImage(data.avatarUrl);
-    avatarLoaded = true;
-  } catch (err) {
-    console.warn("Could not load contributor avatar: ", err);
-  }
-
   // Draw Avatar ring glow
   ctx.save();
   ctx.beginPath();
   ctx.arc(avatarX, avatarY, avatarRadius + 5, 0, Math.PI * 2);
-  ctx.strokeStyle = "rgba(99, 102, 241, 0.5)";
+  ctx.strokeStyle = "rgba(99, 102, 241, 0.15)";
   ctx.lineWidth = 4;
   ctx.stroke();
   ctx.restore();
 
-  if (avatarLoaded && avatarImg) {
+  if (avatarImg) {
     ctx.save();
     ctx.beginPath();
     ctx.arc(avatarX, avatarY, avatarRadius, 0, Math.PI * 2);
@@ -213,33 +250,33 @@ export async function generateShareCard(data: ShareCardData): Promise<Blob> {
 
   // Username
   ctx.font = "bold 38px Inter, system-ui, -apple-system, sans-serif";
-  ctx.fillStyle = "#ffffff";
+  ctx.fillStyle = "#0f172a"; // Deep slate
   ctx.fillText(`@${data.username}`, 260, 275);
 
   // Rank Pill
   const pillX = 260;
   const pillY = 295;
-  const pillW = 145;
+  const pillW = 165;
   const pillH = 34;
   const pillR = 17;
 
   ctx.save();
   drawRoundedRect(ctx, pillX, pillY, pillW, pillH, pillR);
-  ctx.fillStyle = "rgba(99, 102, 241, 0.15)";
+  ctx.fillStyle = "rgba(99, 102, 241, 0.08)";
   ctx.fill();
-  ctx.strokeStyle = "rgba(99, 102, 241, 0.4)";
+  ctx.strokeStyle = "rgba(99, 102, 241, 0.25)";
   ctx.lineWidth = 1.2;
   ctx.stroke();
 
   ctx.font = "bold 15px Inter, system-ui, -apple-system, sans-serif";
-  ctx.fillStyle = "#93c5fd"; // Sky blue text
+  ctx.fillStyle = "#4f46e5"; // Indigo/violet rank text
   ctx.textAlign = "center";
   ctx.fillText(`Leaderboard Rank #${data.rank}`, pillX + pillW / 2, pillY + 22);
   ctx.restore();
 
   // 7. Draw Divider & Stats Section
   // Divider
-  ctx.strokeStyle = "rgba(255, 255, 255, 0.08)";
+  ctx.strokeStyle = "rgba(226, 232, 240, 0.8)";
   ctx.lineWidth = 1.5;
   ctx.beginPath();
   ctx.moveTo(760, 220);
@@ -249,24 +286,24 @@ export async function generateShareCard(data: ShareCardData): Promise<Blob> {
   // Merged PRs Column
   ctx.textAlign = "center";
   ctx.font = "bold 68px Inter, system-ui, -apple-system, sans-serif";
-  ctx.fillStyle = "#ffffff";
+  ctx.fillStyle = "#0f172a"; // Deep slate
   ctx.fillText(data.prs.toString(), 640, 280);
 
   ctx.font = "bold 14px Inter, system-ui, -apple-system, sans-serif";
-  ctx.fillStyle = "#64748b";
+  ctx.fillStyle = "#64748b"; // Slate grey label
   ctx.fillText("MERGED PRS", 640, 310);
 
   // Total Points Column
   ctx.font = "bold 68px Inter, system-ui, -apple-system, sans-serif";
-  ctx.fillStyle = "#8b5cf6"; // Highlight purple
+  ctx.fillStyle = "#7c3aed"; // Violet highlight
   ctx.fillText(data.points.toString(), 880, 280);
 
   ctx.font = "bold 14px Inter, system-ui, -apple-system, sans-serif";
-  ctx.fillStyle = "#64748b";
+  ctx.fillStyle = "#64748b"; // Slate grey label
   ctx.fillText("TOTAL POINTS", 880, 310);
 
   // 8. Draw Lower Divider & Badges Section
-  ctx.strokeStyle = "rgba(255, 255, 255, 0.08)";
+  ctx.strokeStyle = "rgba(226, 232, 240, 0.8)";
   ctx.beginPath();
   ctx.moveTo(100, 395);
   ctx.lineTo(1100, 395);
@@ -278,19 +315,6 @@ export async function generateShareCard(data: ShareCardData): Promise<Blob> {
   ctx.fillStyle = "#64748b";
   ctx.fillText("UNLOCKED CONTRIBUTOR ACHIEVEMENTS", 100, 430);
 
-  // Load and Draw all Badges
-  // Pre-load all images to draw them inline
-  const badgePromises = data.allBadges.map(async (badge) => {
-    try {
-      const img = await loadImage(badge.image);
-      return { image: badge.image, img, loaded: true };
-    } catch {
-      return { image: badge.image, img: null, loaded: false };
-    }
-  });
-
-  const loadedBadges = await Promise.all(badgePromises);
-
   // Position and draw badges
   const badgeWidth = 64;
   const badgeHeight = 64;
@@ -305,8 +329,8 @@ export async function generateShareCard(data: ShareCardData): Promise<Blob> {
     ctx.save();
     if (isEarned) {
       ctx.globalAlpha = 1.0;
-      // Add subtle drop shadow under earned badges
-      ctx.shadowColor = "rgba(139, 92, 246, 0.4)";
+      // Soft drop shadow under earned badges for light theme
+      ctx.shadowColor = "rgba(99, 102, 241, 0.2)";
       ctx.shadowBlur = 12;
       ctx.shadowOffsetY = 4;
     } else {
@@ -326,7 +350,7 @@ export async function generateShareCard(data: ShareCardData): Promise<Blob> {
         0,
         Math.PI * 2
       );
-      ctx.fillStyle = isEarned ? "#8b5cf6" : "#334155";
+      ctx.fillStyle = isEarned ? "#7c3aed" : "#cbd5e1";
       ctx.fill();
     }
     ctx.restore();