From 06ea84fd419a14371c0b8f6ff46f3519236e38e0 Mon Sep 17 00:00:00 2001
From: Sajeetharan <sajeetharan@outlook.com>
Date: Sat, 15 Aug 2026 22:31:45 +0530
Subject: [PATCH] Revert "Fix/badge modal feedback (#160)"

This reverts commit 961cfd8ea1c1492c2677b995879cd659cc17b356.
---
 components/BadgeSnippet.jsx |   6 +-
 components/DetailPanel.jsx  |  11 ++--
 styles/main.css             | 110 +++++++++++-------------------------
 3 files changed, 40 insertions(+), 87 deletions(-)

diff --git a/components/BadgeSnippet.jsx b/components/BadgeSnippet.jsx
index 64146d8..21c60c4 100644
--- a/components/BadgeSnippet.jsx
+++ b/components/BadgeSnippet.jsx
@@ -10,7 +10,7 @@ const STAT_OPTIONS = [
   { value: 'stars', label: 'Stars' },
 ];
 
-export default function BadgeSnippet({ login, siteUrl, compact = false }) {
+export default function BadgeSnippet({ login, siteUrl }) {
   const [stat, setStat] = useState('globalRank');
   const [format, setFormat] = useState('markdown');
   const [copied, setCopied] = useState(false);
@@ -36,7 +36,7 @@ export default function BadgeSnippet({ login, siteUrl, compact = false }) {
   }
 
   return (
-    <section className={`badge-card${compact ? ' badge-card--compact' : ''}`} id="get-your-badge">
+    <section className="badge-card" 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">
@@ -79,4 +79,4 @@ export default function BadgeSnippet({ login, siteUrl, compact = false }) {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/components/DetailPanel.jsx b/components/DetailPanel.jsx
index fab2f08..3f5951d 100644
--- a/components/DetailPanel.jsx
+++ b/components/DetailPanel.jsx
@@ -5,11 +5,10 @@ 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, getSiteUrl } from '../lib/site.js';
+import { SOCIAL_PREVIEW_VERSION } 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);
@@ -134,8 +133,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}
               >
@@ -675,9 +674,7 @@ 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>
   );
-}
\ No newline at end of file
+}
diff --git a/styles/main.css b/styles/main.css
index aaa8147..ee2e010 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -3932,25 +3932,6 @@ 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 {
@@ -4013,46 +3994,46 @@ body {
   margin-bottom: 14px;
 }
 
-.badge-card--compact {
-  margin: 20px auto 0;
-  padding: 18px 18px 16px;
-  max-width: 100%;
+.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 .badge-card__title {
-  margin: 10px 0 4px;
-  font-size: 16px;
+.card-modal__rank-strip strong {
+  color: #0891b2;
+  font-size: 20px;
 }
 
-.badge-card--compact .badge-card__subtitle {
-  margin: 0 0 14px;
+.card-modal__rank-strip span {
+  color: var(--text-secondary);
   font-size: 12px;
 }
 
-.badge-card--compact .badge-card__stats {
-  margin-bottom: 14px;
-}
-
-.badge-card--compact .badge-card__preview {
-  margin-bottom: 14px;
-  padding: 10px;
-}
-
-.badge-card__preview {
+.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;
   display: flex;
-  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;
+  justify-content: center;
 }
 
-.badge-card__preview img {
-  height: 20px;
+.card-modal__image {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 12px;
 }
+
 .card-modal__loading,
 .card-modal__error {
   padding: 40px;
@@ -4333,7 +4314,9 @@ 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;
@@ -4388,7 +4371,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;
@@ -4410,31 +4393,6 @@ 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;
@@ -4561,8 +4519,6 @@ body {
   font-size: 11px;
 }
 
-}
-
 @media (prefers-reduced-motion: reduce) {
   .global-activity__item--new { animation: none; }
 }
@@ -4577,4 +4533,4 @@ body {
   color: #b42318;
   font-size: 12px;
   line-height: 1.4;
-}
\ No newline at end of file
+}