Merge pull request #820 from Bivek01/fix/issue-812-ui-ux-bugs

fix: improve track progress visibility and UI interactions

Author: komalharshita

.gitignore

@@ -696,9 +696,9 @@ function recordSearch() {
 
     clearAllErrors();
 
-    if (skillsTextInput.value.trim()) {
-      addSkill(skillsTextInput.value);
-      skillsTextInput.value = "";
+    if (skillsInput.value.trim()) {
+      addSkill(skillsInput.value);
+      skillsInput.value = "";
       hideSuggestions();
     }
 
@@ -839,47 +839,16 @@ function recordSearch() {
     resultsSection.scrollIntoView({ behavior: "smooth" });
   }
 
-  //takes the array of projects from the api and draws them on the page as cards
-  //if array is empty it shows the "no results" message instead
-  function renderResults(projects, message) {
-    console.log("Rendering results with projects:", projects);
-    console.log("Message:", message);
-    
-    resultsSection.style.display = "block";
-    resultsLoadingEl.style.display = "none";
-    // Clear out any cards from a previous search before showing new ones
-    resultsGrid.innerHTML = "";
-    recordSearch();
-
-    if (!projects || projects.length === 0) {
-      resultsGrid.style.display = "none";
-      resultsEmptyEl.style.display = "block";
-
-      // Show a friendly custom message when the user selected an interest
-      var selectedInterest = document.getElementById("interest")?.value;
-      if (selectedInterest) {
-        emptyMessageEl.textContent = "No projects are currently available for this interest. Please check back later or try a different area.";
-      } else if (message) {
-        emptyMessageEl.textContent = message;
-      } else {
-        emptyMessageEl.textContent = "Try adjusting your skills or choosing a different interest area.";
-      }
-
-  // Clear out previous results before rendering new ones
-  resultsGrid.innerHTML = "";
-
-  // If no projects are returned, show the empty state message
-  if (!projects || projects.length === 0) {
-    resultsGrid.style.display = "none";
-    resultsEmptyEl.style.display = "block";
-
-    projects.forEach(function (project) {
-      resultsGrid.appendChild(buildProjectCard(project));
-    });
+  function truncate(text, maxLength) {
+    text = text || "";
+    return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
+  }
 
-    recordSearch();
-    resultsSection.scrollIntoView({ behavior: "smooth" });
-    return;
+  function createTag(text, type) {
+    var span = document.createElement("span");
+    span.className = "project-tag project-tag--" + normalize(type).replace(/[^a-z0-9_-]/g, "-");
+    span.textContent = text;
+    return span;
   }
 
   function buildProjectCard(project) {
@@ -1312,33 +1281,38 @@ if (
           fetchBtn.textContent = 'Fetch Skills';
       }
   });
-}
-
-/* ---- Scroll-to-top button ---- */
+  update();
+})();
 
-/* Show the button only when the user has scrolled more than 300px */
-var SCROLL_THRESHOLD = 300;
+(function initScrollSpy() {
+  var sections = document.querySelectorAll("section[id], header[id]");
+  var navLinks = document.querySelectorAll(".nav-link, .nav-mobile-link");
 
-/* Get the button element; guard against pages that do not have it */
-var scrollTopBtn = document.getElementById('scroll-top-btn');
+  if (sections.length === 0 || navLinks.length === 0) return;
 
-/* Add or remove the .visible class based on scroll position */
-function handleScroll() {
-  if (!scrollTopBtn) return;
-  if (window.pageYOffset > SCROLL_THRESHOLD) {
-    scrollTopBtn.classList.add('visible');
-  } else {
-    scrollTopBtn.classList.remove('visible');
-  }
-}
+  var observerOptions = {
+    root: null,
+    rootMargin: "-20% 0px -70% 0px",
+    threshold: 0
+  };
 
-/* Smooth-scroll to the very top of the page */
-function scrollToTop() {
-  window.scrollTo({ top: 0, behavior: 'smooth' });
-}
+  var observer = new IntersectionObserver(function (entries) {
+    entries.forEach(function (entry) {
+      if (entry.isIntersecting) {
+        var id = entry.target.getAttribute("id");
+        navLinks.forEach(function (link) {
+          var href = link.getAttribute("href");
+          if (href === "#" + id) {
+            link.classList.add("active");
+          } else if (href && href.startsWith("#")) {
+            link.classList.remove("active");
+          }
+        });
+      }
+    });
+  }, observerOptions);
 
-/* Only wire up listeners if the button exists on this page */
-if (scrollTopBtn) {
-    window.addEventListener('scroll', handleScroll);
-    scrollTopBtn.addEventListener('click', scrollToTop);
-}
+  sections.forEach(function (sec) {
+    observer.observe(sec);
+  });
+})();

static/script.js

@@ -662,12 +662,14 @@ html[data-entry-anim="true"] .form-card form > .btn-submit              { animat
     opacity   0.25s ease;
 }
 
-.nav-link:hover {
+.nav-link:hover,
+.nav-link.active {
   color: #ffffff;
   text-decoration: none;
 }
 
-.nav-link:hover::after {
+.nav-link:hover::after,
+.nav-link.active::after {
   transform: translateX(-50%) scaleX(1);
   opacity: 1;
 }
@@ -788,12 +790,14 @@ html[data-entry-anim="true"] .form-card form > .btn-submit              { animat
     opacity   0.25s ease;
 }
 
-.nav-mobile-link:hover {
+.nav-mobile-link:hover,
+.nav-mobile-link.active {
   color: #ffffff;
   text-decoration: none;
 }
 
-.nav-mobile-link:hover::after {
+.nav-mobile-link:hover::after,
+.nav-mobile-link.active::after {
   transform: scaleX(1);
   opacity: 1;
 }
@@ -3372,16 +3376,19 @@ input[type="text"]:not(.skill-input-wrap input):focus {
 .profile-card,
 .badge-card,
 .achievement-card,
+.history-card,
 .leaderboard-card {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(148, 163, 184, 0.12);
+  background: var(--surface);
+  border: 1px solid var(--border);
   border-radius: 28px;
   padding: 28px;
+  box-shadow: var(--shadow-sm);
 }
 
 .profile-card-header,
 .badge-card-header,
 .achievement-card-header,
+.history-card-header,
 .leaderboard-card-header {
   display: flex;
   align-items: center;
@@ -3393,19 +3400,21 @@ input[type="text"]:not(.skill-input-wrap input):focus {
 .profile-label {
   display: block;
   margin-bottom: 8px;
-  color: rgba(148, 163, 184, 1);
+  color: var(--text-body);
   font-size: 0.92rem;
+  font-weight: 500;
 }
 
 .profile-card h3 {
   font-size: 3rem;
   margin: 0;
+  color: var(--text-heading);
 }
 
 .progress-meter {
   width: 100%;
   height: 16px;
-  background: rgba(148, 163, 184, 0.14);
+  background: var(--surface-hover);
   border-radius: 999px;
   overflow: hidden;
   margin-bottom: 20px;
@@ -3419,9 +3428,10 @@ input[type="text"]:not(.skill-input-wrap input):focus {
   width: 0;
   height: 100%;
   background: linear-gradient(120deg, #6366f1, #22c55e);
-  color: #fff;
+  color: #ffffff;
   font-size: 0.8rem;
   font-weight: 700;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
   transition: width 0.4s ease;
 }
 
@@ -3443,7 +3453,7 @@ input[type="text"]:not(.skill-input-wrap input):focus {
   justify-content: space-between;
   gap: 12px;
   padding: 14px 0;
-  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
+  border-bottom: 1px solid var(--border);
 }
 
 .progress-stats li:last-child,
@@ -3456,14 +3466,16 @@ input[type="text"]:not(.skill-input-wrap input):focus {
 .progress-stats strong,
 .leaderboard-list span,
 .achievement-item strong {
-  color: #e2e8f0;
+  color: var(--text-body);
+  font-weight: 500;
 }
 
 .progress-stats span,
 .leaderboard-list strong,
 .achievement-item span,
 .achievement-item small {
-  color: rgba(148, 163, 184, 1);
+  color: var(--text-heading);
+  font-weight: 700;
 }
 
 .progress-badge-grid {
@@ -3478,18 +3490,20 @@ input[type="text"]:not(.skill-input-wrap input):focus {
   gap: 12px;
   padding: 14px 16px;
   border-radius: 18px;
-  background: rgba(148, 163, 184, 0.06);
-  color: rgba(226, 232, 240, 1);
+  background: var(--surface-hover);
+  color: var(--text-heading);
+  border: 1px solid var(--border);
   transition: transform 0.2s ease, background 0.2s ease;
 }
 
 .progress-badge--unlocked {
   background: rgba(34, 197, 94, 0.12);
-  color: #d1fae5;
+  color: var(--text-heading);
+  border-color: rgba(34, 197, 94, 0.3);
 }
 
 .progress-badge--locked {
-  opacity: 0.6;
+  opacity: 0.7;
 }
 
 .badge-icon {
@@ -3499,7 +3513,7 @@ input[type="text"]:not(.skill-input-wrap input):focus {
   align-items: center;
   justify-content: center;
   border-radius: 999px;
-  background: rgba(148, 163, 184, 0.14);
+  background: var(--surface-hover);
   font-size: 0.88rem;
 }
 
@@ -3519,7 +3533,7 @@ input[type="text"]:not(.skill-input-wrap input):focus {
 }
 
 .achievement-empty {
-  color: rgba(148, 163, 184, 1);
+  color: var(--text-light);
   padding: 16px 0;
 }
 
@@ -3529,17 +3543,19 @@ input[type="text"]:not(.skill-input-wrap input):focus {
   justify-content: center;
   gap: 8px;
   background: transparent;
-  border: 1px solid rgba(148, 163, 184, 0.24);
-  color: #e2e8f0;
+  border: 1px solid var(--border);
+  color: var(--text-body);
   border-radius: 999px;
   padding: 12px 18px;
   cursor: pointer;
-  transition: background 0.2s ease, border-color 0.2s ease;
+  font-weight: 500;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
 }
 
 .btn-ghost:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(148, 163, 184, 0.4);
+  background: var(--surface-hover);
+  border-color: var(--text-light);
+  color: var(--text-heading);
 }
 
 .btn-mark-complete {

static/style.css

@@ -1002,39 +1002,7 @@ <h4 class="footer-col-title">About Us</h4>
   <script src="https://unpkg.com/lenis@1.1.13/dist/lenis.min.js"></script>
 
   <script src="/static/script.js"></script>
-  <script src="/static/bookmarks.js"></script>
-  <script>
-    (function () {
-      const themeToggle = document.getElementById("theme-toggle");
-
-      if (!themeToggle) return;
-
-      const savedTheme = localStorage.getItem("theme");
-
-      if (savedTheme === "dark") {
-        document.documentElement.setAttribute("data-theme", "dark");
-        themeToggle.textContent = "☀️";
-        themeToggle.setAttribute("aria-pressed", "true");
-      }
-
-      themeToggle.addEventListener("click", function () {
-        const isDark =
-          document.documentElement.getAttribute("data-theme") === "dark";
-
-        if (isDark) {
-          document.documentElement.removeAttribute("data-theme");
-          localStorage.setItem("theme", "light");
-          themeToggle.textContent = "🌙";
-          themeToggle.setAttribute("aria-pressed", "false");
-        } else {
-          document.documentElement.setAttribute("data-theme", "dark");
-          localStorage.setItem("theme", "dark");
-          themeToggle.textContent = "☀️";
-          themeToggle.setAttribute("aria-pressed", "true");
-        }
-      });
-    })();
-  </script>
+
 </body>
 
 </html>