Skip to content

Fixes #140 #295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rohan11P wants to merge 1 commit into
base: main
Choose a base branch
from
+18 −14
Open

Fixes #140 #295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions Frontend/src/components/collaboration-hub/CreatorMatchCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,21 @@ const getAudienceMatchColor = (level: string) => {

// New subcomponents for readability and maintainability
const CreatorStats: React.FC<{followers: string, engagement: string, content: string, collabs: number}> = ({ followers, engagement, content, collabs }) => (
<div className="grid grid-cols-2 gap-2 text-xs text-gray-700 w-full mb-2">
<div><span className="font-semibold">Followers</span><br />{followers}</div>
<div><span className="font-semibold">Engagement</span><br />{engagement}</div>
<div><span className="font-semibold">Content</span><br />{content}</div>
<div><span className="font-semibold">Collabs</span><br />{collabs} completed</div>
<div className="grid grid-cols-2 gap-3 text-xs text-gray-700 w-full mb-3">
<div className="space-y-1"><span className="font-semibold block">Followers</span><span className="block">{followers}</span></div>
<div className="space-y-1"><span className="font-semibold block">Engagement</span><span className="block">{engagement}</span></div>
<div className="space-y-1"><span className="font-semibold block">Content</span><span className="block truncate">{content}</span></div>
<div className="space-y-1"><span className="font-semibold block">Collabs</span><span className="block">{collabs} completed</span></div>
</div>
);

const AudienceMatchBar: React.FC<{audienceMatch: string}> = ({ audienceMatch }) => (
<div className="flex items-center gap-2 w-full justify-center mb-2">
<span className="text-xs text-gray-500">Audience Match</span>
<span className="font-semibold text-xs text-gray-700">{audienceMatch}</span>
<div className="flex-1 h-2 rounded bg-gray-200 mx-2 min-w-[60px] max-w-[80px]" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}>
<div className="w-full mb-3 space-y-2">
<div className="flex items-center justify-between">
<span className="text-xs text-gray-500">Audience Match</span>
<span className="font-semibold text-xs text-gray-700">{audienceMatch}</span>
</div>
<div className="w-full h-2 rounded bg-gray-200" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}>
<div className={`h-2 rounded ${getAudienceMatchColor(audienceMatch)}`} style={{ width: audienceMatch === "Very High" ? "100%" : audienceMatch === "High" ? "75%" : "50%" }} />
</div>
Comment on lines 44 to 52
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Align progress width with the ARIA value for unknown audience labels.

When audienceMatch is unrecognized, aria-valuenow becomes 0 but the bar still renders at 50%. That’s inconsistent visually and for assistive tech.

