@chainloyalty/react 1.1.0 → 1.3.0

package/src/Leaderboard.tsx

@@ -143,6 +143,7 @@ const getRankIcon = (rank: number): React.ReactNode => {
 interface LeaderboardRowProps {
   entry: LeaderboardEntry;
   accentColor: string;
+  theme: ReturnType<typeof getThemeColors>;
   isCurrentUser?: boolean;
   onCopyAddress?: (address: string) => void;
 }
@@ -150,6 +151,7 @@ interface LeaderboardRowProps {
 const LeaderboardRow: React.FC<LeaderboardRowProps> = ({
   entry,
   accentColor,
+  theme,
   isCurrentUser = false,
   onCopyAddress,
 }) => {
@@ -169,9 +171,11 @@ const LeaderboardRow: React.FC<LeaderboardRowProps> = ({
 
   return (
     <tr
-      className={`border-b border-gray-700 transition-all hover:bg-gray-700/30 ${
-        isCurrentUser ? 'bg-gray-700/20' : ''
-      }`}
+      className="border-b transition-all hover:opacity-80"
+      style={{
+        borderColor: theme.border,
+        backgroundColor: isCurrentUser ? 'rgba(0,0,0,0.1)' : 'transparent'
+      }}
     >
       {/* Rank */}
       <td className="px-4 py-3 text-sm">
@@ -191,12 +195,13 @@ const LeaderboardRow: React.FC<LeaderboardRowProps> = ({
       {/* Wallet Address */}
       <td className="px-4 py-3 text-sm">
         <div className="flex items-center gap-2 group">
-          <span className="text-white font-mono">
+          <span className="font-mono" style={{ color: theme.foreground }}>
             {shortenAddress(entry.walletAddress)}
           </span>
           <button
             onClick={handleCopy}
-            className="p-1.5 rounded-md text-gray-500 group-hover:text-gray-300 hover:bg-gray-700/50 transition-all opacity-0 group-hover:opacity-100"
+            className="p-1.5 rounded-md transition-all opacity-0 group-hover:opacity-100"
+            style={{ color: theme.mutedForeground }}
             title={entry.walletAddress}
           >
             {copied ? (
@@ -206,7 +211,7 @@ const LeaderboardRow: React.FC<LeaderboardRowProps> = ({
             )}
           </button>
           {entry.displayName && (
-            <span className="hidden sm:inline text-xs text-gray-400">({entry.displayName})</span>
+            <span className="hidden sm:inline text-xs" style={{ color: theme.mutedForeground }}>({entry.displayName})</span>
           )}
         </div>
       </td>
@@ -217,7 +222,7 @@ const LeaderboardRow: React.FC<LeaderboardRowProps> = ({
           <p className="font-bold" style={{ color: accentColor }}>
             {entry.points.toLocaleString()}
           </p>
-          <p className="text-xs text-gray-400 hidden sm:block">points</p>
+          <p className="text-xs hidden sm:block" style={{ color: theme.mutedForeground }}>points</p>
         </div>
       </td>
 
@@ -226,12 +231,13 @@ const LeaderboardRow: React.FC<LeaderboardRowProps> = ({
         <div
           className="inline-flex items-center gap-1 px-2 py-1 rounded-lg"
           style={{
-            backgroundColor: 'rgba(47, 129, 247, 0.1)',
-            borderColor: accentColor,
+            backgroundColor: theme.muted,
+            borderColor: theme.border,
+            border: '1px solid',
           }}
         >
           <Award className="w-4 h-4" style={{ color: accentColor }} />
-          <span className="font-semibold text-white">{entry.badgesCount}</span>
+          <span className="font-semibold" style={{ color: theme.foreground }}>{entry.badgesCount}</span>
         </div>
       </td>
     </tr>
@@ -261,7 +267,6 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
   // Override with customColors if provided (backward compatibility)
   const accentColor = customColors.accent1 || theme.accent;
   const accentColor2 = customColors.accent2 || theme.primary;
-  const backgroundColor = customColors.background || theme.card;
 
   // Fetch data when timeframe changes
   useEffect(() => {
@@ -299,20 +304,21 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
 
   return (
     <div
-      className="rounded-lg border border-gray-700 overflow-hidden"
-      style={{ backgroundColor }}
+      className="rounded-lg border overflow-hidden"
+      style={{ backgroundColor: theme.card, borderColor: theme.border }}
     >
       {/* Header */}
-      <div className="p-6 border-b border-gray-700">
+      <div className="p-6" style={{ borderBottom: `1px solid ${theme.border}` }}>
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-3">
             <Trophy className="w-6 h-6" style={{ color: accentColor2 }} />
-            <h2 className="text-2xl font-bold text-white">Leaderboard</h2>
+            <h2 className="text-2xl font-bold" style={{ color: theme.foreground }}>Leaderboard</h2>
           </div>
           <button
             onClick={handleRefresh}
             disabled={loading}
-            className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-700 transition-all disabled:opacity-50"
+            className="p-2 rounded-lg transition-all disabled:opacity-50"
+            style={{ color: theme.mutedForeground }}
             title="Refresh leaderboard"
           >
             <RefreshCw className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`} />
@@ -322,11 +328,11 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-4">
           <div
-            className="p-3 rounded-lg border border-gray-700"
-            style={{ backgroundColor: 'rgba(31, 41, 55, 0.5)' }}
+            className="p-3 rounded-lg border"
+            style={{ backgroundColor: theme.muted, borderColor: theme.border }}
           >
-            <p className="text-xs text-gray-400">Total Users</p>
-            <p className="text-2xl font-bold text-white">{data.length.toLocaleString()}</p>
+            <p className="text-xs" style={{ color: theme.mutedForeground }}>Total Users</p>
+            <p className="text-2xl font-bold" style={{ color: theme.foreground }}>{data.length.toLocaleString()}</p>
           </div>
 
           {currentUserRank && (
@@ -335,10 +341,10 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
                 className="p-3 rounded-lg border"
                 style={{
                   borderColor: accentColor,
-                  backgroundColor: 'rgba(47, 129, 247, 0.1)',
+                  backgroundColor: theme.card,
                 }}
               >
-                <p className="text-xs text-gray-400">Your Rank</p>
+                <p className="text-xs" style={{ color: theme.mutedForeground }}>Your Rank</p>
                 <p className="text-2xl font-bold" style={{ color: accentColor }}>
                   #{currentUserRank.rank}
                 </p>
@@ -348,10 +354,10 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
                 className="p-3 rounded-lg border"
                 style={{
                   borderColor: accentColor2,
-                  backgroundColor: 'rgba(63, 185, 80, 0.1)',
+                  backgroundColor: theme.card,
                 }}
               >
-                <p className="text-xs text-gray-400">Your Points</p>
+                <p className="text-xs" style={{ color: theme.mutedForeground }}>Your Points</p>
                 <p className="text-2xl font-bold" style={{ color: accentColor2 }}>
                   {currentUserRank.points.toLocaleString()}
                 </p>
@@ -363,7 +369,7 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
         {/* Filters */}
         {!hideTimeframeFilter && (
           <div className="flex items-center gap-2">
-            <Calendar className="w-4 h-4 text-gray-400" />
+            <Calendar className="w-4 h-4" style={{ color: theme.mutedForeground }} />
             <div className="flex gap-2">
               {(['alltime', 'month'] as const).map((tf) => (
                 <button
@@ -371,8 +377,8 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
                   onClick={() => setTimeframe(tf)}
                   className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
                     timeframe === tf
-                      ? 'text-white'
-                      : 'text-gray-400 hover:text-white hover:bg-gray-700/50'
+                      ? ''
+                      : ''
                   }`}
                   style={
                     timeframe === tf
@@ -380,7 +386,7 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
                           backgroundColor: accentColor,
                           color: 'white',
                         }
-                      : {}
+                      : { color: theme.mutedForeground }
                   }
                 >
                   {tf === 'alltime' ? 'All Time' : 'This Month'}
@@ -392,12 +398,12 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
       </div>
 
       {/* Content */}
-      <div style={{ backgroundColor: 'rgba(31, 41, 55, 0.2)' }}>
+      <div style={{ backgroundColor: theme.background }}>
         {/* Loading State */}
         {loading && !data.length && (
           <div className="p-6 space-y-3">
             {[...Array(5)].map((_, i) => (
-              <div key={i} className="h-12 bg-gray-700 rounded-lg animate-pulse" />
+              <div key={i} className="h-12 rounded-lg animate-pulse" style={{ backgroundColor: theme.muted }} />
             ))}
           </div>
         )}
@@ -405,10 +411,10 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
         {/* Error State */}
         {error && !data.length && (
           <div className="p-6 text-center">
-            <p className="text-red-400 mb-4">{error}</p>
+            <p className="mb-4" style={{ color: '#ef4444' }}>{error}</p>
             <button
               onClick={handleRefresh}
-              className="px-4 py-2 rounded-lg text-white text-sm transition-all"
+              className="px-4 py-2 rounded-lg text-sm transition-all text-white"
               style={{ backgroundColor: accentColor }}
             >
               Try Again
@@ -419,9 +425,9 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
         {/* Empty State */}
         {!loading && !error && data.length === 0 && (
           <div className="p-12 text-center">
-            <TrendingUp className="w-12 h-12 mx-auto mb-4 text-gray-500" />
-            <h3 className="text-lg font-semibold text-white mb-2">No Leaderboard Data</h3>
-            <p className="text-gray-400">The leaderboard will be populated as users start earning points.</p>
+            <TrendingUp className="w-12 h-12 mx-auto mb-4" style={{ color: theme.mutedForeground }} />
+            <h3 className="text-lg font-semibold mb-2" style={{ color: theme.foreground }}>No Leaderboard Data</h3>
+            <p style={{ color: theme.mutedForeground }}>The leaderboard will be populated as users start earning points.</p>
           </div>
         )}
 
@@ -430,17 +436,17 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
           <div className="overflow-x-auto">
             <table className="w-full">
               <thead>
-                <tr className="border-b border-gray-700 bg-gray-800/50">
-                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase">
+                <tr className="border-b" style={{ borderColor: theme.border, backgroundColor: theme.muted }}>
+                  <th className="px-4 py-3 text-left text-xs font-semibold uppercase" style={{ color: theme.mutedForeground }}>
                     Rank
                   </th>
-                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase">
+                  <th className="px-4 py-3 text-left text-xs font-semibold uppercase" style={{ color: theme.mutedForeground }}>
                     Wallet
                   </th>
-                  <th className="px-4 py-3 text-right text-xs font-semibold text-gray-400 uppercase">
+                  <th className="px-4 py-3 text-right text-xs font-semibold uppercase" style={{ color: theme.mutedForeground }}>
                     Points
                   </th>
-                  <th className="px-4 py-3 text-center text-xs font-semibold text-gray-400 uppercase">
+                  <th className="px-4 py-3 text-center text-xs font-semibold uppercase" style={{ color: theme.mutedForeground }}>
                     Badges
                   </th>
                 </tr>
@@ -451,6 +457,7 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
                     key={entry.rank}
                     entry={entry}
                     accentColor={accentColor}
+                    theme={theme}
                     isCurrentUser={
                       walletAddress
                         ? entry.walletAddress.toLowerCase() === walletAddress.toLowerCase()
@@ -470,15 +477,16 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
 
       {/* Pagination */}
       {!compactMode && data.length > itemsPerPage && (
-        <div className="px-6 py-4 border-t border-gray-700 flex items-center justify-between">
-          <div className="text-sm text-gray-400">
+        <div className="px-6 py-4 border-t flex items-center justify-between" style={{ borderColor: theme.border }}>
+          <div className="text-sm" style={{ color: theme.mutedForeground }}>
             Showing {startIndex + 1} to {Math.min(endIndex, data.length)} of {data.length}
           </div>
           <div className="flex gap-2">
             <button
               onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
               disabled={currentPage === 1}
-              className="px-3 py-1.5 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+              className="px-3 py-1.5 rounded-lg text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+              style={{ color: theme.mutedForeground }}
             >
               ← Previous
             </button>
@@ -489,18 +497,14 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
                   <button
                     key={pageNum}
                     onClick={() => setCurrentPage(pageNum)}
-                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
-                      currentPage === pageNum
-                        ? 'text-white'
-                        : 'text-gray-400 hover:text-white hover:bg-gray-700'
-                    }`}
+                    className="px-3 py-1.5 rounded-lg text-sm font-medium transition-all"
                     style={
                       currentPage === pageNum
                         ? {
                             backgroundColor: accentColor,
                             color: 'white',
                           }
-                        : {}
+                        : { color: theme.mutedForeground }
                     }
                   >
                     {pageNum}
@@ -511,7 +515,8 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
             <button
               onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
               disabled={currentPage === totalPages}
-              className="px-3 py-1.5 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+              className="px-3 py-1.5 rounded-lg text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+              style={{ color: theme.mutedForeground }}
             >
               Next →
             </button>
@@ -520,7 +525,7 @@ export const Leaderboard: React.FC<LeaderboardProps> = ({
       )}
 
       {/* Footer */}
-      <div className="px-6 py-3 border-t border-gray-700 flex items-center justify-end text-xs text-gray-500">
+      <div className="px-6 py-3 border-t flex items-center justify-end text-xs" style={{ borderColor: theme.border, color: theme.mutedForeground }}>
         <span className="flex items-center gap-1">
           <ExternalLink className="w-3 h-3" />
           @chainloyalty/react

package/src/RewardsDashboard.tsx

@@ -245,34 +245,40 @@ const getRarityColor = (rarity: string): string => {
 interface RewardHistoryProps {
   items: RewardHistoryItem[];
   accentColor: string;
+  theme: ReturnType<typeof getThemeColors>;
 }
 
-const RewardHistory: React.FC<RewardHistoryProps> = ({ items, accentColor }) => {
+const RewardHistory: React.FC<RewardHistoryProps> = ({ items, accentColor, theme }) => {
   return (
     <div className="space-y-3">
       {items.map((item) => (
         <div
           key={item.id}
-          className="flex items-start justify-between p-3 rounded-lg border border-gray-700 hover:border-gray-600 transition-colors"
-          style={{ borderLeftColor: accentColor, borderLeftWidth: '3px' }}
+          className="flex items-start justify-between p-3 rounded-lg border transition-colors hover:opacity-80"
+          style={{
+            borderColor: theme.border,
+            borderLeftColor: accentColor,
+            borderLeftWidth: '3px',
+            backgroundColor: 'transparent',
+          }}
         >
           <div className="flex-1">
             <div className="flex items-center gap-2">
-              <span className="text-sm font-semibold text-white">{item.title}</span>
-              <span className="text-xs px-2 py-0.5 rounded-full bg-gray-700 text-gray-300">
+              <span className="text-sm font-semibold" style={{ color: theme.foreground }}>{item.title}</span>
+              <span className="text-xs px-2 py-0.5 rounded-full" style={{ backgroundColor: theme.muted, color: theme.mutedForeground }}>
                 {item.type}
               </span>
             </div>
             {item.description && (
-              <p className="text-xs text-gray-400 mt-1">{item.description}</p>
+              <p className="text-xs mt-1" style={{ color: theme.mutedForeground }}>{item.description}</p>
             )}
-            <p className="text-xs text-gray-500 mt-1">{formatDate(item.timestamp)}</p>
+            <p className="text-xs mt-1" style={{ color: theme.mutedForeground }}>{formatDate(item.timestamp)}</p>
           </div>
           <div className="ml-4 text-right">
             <p className="text-lg font-bold" style={{ color: accentColor }}>
               +{item.points}
             </p>
-            <p className="text-xs text-gray-400">points</p>
+            <p className="text-xs" style={{ color: theme.mutedForeground }}>points</p>
           </div>
         </div>
       ))}
@@ -286,10 +292,11 @@ const RewardHistory: React.FC<RewardHistoryProps> = ({ items, accentColor }) =>
 
 interface BadgeGridProps {
   badges: Badge[];
+  theme: ReturnType<typeof getThemeColors>;
   compactMode?: boolean;
 }
 
-const BadgeGrid: React.FC<BadgeGridProps> = ({ badges, compactMode = false }) => {
+const BadgeGrid: React.FC<BadgeGridProps> = ({ badges, theme, compactMode = false }) => {
   const displayBadges = compactMode ? badges.slice(0, 4) : badges;
 
   return (
@@ -302,18 +309,19 @@ const BadgeGrid: React.FC<BadgeGridProps> = ({ badges, compactMode = false }) =>
           className="group relative p-3 rounded-lg border transition-all hover:scale-105 cursor-pointer"
           style={{
             borderColor: getRarityColor(badge.rarity),
-            backgroundColor: 'rgba(31, 41, 55, 0.5)',
+            backgroundColor: theme.card,
+            opacity: 0.9,
           }}
           title={`${badge.name} - ${badge.description}`}
         >
           <div className="text-3xl mb-1 text-center">{badge.icon}</div>
-          <p className="text-xs font-semibold text-white text-center truncate">{badge.name}</p>
-          <p className="text-xs text-gray-400 text-center mt-0.5">
+          <p className="text-xs font-semibold text-center truncate" style={{ color: theme.foreground }}>{badge.name}</p>
+          <p className="text-xs text-center mt-0.5" style={{ color: theme.mutedForeground }}>
             {new Date(badge.earnedAt).toLocaleDateString()}
           </p>
 
           {/* Tooltip on hover */}
-          <div className="hidden group-hover:block absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 p-2 bg-gray-900 border border-gray-700 rounded-lg text-xs text-gray-300 w-32 text-center whitespace-normal z-10">
+          <div className="hidden group-hover:block absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 p-2 border rounded-lg text-xs w-32 text-center whitespace-normal z-10" style={{ backgroundColor: theme.muted, borderColor: theme.border, color: theme.mutedForeground }}>
             {badge.description}
           </div>
         </div>
@@ -329,9 +337,10 @@ const BadgeGrid: React.FC<BadgeGridProps> = ({ badges, compactMode = false }) =>
 interface TierCardProps {
   tier: TierInfo;
   accentColor: string;
+  theme: ReturnType<typeof getThemeColors>;
 }
 
-const TierCard: React.FC<TierCardProps> = ({ tier, accentColor }) => {
+const TierCard: React.FC<TierCardProps> = ({ tier, accentColor, theme }) => {
   const progressPercent = (tier.currentProgress / tier.nextMilestone) * 100;
 
   return (
@@ -339,24 +348,24 @@ const TierCard: React.FC<TierCardProps> = ({ tier, accentColor }) => {
       className="p-4 rounded-lg border"
       style={{
         borderColor: accentColor,
-        backgroundColor: 'rgba(31, 41, 55, 0.3)',
+        backgroundColor: theme.card,
       }}
     >
       <div className="flex items-start justify-between mb-3">
         <div className="flex items-center gap-2">
           <span className="text-3xl">{tier.icon}</span>
           <div>
-            <p className="text-sm font-semibold text-white">{tier.name}</p>
-            <p className="text-xs text-gray-400">Level {tier.level}</p>
+            <p className="text-sm font-semibold" style={{ color: theme.foreground }}>{tier.name}</p>
+            <p className="text-xs" style={{ color: theme.mutedForeground }}>Level {tier.level}</p>
           </div>
         </div>
       </div>
       <div className="space-y-2">
-        <div className="flex justify-between text-xs text-gray-400">
+        <div className="flex justify-between text-xs" style={{ color: theme.mutedForeground }}>
           <span>{tier.currentProgress.toLocaleString()} points</span>
           <span>{tier.nextMilestone.toLocaleString()} goal</span>
         </div>
-        <div className="w-full bg-gray-700 rounded-full h-2 overflow-hidden">
+        <div className="w-full rounded-full h-2 overflow-hidden" style={{ backgroundColor: theme.muted }}>
           <div
             className="h-full rounded-full transition-all duration-500"
             style={{
@@ -438,21 +447,22 @@ export const RewardsDashboard: React.FC<RewardsDashboardProps> = ({
   if (!walletAddress) {
     return (
       <div
-        className="p-6 rounded-lg border border-gray-700 max-w-2xl"
-        style={{ backgroundColor }}
+        className="p-6 rounded-lg border max-w-2xl"
+        style={{ backgroundColor: theme.card, borderColor: theme.border }}
       >
         <div className="text-center">
-          <Lock className="w-12 h-12 mx-auto mb-4 text-gray-500" />
-          <h2 className="text-xl font-bold text-white mb-2">Connect Your Wallet</h2>
-          <p className="text-gray-400 mb-6">
+          <Lock className="w-12 h-12 mx-auto mb-4" style={{ color: theme.mutedForeground }} />
+          <h2 className="text-xl font-bold mb-2" style={{ color: theme.foreground }}>Connect Your Wallet</h2>
+          <p className="mb-6" style={{ color: theme.mutedForeground }}>
             Connect your wallet to view your rewards, badges, and track your achievements.
           </p>
           {onConnectWallet && (
             <button
               onClick={onConnectWallet}
-              className="inline-flex items-center gap-2 px-6 py-2 rounded-lg font-semibold text-white transition-all hover:opacity-90"
+              className="inline-flex items-center gap-2 px-6 py-2 rounded-lg font-semibold transition-all hover:opacity-90"
               style={{
                 backgroundColor: accentColor,
+                color: '#fff',
               }}
             >
               <Wallet className="w-5 h-5" />
@@ -468,13 +478,13 @@ export const RewardsDashboard: React.FC<RewardsDashboardProps> = ({
   if (loading && !data) {
     return (
       <div
-        className="p-6 rounded-lg border border-gray-700 max-w-2xl"
-        style={{ backgroundColor }}
+        className="p-6 rounded-lg border max-w-2xl"
+        style={{ backgroundColor: theme.card, borderColor: theme.border }}
       >
         <div className="space-y-4">
-          <div className="h-20 bg-gray-700 rounded-lg animate-pulse" />
-          <div className="h-40 bg-gray-700 rounded-lg animate-pulse" />
-          <div className="h-32 bg-gray-700 rounded-lg animate-pulse" />
+          <div className="h-20 rounded-lg animate-pulse" style={{ backgroundColor: theme.muted }} />
+          <div className="h-40 rounded-lg animate-pulse" style={{ backgroundColor: theme.muted }} />
+          <div className="h-32 rounded-lg animate-pulse" style={{ backgroundColor: theme.muted }} />
         </div>
       </div>
     );
@@ -484,10 +494,10 @@ export const RewardsDashboard: React.FC<RewardsDashboardProps> = ({
   if (error && !data) {
     return (
       <div
-        className="p-6 rounded-lg border border-red-700 max-w-2xl"
-        style={{ backgroundColor }}
+        className="p-6 rounded-lg border max-w-2xl"
+        style={{ backgroundColor: theme.card, borderColor: '#dc2626' }}
       >
-        <p className="text-red-400">Failed to load rewards: {error}</p>
+        <p style={{ color: '#ef4444' }}>Failed to load rewards: {error}</p>
         <button
           onClick={handleRefresh}
           className="mt-4 px-4 py-2 rounded-lg text-white text-sm transition-all"
@@ -509,28 +519,30 @@ export const RewardsDashboard: React.FC<RewardsDashboardProps> = ({
       {/* Header */}
       <div className="p-6 border-b border-gray-700">
         <div className="flex items-center justify-between mb-4">
-          <h2 className="text-2xl font-bold text-white">Rewards Dashboard</h2>
+          <h2 className="text-2xl font-bold" style={{ color: theme.foreground }}>Rewards Dashboard</h2>
           <button
             onClick={handleRefresh}
             disabled={loading}
-            className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-700 transition-all disabled:opacity-50"
+            className="p-2 rounded-lg transition-all disabled:opacity-50"
+            style={{ color: theme.mutedForeground }}
           >
             <RefreshCw className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`} />
           </button>
         </div>
 
         {/* Wallet Display */}
-        <div className="flex items-center justify-between p-3 rounded-lg bg-gray-800/50 border border-gray-700">
+        <div className="flex items-center justify-between p-3 rounded-lg border" style={{ backgroundColor: theme.muted, borderColor: theme.border }}>
           <div className="flex items-center gap-2">
             <Wallet className="w-5 h-5" style={{ color: accentColor }} />
             <div>
-              <p className="text-xs text-gray-400">Connected Wallet</p>
-              <p className="text-sm font-mono font-semibold text-white">{shortenAddress(walletAddress)}</p>
+              <p className="text-xs" style={{ color: theme.mutedForeground }}>Connected Wallet</p>
+              <p className="text-sm font-mono font-semibold" style={{ color: theme.foreground }}>{shortenAddress(walletAddress)}</p>
             </div>
           </div>
           <button
             onClick={handleCopyAddress}
-            className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-700 transition-all"
+            className="p-2 rounded-lg transition-all"
+            style={{ color: theme.mutedForeground }}
             title={walletAddress}
           >
             {copied ? <CheckCircle className="w-5 h-5" style={{ color: accentColor2 }} /> : <Copy className="w-5 h-5" />}
@@ -539,28 +551,28 @@ export const RewardsDashboard: React.FC<RewardsDashboardProps> = ({
       </div>
 
       {/* Main Content */}
-      <div className={`p-6 space-y-6 ${compactMode ? 'max-w-3xl' : ''}`} style={{backgroundColor: 'rgba(31, 41, 55, 0.2)'}}>
+      <div className={`p-6 space-y-6 ${compactMode ? 'max-w-3xl' : ''}`} style={{backgroundColor: theme.background}}>
         {/* Points Display */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div
             className="p-6 rounded-lg border text-center"
             style={{
               borderColor: accentColor,
-              backgroundColor: 'rgba(47, 129, 247, 0.1)',
+              backgroundColor: theme.card,
             }}
           >
-            <p className="text-sm text-gray-400 mb-2">Total Points</p>
+            <p className="text-sm mb-2" style={{ color: theme.mutedForeground }}>Total Points</p>
             <p className="text-4xl font-bold" style={{ color: accentColor }}>
               {data.totalPoints.toLocaleString()}
             </p>
-            <div className="flex items-center justify-center gap-1 mt-2 text-xs text-gray-400">
+            <div className="flex items-center justify-center gap-1 mt-2 text-xs" style={{ color: theme.mutedForeground }}>
               <TrendingUp className="w-4 h-4" />
               <span>Keep earning rewards</span>
             </div>
           </div>
 
           {!hideTier && (
-            <TierCard tier={data.tier} accentColor={accentColor2} />
+            <TierCard tier={data.tier} accentColor={accentColor2} theme={theme} />
           )}
         </div>
 
@@ -569,11 +581,11 @@ export const RewardsDashboard: React.FC<RewardsDashboardProps> = ({
           <div>
             <div className="flex items-center gap-2 mb-4">
               <Award className="w-5 h-5" style={{ color: accentColor }} />
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-lg font-semibold" style={{ color: theme.foreground }}>
                 Badges ({data.badges.length})
               </h3>
             </div>
-            <BadgeGrid badges={data.badges} compactMode={compactMode} />
+            <BadgeGrid badges={data.badges} theme={theme} compactMode={compactMode} />
           </div>
         )}
 
@@ -582,18 +594,19 @@ export const RewardsDashboard: React.FC<RewardsDashboardProps> = ({
           <div>
             <div className="flex items-center gap-2 mb-4">
               <Zap className="w-5 h-5" style={{ color: accentColor2 }} />
-              <h3 className="text-lg font-semibold text-white">Recent Rewards</h3>
+              <h3 className="text-lg font-semibold" style={{ color: theme.foreground }}>Recent Rewards</h3>
             </div>
             <RewardHistory
               items={compactMode ? data.rewardHistory.slice(0, 3) : data.rewardHistory}
               accentColor={accentColor}
+              theme={theme}
             />
           </div>
         )}
       </div>
 
       {/* Footer */}
-      <div className="px-6 py-3 border-t border-gray-700 flex items-center justify-between text-xs text-gray-500">
+      <div className="px-6 py-3 border-t flex items-center justify-between text-xs" style={{ borderColor: theme.border, color: theme.mutedForeground }}>
         <span>Last updated: {formatDate(data.lastUpdated)}</span>
         <span className="flex items-center gap-1">
           <ExternalLink className="w-3 h-3" />

package/src/index.ts

@@ -14,9 +14,13 @@ export type { RewardsDashboardProps, Badge, RewardHistoryItem, TierInfo, Dashboa
 export { Leaderboard } from './Leaderboard.js';
 export type { LeaderboardProps, LeaderboardEntry, LeaderboardTimeframe } from './Leaderboard.js';
 
+// Export page components
+export { RewardsDashboardPage } from './pages/RewardsDashboardPage.js';
+export { LeaderboardPage } from './pages/LeaderboardPage.js';
+
 // Export theme utilities
 export { getThemeColors, getThemeStylesheet, createThemeStyles } from './theme.js';
 export type { ThemeColors } from './theme.js';
 
 // Version info
-export const PACKAGE_VERSION = '1.0.0';
+export const PACKAGE_VERSION = '1.3.0';