fix(click handler, ui)

Author: Ajit Kumar

src/pages/sponsor/style.scss

@@ -59,7 +59,7 @@
     margin-bottom: 15px;
     background-color: var(--popup-background-color);
     color: var(--popup-text-color);
-    border: 1px solid var(--popup-border-color);
+    border: 1px solid var(--border-color);
     transition: all 0.3s ease;
     animation: fadeInUp 0.8s ease-out calc(0.6s + var(--delay, 0s)) both;
     box-sizing: border-box;

src/pages/sponsors/sponsors.js

@@ -40,7 +40,7 @@ export default function Sponsors() {
 			</div>
 			<div className="sponsors-container">
 				<h2>Acode's Sponsors</h2>
-				<div className="sponsors-list">
+				<div className="sponsors-list" onclick={handleLinkClick}>
 					<div className="tier">
 						<div className="tier-name">
 							<span className="tier-icon titanium"></span>Titanium
@@ -159,21 +159,33 @@ function SponsorCard({ name, image, website, tier, tagline }) {
 	return (
 		<div
 			attr-role="button"
+			data-website={website}
 			className={`sponsor-card ${tier}`}
-			onclick={() => {
-				if (!website) return;
-				if (!website.startsWith("http")) {
-					website = "http://" + website;
-				}
-				system.openInBrowser(website);
-			}}
 		>
-			<div className="sponsor-avatar">
-				<img src={`https://acode.app/sponsor/image/${image}`} />
-			</div>
+			{image && (
+				<div className="sponsor-avatar">
+					<img src={`https://acode.app/sponsor/image/${image}`} />
+				</div>
+			)}
 			<div className="sponsor-name">{name}</div>
-			<div className="sponsor-tagline">{tagline}</div>
+			{tagline && <div className="sponsor-tagline">{tagline}</div>}
 			{website && <small className="sponsor-website">{website}</small>}
 		</div>
 	);
 }
+
+/**
+ * Handle link click
+ * @param {MouseEvent} e
+ * @returns
+ */
+function handleLinkClick(e) {
+	const target = e.target.closest(".sponsor-card");
+	if (!target) return;
+	const { website } = target.dataset;
+	if (!website) return;
+	if (!website.startsWith("http")) {
+		website = "http://" + website;
+	}
+	system.openInBrowser(website);
+}

src/pages/sponsors/style.scss

@@ -106,7 +106,7 @@
       padding: 15px;
       text-align: center;
       backdrop-filter: blur(10px);
-      border: 1px solid var(--popup-border-color);
+      border: 1px solid var(--border-color);
       transition: all 0.3s ease;
 
       .sponsor-avatar {