Skip to content

feat: Mobile Responsive Polish for Bounty Cards and Hero Section #1402

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

Closed
aldorizona10-glitch wants to merge 1 commit into from
Closed

feat: Mobile Responsive Polish for Bounty Cards and Hero Section #1402

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
16 changes: 9 additions & 7 deletions frontend/src/components/bounty/BountyCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,11 @@ export function BountyCard({ bounty }: BountyCardProps) {
<div className="mt-4 border-t border-border/50" />

{/* Row 4: Reward + Meta */}
<div className="flex items-center justify-between mt-3">
<span className="font-mono text-lg font-semibold text-emerald">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mt-3">
<span className="font-mono text-base sm:text-lg font-semibold text-emerald">
{formatCurrency(bounty.reward_amount, bounty.reward_token)}
</span>
<div className="flex items-center gap-3 text-xs text-text-muted">
<div className="flex items-center gap-3 text-[10px] sm:text-xs text-text-muted">
<span className="inline-flex items-center gap-1">
<GitPullRequest className="w-3.5 h-3.5" />
{bounty.submission_count} PRs
Expand All @@ -120,10 +120,12 @@ export function BountyCard({ bounty }: BountyCardProps) {
</div>

{/* Status badge */}
<span className={`absolute bottom-4 right-5 text-xs font-medium inline-flex items-center gap-1 ${statusColor}`}>
<span className={`w-1.5 h-1.5 rounded-full ${dotColor}`} />
{statusLabel}
</span>
<div className="mt-4 flex items-center justify-end">
<span className={`text-[10px] sm:text-xs font-medium inline-flex items-center gap-1 ${statusColor}`}>
<span className={`w-1.5 h-1.5 rounded-full ${dotColor}`} />
{statusLabel}
</span>
</div>
</motion.div>
);
}
4 changes: 2 additions & 2 deletions frontend/src/components/bounty/BountyGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,12 @@ export function BountyGrid() {
</div>

{/* Filter pills */}
<div className="flex items-center gap-2 flex-wrap mb-8">
<div className="flex items-center gap-2 flex-wrap mb-8 overflow-x-auto pb-2 scrollbar-hide">
{FILTER_SKILLS.map((skill) => (
<button
key={skill}
onClick={() => setActiveSkill(skill)}
className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-150 ${
className={`px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium whitespace-nowrap transition-colors duration-150 ${
activeSkill === skill
? 'bg-forge-700 text-text-primary'
: 'text-text-muted hover:text-text-secondary bg-forge-800'
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/components/home/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,10 @@ export function HeroSection() {
</div>

{/* Terminal body */}
<div className="p-5 font-mono text-sm leading-relaxed">
<div className="overflow-hidden">
<div className="p-5 font-mono text-xs sm:text-sm leading-relaxed">
<div className="overflow-hidden break-all sm:break-normal">
<span className="text-emerald">$ </span>
<span className="text-text-secondary overflow-hidden whitespace-nowrap inline-block animate-typewriter">
<span className="text-text-secondary inline-block animate-typewriter">
forge bounty --reward 100 --lang typescript --tier 2
</span>
{typewriterDone && (
Expand Down Expand Up @@ -211,22 +211,22 @@ export function HeroSection() {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.8, duration: 0.5 }}
className="flex items-center justify-center gap-6 mt-8 font-mono text-sm text-text-muted"
className="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 mt-8 font-mono text-xs sm:text-sm text-text-muted text-center"
>
<span>
<span className="text-text-primary font-semibold">
<CountUp target={stats?.open_bounties ?? 142} />
</span>
{' '}open bounties
</span>
<span className="text-text-muted">·</span>
<span className="hidden sm:inline text-text-muted">·</span>
<span>
<span className="text-text-primary font-semibold">
$<CountUp target={stats?.total_paid_usdc ?? 24500} />
</span>
{' '}paid
</span>
<span className="text-text-muted">·</span>
<span className="hidden sm:inline text-text-muted">·</span>
<span>
<span className="text-text-primary font-semibold">
<CountUp target={stats?.total_contributors ?? 89} />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/layout/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export function Navbar() {
) : (
<button
onClick={handleGitHubSignIn}
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-forge-800 border border-border hover:border-border-hover text-text-primary text-sm font-medium transition-all duration-200 hover:bg-forge-700"
className="inline-flex items-center gap-2 px-3 sm:px-4 py-2 rounded-lg bg-forge-800 border border-border hover:border-border-hover text-text-primary text-xs sm:text-sm font-medium transition-all duration-200 hover:bg-forge-700"
>
<GitHubIcon />
<span className="hidden sm:block">Sign in with GitHub</span>
Expand Down
Loading