version-pill-react 1.2.3 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +126 -94
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +126 -94
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -257,7 +257,10 @@ function VersionPill({
|
|
|
257
257
|
}
|
|
258
258
|
);
|
|
259
259
|
};
|
|
260
|
-
const
|
|
260
|
+
const versionsArray = Array.isArray(versions) ? versions : [];
|
|
261
|
+
const tasksArray = Array.isArray(roadmapTasks) ? roadmapTasks : [];
|
|
262
|
+
const ideasArray = Array.isArray(ideas) ? ideas : [];
|
|
263
|
+
const groupedTasks = tasksArray.reduce((acc, task) => {
|
|
261
264
|
const col = task.column || "backlog";
|
|
262
265
|
if (!acc[col]) acc[col] = [];
|
|
263
266
|
acc[col].push(task);
|
|
@@ -272,7 +275,7 @@ function VersionPill({
|
|
|
272
275
|
display: "flex",
|
|
273
276
|
alignItems: "center",
|
|
274
277
|
justifyContent: "center",
|
|
275
|
-
padding:
|
|
278
|
+
padding: 20
|
|
276
279
|
}, children: [
|
|
277
280
|
/* @__PURE__ */ jsx(
|
|
278
281
|
"div",
|
|
@@ -281,8 +284,9 @@ function VersionPill({
|
|
|
281
284
|
style: {
|
|
282
285
|
position: "absolute",
|
|
283
286
|
inset: 0,
|
|
284
|
-
background: "rgba(0,0,0,0.
|
|
285
|
-
backdropFilter: "blur(4px)"
|
|
287
|
+
background: isLight ? "rgba(0,0,0,0.4)" : "rgba(0,0,0,0.6)",
|
|
288
|
+
backdropFilter: "blur(4px)",
|
|
289
|
+
WebkitBackdropFilter: "blur(4px)"
|
|
286
290
|
}
|
|
287
291
|
}
|
|
288
292
|
),
|
|
@@ -291,31 +295,34 @@ function VersionPill({
|
|
|
291
295
|
{
|
|
292
296
|
style: {
|
|
293
297
|
position: "relative",
|
|
298
|
+
display: "flex",
|
|
299
|
+
flexDirection: "column",
|
|
294
300
|
width: "100%",
|
|
295
|
-
maxWidth:
|
|
296
|
-
maxHeight: "80vh",
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
+
maxWidth: 420,
|
|
302
|
+
maxHeight: "min(500px, 80vh)",
|
|
303
|
+
borderRadius: 12,
|
|
304
|
+
boxShadow: isLight ? "0 20px 40px -10px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05)" : "0 20px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1)",
|
|
305
|
+
background: isLight ? "#fff" : "#1a1a1a",
|
|
306
|
+
overflow: "hidden"
|
|
301
307
|
},
|
|
302
308
|
children: [
|
|
303
309
|
/* @__PURE__ */ jsxs(
|
|
304
310
|
"div",
|
|
305
311
|
{
|
|
306
312
|
style: {
|
|
307
|
-
|
|
308
|
-
|
|
313
|
+
flexShrink: 0,
|
|
314
|
+
padding: "14px 16px",
|
|
315
|
+
borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
309
316
|
display: "flex",
|
|
310
317
|
alignItems: "center",
|
|
311
318
|
justifyContent: "space-between"
|
|
312
319
|
},
|
|
313
320
|
children: [
|
|
314
321
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
|
|
315
|
-
project?.icon && /* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
322
|
+
project?.icon && /* @__PURE__ */ jsx("span", { style: { fontSize: 18 }, children: project.icon }),
|
|
316
323
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
317
|
-
/* @__PURE__ */ jsx("h2", { style: { fontWeight: 600, color: isLight ? "#18181b" : "#fff", margin: 0 }, children: project?.name || "What's New" }),
|
|
318
|
-
/* @__PURE__ */ jsxs("p", { style: { fontSize:
|
|
324
|
+
/* @__PURE__ */ jsx("h2", { style: { fontWeight: 600, fontSize: 15, color: isLight ? "#18181b" : "#fff", margin: 0 }, children: project?.name || "What's New" }),
|
|
325
|
+
/* @__PURE__ */ jsxs("p", { style: { fontSize: 11, color: isLight ? "#71717a" : "#a1a1aa", margin: 0 }, children: [
|
|
319
326
|
"v",
|
|
320
327
|
currentVersion
|
|
321
328
|
] })
|
|
@@ -326,14 +333,21 @@ function VersionPill({
|
|
|
326
333
|
{
|
|
327
334
|
onClick: () => setIsOpen(false),
|
|
328
335
|
style: {
|
|
329
|
-
|
|
336
|
+
width: 28,
|
|
337
|
+
height: 28,
|
|
338
|
+
display: "flex",
|
|
339
|
+
alignItems: "center",
|
|
340
|
+
justifyContent: "center",
|
|
330
341
|
borderRadius: 6,
|
|
331
|
-
background: "
|
|
342
|
+
background: isLight ? "#f5f5f5" : "#2a2a2a",
|
|
332
343
|
border: "none",
|
|
333
344
|
cursor: "pointer",
|
|
334
|
-
color: isLight ? "#71717a" : "#a1a1aa"
|
|
345
|
+
color: isLight ? "#71717a" : "#a1a1aa",
|
|
346
|
+
transition: "background 150ms"
|
|
335
347
|
},
|
|
336
|
-
|
|
348
|
+
onMouseEnter: (e) => e.currentTarget.style.background = isLight ? "#e5e5e5" : "#3a3a3a",
|
|
349
|
+
onMouseLeave: (e) => e.currentTarget.style.background = isLight ? "#f5f5f5" : "#2a2a2a",
|
|
350
|
+
children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
|
|
337
351
|
}
|
|
338
352
|
)
|
|
339
353
|
]
|
|
@@ -343,125 +357,142 @@ function VersionPill({
|
|
|
343
357
|
"div",
|
|
344
358
|
{
|
|
345
359
|
style: {
|
|
360
|
+
flexShrink: 0,
|
|
346
361
|
display: "flex",
|
|
347
|
-
gap:
|
|
348
|
-
padding: "8px
|
|
349
|
-
borderBottom: `1px solid ${isLight ? "#
|
|
362
|
+
gap: 2,
|
|
363
|
+
padding: "8px 12px",
|
|
364
|
+
borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
365
|
+
background: isLight ? "#fafafa" : "#151515"
|
|
350
366
|
},
|
|
351
367
|
children: ["changelog", "roadmap", "ideas"].map((tab) => /* @__PURE__ */ jsxs(
|
|
352
368
|
"button",
|
|
353
369
|
{
|
|
354
370
|
onClick: () => setActiveTab(tab),
|
|
355
371
|
style: {
|
|
356
|
-
padding: "6px
|
|
372
|
+
padding: "6px 10px",
|
|
357
373
|
borderRadius: 6,
|
|
358
374
|
border: "none",
|
|
359
375
|
cursor: "pointer",
|
|
360
|
-
fontSize:
|
|
376
|
+
fontSize: 12,
|
|
361
377
|
fontWeight: 500,
|
|
362
|
-
background: activeTab === tab ? isLight ? "#
|
|
363
|
-
color: activeTab === tab ? isLight ? "#18181b" : "#fff" : isLight ? "#71717a" : "#
|
|
378
|
+
background: activeTab === tab ? isLight ? "#fff" : "#2a2a2a" : "transparent",
|
|
379
|
+
color: activeTab === tab ? isLight ? "#18181b" : "#fff" : isLight ? "#71717a" : "#71717a",
|
|
380
|
+
boxShadow: activeTab === tab ? isLight ? "0 1px 2px rgba(0,0,0,0.05)" : "0 1px 2px rgba(0,0,0,0.2)" : "none",
|
|
381
|
+
transition: "all 150ms"
|
|
364
382
|
},
|
|
365
383
|
children: [
|
|
366
|
-
tab === "changelog" && "
|
|
367
|
-
tab === "roadmap" && "
|
|
368
|
-
tab === "ideas" && "
|
|
384
|
+
tab === "changelog" && "Changelog",
|
|
385
|
+
tab === "roadmap" && "Roadmap",
|
|
386
|
+
tab === "ideas" && "Ideas"
|
|
369
387
|
]
|
|
370
388
|
},
|
|
371
389
|
tab
|
|
372
390
|
))
|
|
373
391
|
}
|
|
374
392
|
),
|
|
375
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
376
|
-
activeTab === "changelog" && /* @__PURE__ */ jsx("div", { children:
|
|
377
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
378
|
-
/* @__PURE__ */ jsx("div", { children: "No releases yet" })
|
|
379
|
-
] }) :
|
|
380
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
381
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
382
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: version.title }),
|
|
393
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, overflowY: "auto", padding: 12, minHeight: 0 }, children: [
|
|
394
|
+
activeTab === "changelog" && /* @__PURE__ */ jsx("div", { children: versionsArray.length === 0 ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
|
|
395
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F680}" }),
|
|
396
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 13 }, children: "No releases yet" })
|
|
397
|
+
] }) : versionsArray.slice(0, 5).map((version, idx) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12, paddingBottom: 12, borderBottom: idx < versionsArray.length - 1 && idx < 4 ? `1px solid ${isLight ? "#f0f0f0" : "#252525"}` : "none" }, children: [
|
|
398
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
|
|
399
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: version.emoji || "\u{1F4E6}" }),
|
|
400
|
+
/* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 13, color: isLight ? "#18181b" : "#fff" }, children: version.title }),
|
|
383
401
|
/* @__PURE__ */ jsx(
|
|
384
402
|
"span",
|
|
385
403
|
{
|
|
386
404
|
style: {
|
|
387
|
-
padding: "
|
|
388
|
-
fontSize:
|
|
405
|
+
padding: "1px 5px",
|
|
406
|
+
fontSize: 9,
|
|
389
407
|
fontWeight: 500,
|
|
390
|
-
borderRadius:
|
|
391
|
-
background: version.type === "major" ? "#f3e8ff" : version.type === "minor" ? "#dbeafe" : "#f4f4f5",
|
|
392
|
-
color: version.type === "major" ? "#7c3aed" : version.type === "minor" ? "#2563eb" : "#52525b"
|
|
408
|
+
borderRadius: 3,
|
|
409
|
+
background: version.type === "major" ? "#f3e8ff" : version.type === "minor" ? "#dbeafe" : isLight ? "#f4f4f5" : "#2a2a2a",
|
|
410
|
+
color: version.type === "major" ? "#7c3aed" : version.type === "minor" ? "#2563eb" : isLight ? "#52525b" : "#a1a1aa"
|
|
393
411
|
},
|
|
394
412
|
children: version.type
|
|
395
413
|
}
|
|
396
414
|
)
|
|
397
415
|
] }),
|
|
398
|
-
/* @__PURE__ */ jsxs("div", { style: { fontSize:
|
|
416
|
+
/* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: isLight ? "#71717a" : "#71717a", marginBottom: 6 }, children: [
|
|
399
417
|
"v",
|
|
400
418
|
version.version,
|
|
401
419
|
" \xB7 ",
|
|
402
420
|
new Date(version.date).toLocaleDateString()
|
|
403
421
|
] }),
|
|
404
|
-
version.description && /* @__PURE__ */ jsx("p", { style: { fontSize:
|
|
405
|
-
version.features && version.features.length > 0 && /* @__PURE__ */
|
|
406
|
-
/* @__PURE__ */
|
|
407
|
-
|
|
408
|
-
|
|
422
|
+
version.description && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: isLight ? "#52525b" : "#a1a1aa", margin: "0 0 6px 0", lineHeight: 1.5 }, children: version.description }),
|
|
423
|
+
version.features && version.features.length > 0 && /* @__PURE__ */ jsxs("ul", { style: { margin: 0, paddingLeft: 0, listStyle: "none" }, children: [
|
|
424
|
+
version.features.slice(0, 4).map((feature, i) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", alignItems: "flex-start", gap: 6, fontSize: 12, color: isLight ? "#52525b" : "#a1a1aa", marginBottom: 2, lineHeight: 1.4 }, children: [
|
|
425
|
+
/* @__PURE__ */ jsx("span", { style: { color: "#22c55e", fontSize: 11 }, children: "\u2713" }),
|
|
426
|
+
feature
|
|
427
|
+
] }, i)),
|
|
428
|
+
version.features.length > 4 && /* @__PURE__ */ jsxs("li", { style: { fontSize: 11, color: isLight ? "#a1a1aa" : "#525252", marginTop: 2 }, children: [
|
|
429
|
+
"+",
|
|
430
|
+
version.features.length - 4,
|
|
431
|
+
" more..."
|
|
432
|
+
] })
|
|
433
|
+
] })
|
|
409
434
|
] }, idx)) }),
|
|
410
|
-
activeTab === "roadmap" && /* @__PURE__ */ jsx("div", { children: Object.keys(groupedTasks).length === 0 ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding:
|
|
411
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
412
|
-
/* @__PURE__ */ jsx("div", { children: "No public roadmap items" })
|
|
413
|
-
] }) : ["in-progress", "todo", "backlog"
|
|
435
|
+
activeTab === "roadmap" && /* @__PURE__ */ jsx("div", { children: Object.keys(groupedTasks).length === 0 ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
|
|
436
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F5FA}\uFE0F" }),
|
|
437
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 13 }, children: "No public roadmap items" })
|
|
438
|
+
] }) : ["in-progress", "todo", "backlog"].map((col) => {
|
|
414
439
|
const tasks = groupedTasks[col];
|
|
415
440
|
if (!tasks || tasks.length === 0) return null;
|
|
416
|
-
return /* @__PURE__ */ jsxs("div", { style: { marginBottom:
|
|
417
|
-
/* @__PURE__ */ jsxs("h3", { style: { fontSize:
|
|
441
|
+
return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
|
|
442
|
+
/* @__PURE__ */ jsxs("h3", { style: { fontSize: 10, fontWeight: 600, color: isLight ? "#a1a1aa" : "#71717a", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.5px" }, children: [
|
|
418
443
|
COLUMN_LABELS[col] || col,
|
|
419
444
|
" (",
|
|
420
445
|
tasks.length,
|
|
421
446
|
")"
|
|
422
447
|
] }),
|
|
423
|
-
tasks.map((task) => /* @__PURE__ */ jsx(
|
|
448
|
+
tasks.slice(0, 4).map((task) => /* @__PURE__ */ jsx(
|
|
424
449
|
"div",
|
|
425
450
|
{
|
|
426
451
|
style: {
|
|
427
|
-
padding:
|
|
428
|
-
marginBottom:
|
|
429
|
-
borderRadius:
|
|
430
|
-
background: isLight ? "#
|
|
452
|
+
padding: "8px 10px",
|
|
453
|
+
marginBottom: 4,
|
|
454
|
+
borderRadius: 5,
|
|
455
|
+
background: isLight ? "#f5f5f5" : "#252525"
|
|
431
456
|
},
|
|
432
|
-
children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
457
|
+
children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
|
|
433
458
|
/* @__PURE__ */ jsx(
|
|
434
459
|
"span",
|
|
435
460
|
{
|
|
436
461
|
style: {
|
|
437
|
-
width:
|
|
438
|
-
height:
|
|
462
|
+
width: 6,
|
|
463
|
+
height: 6,
|
|
439
464
|
borderRadius: "50%",
|
|
440
|
-
background: TYPE_COLORS[task.type] || "#71717a"
|
|
465
|
+
background: TYPE_COLORS[task.type] || "#71717a",
|
|
466
|
+
flexShrink: 0
|
|
441
467
|
}
|
|
442
468
|
}
|
|
443
469
|
),
|
|
444
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
470
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: isLight ? "#18181b" : "#fff", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: task.title })
|
|
445
471
|
] })
|
|
446
472
|
},
|
|
447
473
|
task.id
|
|
448
|
-
))
|
|
474
|
+
)),
|
|
475
|
+
tasks.length > 4 && /* @__PURE__ */ jsxs("div", { style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#525252", marginTop: 4 }, children: [
|
|
476
|
+
"+",
|
|
477
|
+
tasks.length - 4,
|
|
478
|
+
" more..."
|
|
479
|
+
] })
|
|
449
480
|
] }, col);
|
|
450
481
|
}) }),
|
|
451
|
-
activeTab === "ideas" && /* @__PURE__ */ jsx("div", { children:
|
|
452
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
453
|
-
/* @__PURE__ */ jsx("div", { children: "No feature requests yet" })
|
|
454
|
-
] }) :
|
|
482
|
+
activeTab === "ideas" && /* @__PURE__ */ jsx("div", { children: ideasArray.length === 0 ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
|
|
483
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F4A1}" }),
|
|
484
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 13 }, children: "No feature requests yet" })
|
|
485
|
+
] }) : ideasArray.slice(0, 5).map((idea) => /* @__PURE__ */ jsxs(
|
|
455
486
|
"div",
|
|
456
487
|
{
|
|
457
488
|
style: {
|
|
458
|
-
padding:
|
|
459
|
-
marginBottom:
|
|
460
|
-
borderRadius:
|
|
461
|
-
background: isLight ? "#
|
|
489
|
+
padding: 10,
|
|
490
|
+
marginBottom: 6,
|
|
491
|
+
borderRadius: 6,
|
|
492
|
+
background: isLight ? "#f5f5f5" : "#252525",
|
|
462
493
|
display: "flex",
|
|
463
494
|
alignItems: "flex-start",
|
|
464
|
-
gap:
|
|
495
|
+
gap: 10
|
|
465
496
|
},
|
|
466
497
|
children: [
|
|
467
498
|
/* @__PURE__ */ jsxs(
|
|
@@ -471,23 +502,20 @@ function VersionPill({
|
|
|
471
502
|
display: "flex",
|
|
472
503
|
flexDirection: "column",
|
|
473
504
|
alignItems: "center",
|
|
474
|
-
padding: "
|
|
475
|
-
borderRadius:
|
|
476
|
-
background: isLight ? "#fff" : "#
|
|
477
|
-
minWidth:
|
|
505
|
+
padding: "3px 6px",
|
|
506
|
+
borderRadius: 4,
|
|
507
|
+
background: isLight ? "#fff" : "#1a1a1a",
|
|
508
|
+
minWidth: 32
|
|
478
509
|
},
|
|
479
510
|
children: [
|
|
480
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
481
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
511
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: idea.votes }),
|
|
512
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: isLight ? "#71717a" : "#71717a" }, children: "votes" })
|
|
482
513
|
]
|
|
483
514
|
}
|
|
484
515
|
),
|
|
485
|
-
/* @__PURE__ */ jsxs("div", { children: [
|
|
486
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
487
|
-
idea.description && /* @__PURE__ */
|
|
488
|
-
idea.description.slice(0, 100),
|
|
489
|
-
"..."
|
|
490
|
-
] })
|
|
516
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
517
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 500, color: isLight ? "#18181b" : "#fff", marginBottom: 2 }, children: idea.title }),
|
|
518
|
+
idea.description && /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: isLight ? "#71717a" : "#71717a", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: idea.description.slice(0, 80) })
|
|
491
519
|
] })
|
|
492
520
|
]
|
|
493
521
|
},
|
|
@@ -498,9 +526,10 @@ function VersionPill({
|
|
|
498
526
|
"div",
|
|
499
527
|
{
|
|
500
528
|
style: {
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
529
|
+
flexShrink: 0,
|
|
530
|
+
padding: "10px 12px",
|
|
531
|
+
borderTop: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
532
|
+
background: isLight ? "#fafafa" : "#151515",
|
|
504
533
|
display: "flex",
|
|
505
534
|
alignItems: "center",
|
|
506
535
|
justifyContent: "space-between"
|
|
@@ -512,7 +541,7 @@ function VersionPill({
|
|
|
512
541
|
href: "https://versionpill.com",
|
|
513
542
|
target: "_blank",
|
|
514
543
|
rel: "noopener noreferrer",
|
|
515
|
-
style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#
|
|
544
|
+
style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#525252", textDecoration: "none" },
|
|
516
545
|
children: "Powered by Version Pill"
|
|
517
546
|
}
|
|
518
547
|
),
|
|
@@ -523,14 +552,17 @@ function VersionPill({
|
|
|
523
552
|
target: "_blank",
|
|
524
553
|
rel: "noopener noreferrer",
|
|
525
554
|
style: {
|
|
526
|
-
padding: "
|
|
527
|
-
fontSize:
|
|
555
|
+
padding: "5px 10px",
|
|
556
|
+
fontSize: 11,
|
|
528
557
|
fontWeight: 500,
|
|
529
|
-
borderRadius:
|
|
558
|
+
borderRadius: 5,
|
|
530
559
|
background: "#22c55e",
|
|
531
560
|
color: "#fff",
|
|
532
|
-
textDecoration: "none"
|
|
561
|
+
textDecoration: "none",
|
|
562
|
+
transition: "background 150ms"
|
|
533
563
|
},
|
|
564
|
+
onMouseEnter: (e) => e.currentTarget.style.background = "#16a34a",
|
|
565
|
+
onMouseLeave: (e) => e.currentTarget.style.background = "#22c55e",
|
|
534
566
|
children: "View All \u2192"
|
|
535
567
|
}
|
|
536
568
|
)
|