feat: update styles and improve accessibility for OSS program components

Author: huamanraj

apps/web/src/app/(main)/dashboard/oss-programs/[slug]/page.tsx

@@ -2,7 +2,7 @@ import { getProgramBySlug, getAllPrograms } from "@/data/oss-programs";
 import { notFound } from "next/navigation";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
-import { JSDOM } from  "jsdom"; 
+import { JSDOM } from "jsdom";
 import { ProgramHeader, ProgramMetadata, ProgramSection } from "@/components/oss-programs";
 import "./program-styles.css";
 

apps/web/src/app/(main)/dashboard/oss-programs/[slug]/program-styles.css

@@ -1,3 +1,13 @@
+:root {
+  --color-primary: #9455f4;
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-text-primary: #333;
+  --color-text-secondary: #444;
+  --color-text-tertiary: #9ca3af;
+  --color-bg-secondary: #252525;
+}
+
 /* Base list styling */
 .program-content li {
   position: relative;
@@ -9,7 +19,7 @@
   content: "•";
   position: absolute;
   left: 0;
-  color: #9455f4;
+  color: var(--color-primary);
   font-weight: bold;
 }
 
@@ -25,7 +35,7 @@
   content: counter(item) ".";
   position: absolute;
   left: 0;
-  color: #9455f4;
+  color: var(--color-primary);
   font-weight: 600;
   font-size: 0.875rem;
 }
@@ -38,21 +48,21 @@
 /* Eligibility section - checkmarks for "good match" list */
 .eligibility-section ul:first-of-type li::before {
   content: "✓";
-  color: #22c55e;
+  color: var(--color-success);
 }
 
 /* Keep in mind - simple muted styling */
 .eligibility-section p:last-of-type {
-  color: #9ca3af;
+  color: var(--color-text-tertiary);
   font-style: italic;
   padding-left: 1rem;
-  border-left: 2px solid #444;
+  border-left: 2px solid var(--color-text-secondary);
   margin-top: 1rem;
 }
 
 /* Preparation checklist - numbered steps with subtle background */
 .preparation-checklist ol li {
-  background: #252525;
+  background: var(--color-bg-secondary);
   padding: 0.75rem 1rem 0.75rem 2.25rem;
   margin: 0.5rem 0;
   border-radius: 0.375rem;
@@ -67,7 +77,7 @@
 .preparation-checklist ol li::before {
   left: 0.75rem;
   top: 0.75rem;
-  color: #9455f4;
+  color: var(--color-primary);
   font-weight: 700;
 }
 
@@ -90,14 +100,14 @@
   top: 0.85rem;
   width: 8px;
   height: 8px;
-  background: #9455f4;
+  background: var(--color-primary);
   border-radius: 50%;
 }
 
 .application-timeline ul li:first-child::before {
-  background: #22c55e;
+  background: var(--color-success);
 }
 
 .application-timeline ul li:last-child::before {
-  background: #f59e0b;
+  background: var(--color-warning);
 }

apps/web/src/components/oss-programs/SearchInput.tsx

@@ -8,7 +8,7 @@ interface SearchInputProps {
   placeholder?: string;
 }
 
