Update VersionBadge to use Mintlify native Badge component (#2571)

Replace custom VersionBadge implementation with Mintlify's native Badge component while preserving custom color and border styling via CSS. This leverages Mintlify's built-in sizing, typography, and icon support while maintaining the original visual design.
This commit is contained in:
Jeremiah Lowin 2025-12-06 21:23:53 -05:00 committed by GitHub
commit 597286a633
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 34 deletions

View file

@ -1,39 +1,23 @@
/* Version badge -- display a badge with the current version of the documentation */
.version-badge {
display: inline-block;
align-items: center;
gap: 0.3em;
font-size: 1em;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 20px;
padding-right: 20px;
font-family: "Inter", sans-serif;
color: #ff5400;
background: #fef2f2;
border: 1px solid rgba(220, 38, 38, 0.3);
border-radius: 12px;
box-shadow: none;
vertical-align: middle;
position: relative;
--color-text: #ff5400 !important;
--color-bg: #fef2f2 !important;
color: #ff5400 !important;
background: #fef2f2 !important;
border: 1px solid rgba(220, 38, 38, 0.3) !important;
transition: box-shadow 0.2s, transform 0.15s;
}
.version-badge-container {
margin: 0;
padding: 0;
}
.version-badge:hover {
box-shadow: 0 2px 8px 0 rgba(160, 132, 252, 0.1);
transform: translateY(-1px) scale(1.03);
}
.dark .version-badge {
color: #f1f5f9;
background: #334155;
border: 1px solid #64748b;
--color-text: #f1f5f9 !important;
--color-bg: #334155 !important;
color: #f1f5f9 !important;
background: #334155 !important;
border: 1px solid #64748b !important;
}

View file

@ -1,12 +1,7 @@
export const VersionBadge = ({ version }) => {
return (
<code className="version-badge-container">
<p className="version-badge">
<span className="version-badge-label">New in version:</span>&nbsp;
<code className="version-badge-version">{version}</code>
</p>
</code>
<Badge stroke size='lg' icon='gift' iconType='regular' className="version-badge">
New in version <code>{version}</code>
</Badge>
);
};