Skip to content

Fix/badge modal feedback #160

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

Merged
sajeetharan merged 7 commits into from
Aug 15, 2026
+87 −40
Merged

Fix/badge modal feedback #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
599d1a5
Create BadgeSnippet.jsx
HereIsMuhammad Aug 15, 2026
5f440b5
Enhance DetailPanel with card generation feature
HereIsMuhammad Aug 15, 2026
23758d3
Update main.css
HereIsMuhammad Aug 15, 2026
91b999b
Update next.config.js
HereIsMuhammad Aug 15, 2026
37a3468
Update main.css
HereIsMuhammad Aug 15, 2026
0b91f96
Update next.config.js
HereIsMuhammad Aug 15, 2026
5d615ef
Merge branch 'main' into fix/badge-modal-feedback
HereIsMuhammad Aug 15, 2026
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
6 changes: 3 additions & 3 deletions components/BadgeSnippet.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const STAT_OPTIONS = [
{ value: 'stars', label: 'Stars' },
];

export default function BadgeSnippet({ login, siteUrl }) {
export default function BadgeSnippet({ login, siteUrl, compact = false }) {
const [stat, setStat] = useState('globalRank');
const [format, setFormat] = useState('markdown');
const [copied, setCopied] = useState(false);
Expand All @@ -36,7 +36,7 @@ export default function BadgeSnippet({ login, siteUrl }) {
}

return (
<section className="badge-card" id="get-your-badge">
<section className={`badge-card${compact ? ' badge-card--compact' : ''}`} id="get-your-badge">
<span className="badge-card__eyebrow">Embeddable badge</span>
<h2 className="badge-card__title">Get your badge</h2>
<p className="badge-card__subtitle">
Expand Down Expand Up @@ -79,4 +79,4 @@ export default function BadgeSnippet({ login, siteUrl }) {
</div>
</section>
);
}
}
11 changes: 7 additions & 4 deletions components/DetailPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ import { track } from '@vercel/analytics';
import * as d3 from 'd3';
import { formatNum, formatRelativeTime, isStaleData } from '../lib/format.js';
import { DIMENSIONS, SCORE_METHODOLOGY } from '../lib/scoring.js';
import { SOCIAL_PREVIEW_VERSION } from '../lib/site.js';
import { SOCIAL_PREVIEW_VERSION, getSiteUrl } from '../lib/site.js';
import { classifyAgent } from '../lib/agent-class.js';
import { AI_TOOLS } from '../lib/ai-profile.js';
import SpecialTags from './SpecialTags.jsx';
import BadgeSnippet from './BadgeSnippet.jsx';

export default function DetailPanel({ dev, onClose, onCardGenerated, claimedLogins, openCardOnMount = false, claimSuccess = false }) {
const [fullData, setFullData] = useState(null);
Expand Down Expand Up @@ -133,8 +134,8 @@ export default function DetailPanel({ dev, onClose, onCardGenerated, claimedLogi
{merged.soUserId && (
<a href={`https://stackoverflow.com/users/${merged.soUserId}`} target="_blank" rel="noreferrer">StackOverflow ↗</a>
)}
<a href={`/share/${encodeURIComponent(dev.login)}#get-your-badge`} target="_blank" rel="noopener noreferrer">Get Badge ↗</a>
<button
<a href={`/share/${encodeURIComponent(dev.login)}#get-your-badge`} target="_blank" rel="noopener noreferrer">Get Badge ↗</a>
<button
className="btn btn--share"
onClick={handleGenerateCard}
>
Expand Down Expand Up @@ -674,7 +675,9 @@ function CardModal({ dev, claimSuccess, onClose }) {
</a>
{linkedinCopied && <span className="card-modal__share-status" role="status">Caption and tags copied. Paste them into your LinkedIn post.</span>}
</div>

<BadgeSnippet login={login} siteUrl={getSiteUrl()} compact />
</div>
</div>
);
}
}
110 changes: 77 additions & 33 deletions styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3932,6 +3932,25 @@ body {
overflow-y: auto;
box-shadow: var(--shadow-strong);
animation: fadeIn 0.2s ease;
scrollbar-width: thin;
scrollbar-color: var(--text-muted) transparent;
}

.card-modal::-webkit-scrollbar {
width: 8px;
}

.card-modal::-webkit-scrollbar-track {
background: transparent;
}

.card-modal::-webkit-scrollbar-thumb {
background: var(--text-muted);
border-radius: 4px;
}

.card-modal::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}

.card-modal__close {
Expand Down Expand Up @@ -3994,46 +4013,46 @@ body {
margin-bottom: 14px;
}

.card-modal__rank-strip > div {
display: flex;
align-items: baseline;
gap: 8px;
padding: 10px 14px;
border: 1px solid rgba(8, 145, 178, 0.25);
border-radius: 8px;
background: rgba(8, 145, 178, 0.08);
.badge-card--compact {
margin: 20px auto 0;
padding: 18px 18px 16px;
max-width: 100%;
}

.card-modal__rank-strip strong {
color: #0891b2;
font-size: 20px;
.badge-card--compact .badge-card__title {
margin: 10px 0 4px;
font-size: 16px;
}

.card-modal__rank-strip span {
color: var(--text-secondary);
.badge-card--compact .badge-card__subtitle {
margin: 0 0 14px;
font-size: 12px;
}

.card-modal__preview {
position: relative;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
margin-bottom: 20px;
min-height: 200px;
.badge-card--compact .badge-card__stats {
margin-bottom: 14px;
}

.badge-card--compact .badge-card__preview {
margin-bottom: 14px;
padding: 10px;
}

.badge-card__preview {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
min-height: 44px;
margin-bottom: 20px;
padding: 14px;
border: 1px dashed rgba(255, 255, 255, 0.12);
border-radius: 10px;
background: #060911;
}

.card-modal__image {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
.badge-card__preview img {
height: 20px;
}

.card-modal__loading,
.card-modal__error {
padding: 40px;
Expand Down Expand Up @@ -4314,9 +4333,7 @@ body {
background: linear-gradient(135deg, #1d4ed8, #0a1f44);
color: #f8fafc;
box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
}

.badge-card__preview {
}.badge-card__preview {
display: flex;
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -4371,7 +4388,7 @@ body {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
white-space: normal;
white-space: normal;
color: #a8c5ff;
font-size: 11.5px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
Expand All @@ -4393,6 +4410,31 @@ body {
.badge-card__copy:active {
transform: translateY(1px);
}

.badge-card--compact {
margin: 20px auto 0;
padding: 18px 18px 16px;
max-width: 100%;
}

.badge-card--compact .badge-card__title {
margin: 10px 0 4px;
font-size: 16px;
}

.badge-card--compact .badge-card__subtitle {
margin: 0 0 14px;
font-size: 12px;
}

.badge-card--compact .badge-card__stats {
margin-bottom: 14px;
}

.badge-card--compact .badge-card__preview {
margin-bottom: 14px;
padding: 10px;
}
@media (max-width: 520px) {
.quick-tour {
left: 12px;
Expand Down Expand Up @@ -4519,6 +4561,8 @@ body {
font-size: 11px;
}

}

@media (prefers-reduced-motion: reduce) {
.global-activity__item--new { animation: none; }
}
Expand All @@ -4533,4 +4577,4 @@ body {
color: #b42318;
font-size: 12px;
line-height: 1.4;
}
}
Loading