✅ Suggested fix 
-const AudienceMatchBar: React.FC<{audienceMatch: string}> = ({ audienceMatch }) => (
+const AudienceMatchBar: React.FC<{audienceMatch: string}> = ({ audienceMatch }) => (
+  const percent =
+    audienceMatch === "Very High" ? 100 :
+    audienceMatch === "High" ? 75 :
+    audienceMatch === "Good" ? 50 : 0;
   <div className="w-full mb-3 space-y-2">
     <div className="flex items-center justify-between">
       <span className="text-xs text-gray-500">Audience Match</span>
       <span className="font-semibold text-xs text-gray-700">{audienceMatch}</span>
     </div>
-    <div className="w-full h-2 rounded bg-gray-200" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}>
-      <div className={`h-2 rounded ${getAudienceMatchColor(audienceMatch)}`} style={{ width: audienceMatch === "Very High" ? "100%" : audienceMatch === "High" ? "75%" : "50%" }} />
+    <div className="w-full h-2 rounded bg-gray-200" role="progressbar" aria-valuenow={percent} aria-valuemin={0} aria-valuemax={100}>
+      <div className={`h-2 rounded ${getAudienceMatchColor(audienceMatch)}`} style={{ width: `${percent}%` }} />
     </div>
   </div>
 );
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const AudienceMatchBar: React.FC<{audienceMatch: string}> = ({ audienceMatch }) => (
<div className="flex items-center gap-2 w-full justify-center mb-2">
<span className="text-xs text-gray-500">Audience Match</span>
<span className="font-semibold text-xs text-gray-700">{audienceMatch}</span>
<div className="flex-1 h-2 rounded bg-gray-200 mx-2 min-w-[60px] max-w-[80px]" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}>
<div className="w-full mb-3 space-y-2">
<div className="flex items-center justify-between">
<span className="text-xs text-gray-500">Audience Match</span>
<span className="font-semibold text-xs text-gray-700">{audienceMatch}</span>
</div>
<div className="w-full h-2 rounded bg-gray-200" role="progressbar" aria-valuenow={audienceMatch === 'Very High' ? 100 : audienceMatch === 'High' ? 75 : audienceMatch === 'Good' ? 50 : 0} aria-valuemin={0} aria-valuemax={100}>
<div className={`h-2 rounded ${getAudienceMatchColor(audienceMatch)}`} style={{ width: audienceMatch === "Very High" ? "100%" : audienceMatch === "High" ? "75%" : "50%" }} />
</div>
const AudienceMatchBar: React.FC<{audienceMatch: string}> = ({ audienceMatch }) => {
const percent =
audienceMatch === "Very High" ? 100 :
audienceMatch === "High" ? 75 :
audienceMatch === "Good" ? 50 : 0;
return (
<div className="w-full mb-3 space-y-2">
<div className="flex items-center justify-between">
<span className="text-xs text-gray-500">Audience Match</span>
<span className="font-semibold text-xs text-gray-700">{audienceMatch}</span>
</div>
<div className="w-full h-2 rounded bg-gray-200" role="progressbar" aria-valuenow={percent} aria-valuemin={0} aria-valuemax={100}>
<div className={`h-2 rounded ${getAudienceMatchColor(audienceMatch)}`} style={{ width: `${percent}%` }} />
</div>
</div>
);
};
🤖 Prompt for AI Agents 
In `@Frontend/src/components/collaboration-hub/CreatorMatchCard.tsx` around lines
44 - 52, AudienceMatchBar renders an inconsistent progress state for unknown
audience labels: aria-valuenow falls back to 0 but the inner bar width falls
back to 50%, confusing assistive tech and visuals. Fix AudienceMatchBar by
computing a single numeric matchValue (e.g., 100, 75, 50, or 0) from
audienceMatch (use a small map or switch) and use that value both for
aria-valuenow and for the inline style width (e.g., `${matchValue}%`); keep
using getAudienceMatchColor(audienceMatch) for color only so unknown labels show
0% width and aria-valuenow=0 consistently.

</div>
Expand Down
2 changes: 1 addition & 1 deletion Frontend/src/components/collaboration-hub/CreatorMatchGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const CreatorMatchGrid: React.FC<CreatorMatchGridProps> = ({ creators }) => {

return (
<div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 justify-items-center">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 justify-items-center">
{currentCreators.map((creator) => (
<CreatorMatchCard key={creator.id} {...creator} />
))}
Expand Down
8 changes: 5 additions & 3 deletions Frontend/src/pages/Collaborations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { mockCollabIdeas, mockRequestTexts } from "../components/collaboration-h
import NewCollaborationModal from "../components/collaboration-hub/NewCollaborationModal";
import CreatorSearchModal from "../components/collaboration-hub/CreatorSearchModal";

export default function CollaborationsPage({ showHeader = true }: { showHeader?: boolean }) {
export default function CollaborationsPage({ showHeader = true, compact = false }: { showHeader?: boolean; compact?: boolean }) {
const {
modals,
filters,
Expand Down Expand Up @@ -91,8 +91,9 @@ export default function CollaborationsPage({ showHeader = true }: { showHeader?:
</header>
)}
<main className="flex-1 space-y-4 p-4 md:p-8 pt-6">
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 items-start">
<div className={compact ? "w-full" : "grid grid-cols-1 md:grid-cols-4 gap-6 items-start"}>
{/* Filter Sidebar */}
{!compact && (
<Card className="md:col-span-1">
<CardHeader>
<CardTitle className="text-gray-900">Filters</CardTitle>
Expand Down Expand Up @@ -184,8 +185,9 @@ export default function CollaborationsPage({ showHeader = true }: { showHeader?:
)}
</CardContent>
</Card>
)}
{/* Main Content */}
<div className="md:col-span-3 pl-0 md:pl-4 space-y-4 w-full">
<div className={compact ? "w-full space-y-4" : "md:col-span-3 pl-0 md:pl-4 space-y-4 w-full"}>
{/* Tabs for AI Matches, Active Collabs, Requests */}
<Tabs defaultValue="matches">
<TabsList className="grid w-full grid-cols-3 bg-gray-100 mb-2">
Expand Down
2 changes: 1 addition & 1 deletion Frontend/src/pages/DashboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ export default function DashboardPage() {
<CardDescription className="text-[hsl(215.4,16.3%,46.9%)]">Creators with complementary audiences</CardDescription>
</CardHeader>
<CardContent>
<CollaborationsPage />
<CollaborationsPage compact={true} />
</CardContent>
</Card>
</div>
Expand Down