-export default function SearchInput({ value, onChange, placeholder = "Search programs..." }: SearchInputProps) {
+export default function SearchInput({ value, onChange, placeholder = "Search programs..." }: SearchInputProps): JSX.Element {
   return (
     <div className="relative flex-1">
       <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5 pointer-events-none z-10" />
@@ -17,7 +17,8 @@ export default function SearchInput({ value, onChange, placeholder = "Search pro
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="w-full bg-[#252525] border border-[#333] rounded-xl py-3 pl-12 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-[#9455f4] transition-colors truncate"
+        className="w-full bg-dash-surface border border-dash-border rounded-xl py-3 pl-12 pr-4 text-text-primary placeholder-gray-500 focus:outline-none focus:border-brand-purple transition-colors truncate"
+        aria-label="Search programs"
       />
     </div>
   );

apps/web/src/components/oss-programs/TagFilter.tsx

@@ -54,7 +54,7 @@ export default function TagFilter({ tags, selectedTags, onTagsChange }: TagFilte
   return (
     <div className="relative flex-1" ref={dropdownRef}>
       <div
-        className="flex items-center gap-2 bg-[#252525] border border-[#333] rounded-xl p-2 min-h-[50px] focus-within:border-[#9455f4] transition-colors cursor-text"
+        className="flex items-center gap-2 bg-dash-surface border border-dash-border rounded-xl p-2 min-h-[50px] focus-within:border-brand-purple transition-colors cursor-text"
         onClick={() => {
           inputRef.current?.focus();
           setIsDropdownOpen(true);
@@ -64,14 +64,15 @@ export default function TagFilter({ tags, selectedTags, onTagsChange }: TagFilte
           {selectedTags.map((tag) => (
             <span
               key={tag}
-              className="flex items-center gap-1 bg-[#9455f4]/20 text-[#dcb8ff] px-3 py-1 rounded-full text-sm flex-shrink-0"
+              className="flex items-center gap-1 bg-brand-purple/20 text-brand-purple-light px-3 py-1 rounded-full text-sm flex-shrink-0"
             >
               {tag}
               <button
                 onClick={(e) => {
                   e.stopPropagation();
                   removeTag(tag);
                 }}
+                aria-label={`Remove ${tag}`}
                 className="hover:text-white"
               >
                 <X className="w-3 h-3" />
@@ -101,7 +102,7 @@ export default function TagFilter({ tags, selectedTags, onTagsChange }: TagFilte
             initial={{ opacity: 0, y: -10 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
-            className="absolute z-20 top-full left-0 right-0 mt-2 bg-[#252525] border border-[#333] rounded-xl shadow-xl max-h-60 overflow-y-auto"
+            className="absolute z-20 top-full left-0 right-0 mt-2 bg-dash-surface border border-dash-border rounded-xl shadow-xl max-h-60 overflow-y-auto"
           >
             {availableTags.length === 0 ? (
               <div className="p-4 text-gray-500 text-center">No matching tags found</div>
@@ -110,7 +111,8 @@ export default function TagFilter({ tags, selectedTags, onTagsChange }: TagFilte
                 <button
                   key={tag}
                   onClick={() => addTag(tag)}
-                  className="w-full text-left px-4 py-3 hover:bg-[#333] text-gray-300 hover:text-white transition-colors flex items-center justify-between"
+                  aria-label={`Add tag ${tag}`}
+                  className="w-full text-left px-4 py-3 hover:bg-dash-hover text-gray-300 hover:text-white transition-colors flex items-center justify-between"
                 >
                   {tag}
                 </button>

apps/web/src/data/oss-programs/programs/apertre.ts

@@ -3,7 +3,7 @@ import type { Program } from "../types";
 export const apertre: Program = {
   slug: "apertre",
   name: "Apertre 2.0",
-  tagline: "30-day OSS event Resourcio Community.",
+  tagline: "30-day OSS event by Resourcio Community.",
   shortDescription: "30-day OSS event Resourcio Community.",
   websiteUrl: "https://s2apertre.resourcio.in/",
   tags: ["open source", "beginner", "india", "prizes", "environment"],

apps/web/src/data/oss-programs/programs/github-campus-experts.ts

@@ -3,8 +3,8 @@ import type { Program } from "../types";
 export const githubCampusExperts: Program = {
   slug: "github-campus-experts",
   name: "GitHub Campus Experts",
-  tagline: "Community leadership.",
-  shortDescription: "Community leadership.",
+  tagline: "Helps students build and grow technical communities on campus",
+  shortDescription: "A leadership program for university students who want to establish and expand tech communities on their campuses. Participants gain public speaking skills, leadership training, and access to GitHub resources while fostering innovation and collaboration among their peers.",
   websiteUrl:
     "https://docs.github.com/en/education/about-github-education/use-github-at-your-educational-institution/applying-to-be-a-github-campus-expert",
   tags: ["community", "leadership", "student", "swag", "learning"],

apps/web/src/data/oss-programs/programs/hacktoberfest.ts

@@ -3,8 +3,8 @@ import type { Program } from "../types";
 export const hacktoberfest: Program = {
   slug: "hacktoberfest",
   name: "Hacktoberfest",
-  tagline: "Digital Ocean October event.",
-  shortDescription: "Digital Ocean October event.",
+  tagline: "Month-long celebration of open source with contribution rewards",
+  shortDescription: "A global event run by DigitalOcean that encourages developers of all levels to contribute to open source projects during October. Participants earn digital badges, tree plantings, and swag by completing pull requests and making meaningful contributions to the community.",
   websiteUrl: "https://hacktoberfest.com/",
   tags: ["open source", "beginner", "swag", "remote", "global"],
   region: "global",

apps/web/src/data/oss-programs/types.ts

@@ -1,4 +1,4 @@
-// src/data/programs/types.ts
+// apps/web/src/data/oss-programs/types.ts
 
 export type ProgramSlug =
   | "google-summer-of-code"