Enhance Floating Contributors component with improved activity item styles and GitHub event links

Author: iitzIrFan

src/components/FloatingContributors/FloatingContributors.css

@@ -74,11 +74,24 @@
   padding: 8px 10px;
   border-radius: 10px;
   background-color: rgba(255, 255, 255, 0.08);
-  transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+  cursor: pointer; /* Add pointer cursor to indicate clickable */
 }
 
 .contributor-activity-item:hover {
-  background-color: rgba(255, 255, 255, 0.12);
+  background-color: rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px); /* Slight lift effect on hover */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.contributor-activity-item:focus {
+  outline: 2px solid rgba(102, 126, 234, 0.6);
+  outline-offset: 2px;
+}
+
+.contributor-activity-item:active {
+  transform: translateY(0);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .activity-item-avatar {
@@ -269,12 +282,43 @@
   border: 1px solid rgba(255, 255, 255, 0.1);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
+  position: relative;
+  overflow: hidden;
 }
 
 .floating-contributors-activity:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(102, 126, 234, 0.3);
+  transform: translateY(-3px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+.floating-contributors-activity:focus {
+  outline: 2px solid rgba(102, 126, 234, 0.6);
+  outline-offset: 2px;
+}
+
+.floating-contributors-activity:active {
   transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Subtle link indicator */
+.floating-contributors-activity::after {
+  content: "→";
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%) translateX(20px);
+  opacity: 0;
+  font-size: 16px;
+  color: rgba(102, 126, 234, 0.8);
+  transition: all 0.3s ease;
+}
+
+.floating-contributors-activity:hover::after {
+  transform: translateY(-50%) translateX(0);
+  opacity: 1;
 }
 
 [data-theme='light'] .floating-contributors-activity {
@@ -463,6 +507,30 @@
   transform: scale(1.1);
 }
 
+.contributor-link {
+  position: relative;
+  display: block;
+  transition: all 0.3s ease;
+}
+
+.contributor-link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  transition: all 0.3s ease;
+}
+
+.contributor-link:focus {
+  outline: none;
+}
+
+.contributor-link:focus::after {
+  border-color: rgba(102, 126, 234, 0.8);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
 [data-theme='light'] .contributor-avatar {
   border-color: rgba(0, 0, 0, 0.2);
 }

src/components/FloatingContributors/index.tsx

@@ -390,6 +390,26 @@ const FloatingContributors: React.FC<FloatingContributorsProps> = ({ headerEmbed
     return () => clearInterval(interval);
   }, [activities.length]);
 
+  // Get GitHub URL for event
+  const getGitHubEventUrl = (activity: ContributorActivity): string => {
+    const repoUrl = 'https://github.com/recodehive/recode-website';
+    
+    switch (activity.action) {
+      case 'pushed':
+        return `${repoUrl}/commits`;
+      case 'merged':
+      case 'opened':
+      case 'closed':
+        return `${repoUrl}/pulls`;
+      case 'commented':
+        return `${repoUrl}/issues`;
+      case 'created':
+        return repoUrl;
+      default:
+        return repoUrl;
+    }
+  };
+  
   // Get icon for action type
   const getActionIcon = (action: ContributorActivity['action']): string => {
     switch (action) {
@@ -477,11 +497,15 @@ const FloatingContributors: React.FC<FloatingContributorsProps> = ({ headerEmbed
             <AnimatePresence mode="wait">
               <motion.div
                 key={currentActivityIndex}
-                className="floating-contributors-activity"
+                className="floating-contributors-activity contributor-activity-item"
                 initial={{ opacity: 0, x: 20 }}
                 animate={{ opacity: 1, x: 0 }}
                 exit={{ opacity: 0, x: -20 }}
                 transition={{ duration: 0.4 }}
+                onClick={() => window.open(getGitHubEventUrl(currentActivity), '_blank')}
+                tabIndex={0}
+                role="link"
+                aria-label={`View ${currentActivity.contributor.login}'s ${currentActivity.action} activity on GitHub`}
               >
                 <div className="activity-avatar-container">
                   <motion.img
@@ -538,6 +562,8 @@ const FloatingContributors: React.FC<FloatingContributorsProps> = ({ headerEmbed
                       href={contributor.html_url} 
                       target="_blank" 
                       rel="noopener noreferrer"
+                      aria-label={`View ${contributor.login}'s GitHub profile`}
+                      className="contributor-link"
                     >
                       <img
                         src={contributor.avatar_url}
@@ -563,15 +589,16 @@ const FloatingContributors: React.FC<FloatingContributorsProps> = ({ headerEmbed
             {/* Footer */}
             <div className="floating-contributors-footer">
               <motion.a
-                href="https://github.com/recodehive"
+                href="https://github.com/recodehive/recode-website"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="contributors-cta"
                 whileHover={{ scale: 1.02 }}
                 whileTap={{ scale: 0.98 }}
+                aria-label="View repository on GitHub and join the community"
               >
                 <span className="cta-icon">🚀</span>
-                <span>Join the Community</span>
+                <span>View Repository on GitHub</span>
                 <span className="cta-arrow">→</span>
               </motion.a>
             </div>