version-pill-react 1.2.4 → 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 +124 -93
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +124 -93
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -257,7 +257,9 @@ function VersionPill({
|
|
|
257
257
|
}
|
|
258
258
|
);
|
|
259
259
|
};
|
|
260
|
+
const versionsArray = Array.isArray(versions) ? versions : [];
|
|
260
261
|
const tasksArray = Array.isArray(roadmapTasks) ? roadmapTasks : [];
|
|
262
|
+
const ideasArray = Array.isArray(ideas) ? ideas : [];
|
|
261
263
|
const groupedTasks = tasksArray.reduce((acc, task) => {
|
|
262
264
|
const col = task.column || "backlog";
|
|
263
265
|
if (!acc[col]) acc[col] = [];
|
|
@@ -273,7 +275,7 @@ function VersionPill({
|
|
|
273
275
|
display: "flex",
|
|
274
276
|
alignItems: "center",
|
|
275
277
|
justifyContent: "center",
|
|
276
|
-
padding:
|
|
278
|
+
padding: 20
|
|
277
279
|
}, children: [
|
|
278
280
|
/* @__PURE__ */ jsx(
|
|
279
281
|
"div",
|
|
@@ -282,8 +284,9 @@ function VersionPill({
|
|
|
282
284
|
style: {
|
|
283
285
|
position: "absolute",
|
|
284
286
|
inset: 0,
|
|
285
|
-
background: "rgba(0,0,0,0.
|
|
286
|
-
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)"
|
|
287
290
|
}
|
|
288
291
|
}
|
|
289
292
|
),
|
|
@@ -292,31 +295,34 @@ function VersionPill({
|
|
|
292
295
|
{
|
|
293
296
|
style: {
|
|
294
297
|
position: "relative",
|
|
298
|
+
display: "flex",
|
|
299
|
+
flexDirection: "column",
|
|
295
300
|
width: "100%",
|
|
296
|
-
maxWidth:
|
|
297
|
-
maxHeight: "80vh",
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
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"
|
|
302
307
|
},
|
|
303
308
|
children: [
|
|
304
309
|
/* @__PURE__ */ jsxs(
|
|
305
310
|
"div",
|
|
306
311
|
{
|
|
307
312
|
style: {
|
|
308
|
-
|
|
309
|
-
|
|
313
|
+
flexShrink: 0,
|
|
314
|
+
padding: "14px 16px",
|
|
315
|
+
borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
310
316
|
display: "flex",
|
|
311
317
|
alignItems: "center",
|
|
312
318
|
justifyContent: "space-between"
|
|
313
319
|
},
|
|
314
320
|
children: [
|
|
315
321
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
|
|
316
|
-
project?.icon && /* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
322
|
+
project?.icon && /* @__PURE__ */ jsx("span", { style: { fontSize: 18 }, children: project.icon }),
|
|
317
323
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
318
|
-
/* @__PURE__ */ jsx("h2", { style: { fontWeight: 600, color: isLight ? "#18181b" : "#fff", margin: 0 }, children: project?.name || "What's New" }),
|
|
319
|
-
/* @__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: [
|
|
320
326
|
"v",
|
|
321
327
|
currentVersion
|
|
322
328
|
] })
|
|
@@ -327,14 +333,21 @@ function VersionPill({
|
|
|
327
333
|
{
|
|
328
334
|
onClick: () => setIsOpen(false),
|
|
329
335
|
style: {
|
|
330
|
-
|
|
336
|
+
width: 28,
|
|
337
|
+
height: 28,
|
|
338
|
+
display: "flex",
|
|
339
|
+
alignItems: "center",
|
|
340
|
+
justifyContent: "center",
|
|
331
341
|
borderRadius: 6,
|
|
332
|
-
background: "
|
|
342
|
+
background: isLight ? "#f5f5f5" : "#2a2a2a",
|
|
333
343
|
border: "none",
|
|
334
344
|
cursor: "pointer",
|
|
335
|
-
color: isLight ? "#71717a" : "#a1a1aa"
|
|
345
|
+
color: isLight ? "#71717a" : "#a1a1aa",
|
|
346
|
+
transition: "background 150ms"
|
|
336
347
|
},
|
|
337
|
-
|
|
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" }) })
|
|
338
351
|
}
|
|
339
352
|
)
|
|
340
353
|
]
|
|
@@ -344,125 +357,142 @@ function VersionPill({
|
|
|
344
357
|
"div",
|
|
345
358
|
{
|
|
346
359
|
style: {
|
|
360
|
+
flexShrink: 0,
|
|
347
361
|
display: "flex",
|
|
348
|
-
gap:
|
|
349
|
-
padding: "8px
|
|
350
|
-
borderBottom: `1px solid ${isLight ? "#
|
|
362
|
+
gap: 2,
|
|
363
|
+
padding: "8px 12px",
|
|
364
|
+
borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
365
|
+
background: isLight ? "#fafafa" : "#151515"
|
|
351
366
|
},
|
|
352
367
|
children: ["changelog", "roadmap", "ideas"].map((tab) => /* @__PURE__ */ jsxs(
|
|
353
368
|
"button",
|
|
354
369
|
{
|
|
355
370
|
onClick: () => setActiveTab(tab),
|
|
356
371
|
style: {
|
|
357
|
-
padding: "6px
|
|
372
|
+
padding: "6px 10px",
|
|
358
373
|
borderRadius: 6,
|
|
359
374
|
border: "none",
|
|
360
375
|
cursor: "pointer",
|
|
361
|
-
fontSize:
|
|
376
|
+
fontSize: 12,
|
|
362
377
|
fontWeight: 500,
|
|
363
|
-
background: activeTab === tab ? isLight ? "#
|
|
364
|
-
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"
|
|
365
382
|
},
|
|
366
383
|
children: [
|
|
367
|
-
tab === "changelog" && "
|
|
368
|
-
tab === "roadmap" && "
|
|
369
|
-
tab === "ideas" && "
|
|
384
|
+
tab === "changelog" && "Changelog",
|
|
385
|
+
tab === "roadmap" && "Roadmap",
|
|
386
|
+
tab === "ideas" && "Ideas"
|
|
370
387
|
]
|
|
371
388
|
},
|
|
372
389
|
tab
|
|
373
390
|
))
|
|
374
391
|
}
|
|
375
392
|
),
|
|
376
|
-
/* @__PURE__ */ jsxs("div", { style: {
|
|
377
|
-
activeTab === "changelog" && /* @__PURE__ */ jsx("div", { children:
|
|
378
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
379
|
-
/* @__PURE__ */ jsx("div", { children: "No releases yet" })
|
|
380
|
-
] }) :
|
|
381
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
382
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
383
|
-
/* @__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 }),
|
|
384
401
|
/* @__PURE__ */ jsx(
|
|
385
402
|
"span",
|
|
386
403
|
{
|
|
387
404
|
style: {
|
|
388
|
-
padding: "
|
|
389
|
-
fontSize:
|
|
405
|
+
padding: "1px 5px",
|
|
406
|
+
fontSize: 9,
|
|
390
407
|
fontWeight: 500,
|
|
391
|
-
borderRadius:
|
|
392
|
-
background: version.type === "major" ? "#f3e8ff" : version.type === "minor" ? "#dbeafe" : "#f4f4f5",
|
|
393
|
-
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"
|
|
394
411
|
},
|
|
395
412
|
children: version.type
|
|
396
413
|
}
|
|
397
414
|
)
|
|
398
415
|
] }),
|
|
399
|
-
/* @__PURE__ */ jsxs("div", { style: { fontSize:
|
|
416
|
+
/* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: isLight ? "#71717a" : "#71717a", marginBottom: 6 }, children: [
|
|
400
417
|
"v",
|
|
401
418
|
version.version,
|
|
402
419
|
" \xB7 ",
|
|
403
420
|
new Date(version.date).toLocaleDateString()
|
|
404
421
|
] }),
|
|
405
|
-
version.description && /* @__PURE__ */ jsx("p", { style: { fontSize:
|
|
406
|
-
version.features && version.features.length > 0 && /* @__PURE__ */
|
|
407
|
-
/* @__PURE__ */
|
|
408
|
-
|
|
409
|
-
|
|
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
|
+
] })
|
|
410
434
|
] }, idx)) }),
|
|
411
|
-
activeTab === "roadmap" && /* @__PURE__ */ jsx("div", { children: Object.keys(groupedTasks).length === 0 ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding:
|
|
412
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
413
|
-
/* @__PURE__ */ jsx("div", { children: "No public roadmap items" })
|
|
414
|
-
] }) : ["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) => {
|
|
415
439
|
const tasks = groupedTasks[col];
|
|
416
440
|
if (!tasks || tasks.length === 0) return null;
|
|
417
|
-
return /* @__PURE__ */ jsxs("div", { style: { marginBottom:
|
|
418
|
-
/* @__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: [
|
|
419
443
|
COLUMN_LABELS[col] || col,
|
|
420
444
|
" (",
|
|
421
445
|
tasks.length,
|
|
422
446
|
")"
|
|
423
447
|
] }),
|
|
424
|
-
tasks.map((task) => /* @__PURE__ */ jsx(
|
|
448
|
+
tasks.slice(0, 4).map((task) => /* @__PURE__ */ jsx(
|
|
425
449
|
"div",
|
|
426
450
|
{
|
|
427
451
|
style: {
|
|
428
|
-
padding:
|
|
429
|
-
marginBottom:
|
|
430
|
-
borderRadius:
|
|
431
|
-
background: isLight ? "#
|
|
452
|
+
padding: "8px 10px",
|
|
453
|
+
marginBottom: 4,
|
|
454
|
+
borderRadius: 5,
|
|
455
|
+
background: isLight ? "#f5f5f5" : "#252525"
|
|
432
456
|
},
|
|
433
|
-
children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
457
|
+
children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
|
|
434
458
|
/* @__PURE__ */ jsx(
|
|
435
459
|
"span",
|
|
436
460
|
{
|
|
437
461
|
style: {
|
|
438
|
-
width:
|
|
439
|
-
height:
|
|
462
|
+
width: 6,
|
|
463
|
+
height: 6,
|
|
440
464
|
borderRadius: "50%",
|
|
441
|
-
background: TYPE_COLORS[task.type] || "#71717a"
|
|
465
|
+
background: TYPE_COLORS[task.type] || "#71717a",
|
|
466
|
+
flexShrink: 0
|
|
442
467
|
}
|
|
443
468
|
}
|
|
444
469
|
),
|
|
445
|
-
/* @__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 })
|
|
446
471
|
] })
|
|
447
472
|
},
|
|
448
473
|
task.id
|
|
449
|
-
))
|
|
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
|
+
] })
|
|
450
480
|
] }, col);
|
|
451
481
|
}) }),
|
|
452
|
-
activeTab === "ideas" && /* @__PURE__ */ jsx("div", { children:
|
|
453
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
454
|
-
/* @__PURE__ */ jsx("div", { children: "No feature requests yet" })
|
|
455
|
-
] }) :
|
|
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(
|
|
456
486
|
"div",
|
|
457
487
|
{
|
|
458
488
|
style: {
|
|
459
|
-
padding:
|
|
460
|
-
marginBottom:
|
|
461
|
-
borderRadius:
|
|
462
|
-
background: isLight ? "#
|
|
489
|
+
padding: 10,
|
|
490
|
+
marginBottom: 6,
|
|
491
|
+
borderRadius: 6,
|
|
492
|
+
background: isLight ? "#f5f5f5" : "#252525",
|
|
463
493
|
display: "flex",
|
|
464
494
|
alignItems: "flex-start",
|
|
465
|
-
gap:
|
|
495
|
+
gap: 10
|
|
466
496
|
},
|
|
467
497
|
children: [
|
|
468
498
|
/* @__PURE__ */ jsxs(
|
|
@@ -472,23 +502,20 @@ function VersionPill({
|
|
|
472
502
|
display: "flex",
|
|
473
503
|
flexDirection: "column",
|
|
474
504
|
alignItems: "center",
|
|
475
|
-
padding: "
|
|
476
|
-
borderRadius:
|
|
477
|
-
background: isLight ? "#fff" : "#
|
|
478
|
-
minWidth:
|
|
505
|
+
padding: "3px 6px",
|
|
506
|
+
borderRadius: 4,
|
|
507
|
+
background: isLight ? "#fff" : "#1a1a1a",
|
|
508
|
+
minWidth: 32
|
|
479
509
|
},
|
|
480
510
|
children: [
|
|
481
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
482
|
-
/* @__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" })
|
|
483
513
|
]
|
|
484
514
|
}
|
|
485
515
|
),
|
|
486
|
-
/* @__PURE__ */ jsxs("div", { children: [
|
|
487
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
488
|
-
idea.description && /* @__PURE__ */
|
|
489
|
-
idea.description.slice(0, 100),
|
|
490
|
-
"..."
|
|
491
|
-
] })
|
|
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) })
|
|
492
519
|
] })
|
|
493
520
|
]
|
|
494
521
|
},
|
|
@@ -499,9 +526,10 @@ function VersionPill({
|
|
|
499
526
|
"div",
|
|
500
527
|
{
|
|
501
528
|
style: {
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
529
|
+
flexShrink: 0,
|
|
530
|
+
padding: "10px 12px",
|
|
531
|
+
borderTop: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
|
|
532
|
+
background: isLight ? "#fafafa" : "#151515",
|
|
505
533
|
display: "flex",
|
|
506
534
|
alignItems: "center",
|
|
507
535
|
justifyContent: "space-between"
|
|
@@ -513,7 +541,7 @@ function VersionPill({
|
|
|
513
541
|
href: "https://versionpill.com",
|
|
514
542
|
target: "_blank",
|
|
515
543
|
rel: "noopener noreferrer",
|
|
516
|
-
style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#
|
|
544
|
+
style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#525252", textDecoration: "none" },
|
|
517
545
|
children: "Powered by Version Pill"
|
|
518
546
|
}
|
|
519
547
|
),
|
|
@@ -524,14 +552,17 @@ function VersionPill({
|
|
|
524
552
|
target: "_blank",
|
|
525
553
|
rel: "noopener noreferrer",
|
|
526
554
|
style: {
|
|
527
|
-
padding: "
|
|
528
|
-
fontSize:
|
|
555
|
+
padding: "5px 10px",
|
|
556
|
+
fontSize: 11,
|
|
529
557
|
fontWeight: 500,
|
|
530
|
-
borderRadius:
|
|
558
|
+
borderRadius: 5,
|
|
531
559
|
background: "#22c55e",
|
|
532
560
|
color: "#fff",
|
|
533
|
-
textDecoration: "none"
|
|
561
|
+
textDecoration: "none",
|
|
562
|
+
transition: "background 150ms"
|
|
534
563
|
},
|
|
564
|
+
onMouseEnter: (e) => e.currentTarget.style.background = "#16a34a",
|
|
565
|
+
onMouseLeave: (e) => e.currentTarget.style.background = "#22c55e",
|
|
535
566
|
children: "View All \u2192"
|
|
536
567
|
}
|
|
537
568
|
)
|