Skip to content

Commit 597286a

Browse files
authored
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.
1 parent 8771f29 commit 597286a

File tree

2 files changed

+13
-34
lines changed

2 files changed

+13
-34
lines changed

docs/css/version-badge.css

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,23 @@
11
/* Version badge -- display a badge with the current version of the documentation */
22
.version-badge {
3-
display: inline-block;
4-
align-items: center;
5-
gap: 0.3em;
6-
font-size: 1em;
7-
margin-top: 0px;
8-
margin-bottom: 0px;
9-
padding-top: 6px;
10-
padding-bottom: 6px;
11-
padding-left: 20px;
12-
padding-right: 20px;
13-
font-family: "Inter", sans-serif;
14-
color: #ff5400;
15-
background: #fef2f2;
16-
border: 1px solid rgba(220, 38, 38, 0.3);
17-
border-radius: 12px;
18-
box-shadow: none;
19-
vertical-align: middle;
20-
position: relative;
3+
--color-text: #ff5400 !important;
4+
--color-bg: #fef2f2 !important;
5+
color: #ff5400 !important;
6+
background: #fef2f2 !important;
7+
border: 1px solid rgba(220, 38, 38, 0.3) !important;
218
transition: box-shadow 0.2s, transform 0.15s;
229
}
2310

24-
.version-badge-container {
25-
margin: 0;
26-
padding: 0;
27-
}
28-
2911
.version-badge:hover {
3012
box-shadow: 0 2px 8px 0 rgba(160, 132, 252, 0.1);
3113
transform: translateY(-1px) scale(1.03);
3214
}
3315

3416
.dark .version-badge {
35-
color: #f1f5f9;
36-
background: #334155;
37-
border: 1px solid #64748b;
17+
--color-text: #f1f5f9 !important;
18+
--color-bg: #334155 !important;
19+
color: #f1f5f9 !important;
20+
background: #334155 !important;
21+
border: 1px solid #64748b !important;
3822
}
3923

docs/snippets/version-badge.mdx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
export const VersionBadge = ({ version }) => {
22
return (
3-
<code className="version-badge-container">
4-
<p className="version-badge">
5-
<span className="version-badge-label">New in version:</span>&nbsp;
6-
<code className="version-badge-version">{version}</code>
7-
</p>
8-
</code>
9-
10-
3+
<Badge stroke size='lg' icon='gift' iconType='regular' className="version-badge">
4+
New in version <code>{version}</code>
5+
</Badge>
116
);
127
};

0 commit comments

Comments
 (0)