@the-portland-company/shell 0.16.1 → 0.16.2
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/chrome.css +35 -0
- package/dist/native.cjs +54 -50
- package/dist/native.cjs.map +1 -1
- package/dist/native.js +54 -50
- package/dist/native.js.map +1 -1
- package/package.json +1 -1
package/dist/chrome.css
CHANGED
|
@@ -349,3 +349,38 @@
|
|
|
349
349
|
font-weight: 400;
|
|
350
350
|
line-height: 1;
|
|
351
351
|
}
|
|
352
|
+
|
|
353
|
+
/* DevNotes (and any widget-slot popover) — dark-theme inheritance. The
|
|
354
|
+
package's compiled sheet hardcodes light utility colors (bg-white,
|
|
355
|
+
text-gray-*, border-gray-*), so its dropdown rendered light-on-dark. Remap
|
|
356
|
+
those inside the slot to the chrome tokens under `.dark`. */
|
|
357
|
+
.dark .topbar-widget-slot [class*="bg-white"] {
|
|
358
|
+
background-color: var(--panel-elevated);
|
|
359
|
+
}
|
|
360
|
+
.dark .topbar-widget-slot [class*="text-gray-9"],
|
|
361
|
+
.dark .topbar-widget-slot [class*="text-gray-8"],
|
|
362
|
+
.dark .topbar-widget-slot [class*="text-gray-7"],
|
|
363
|
+
.dark .topbar-widget-slot [class*="text-slate-9"],
|
|
364
|
+
.dark .topbar-widget-slot [class*="text-slate-8"] {
|
|
365
|
+
color: var(--foreground);
|
|
366
|
+
}
|
|
367
|
+
.dark .topbar-widget-slot [class*="text-gray-6"],
|
|
368
|
+
.dark .topbar-widget-slot [class*="text-gray-5"],
|
|
369
|
+
.dark .topbar-widget-slot [class*="text-gray-4"],
|
|
370
|
+
.dark .topbar-widget-slot [class*="text-slate-5"] {
|
|
371
|
+
color: var(--muted);
|
|
372
|
+
}
|
|
373
|
+
.dark .topbar-widget-slot [class*="border-gray-"],
|
|
374
|
+
.dark .topbar-widget-slot [class*="border-slate-"] {
|
|
375
|
+
border-color: var(--line);
|
|
376
|
+
}
|
|
377
|
+
.dark .topbar-widget-slot [class*="bg-gray-50"],
|
|
378
|
+
.dark .topbar-widget-slot [class*="bg-gray-100"],
|
|
379
|
+
.dark .topbar-widget-slot [class*="bg-slate-50"],
|
|
380
|
+
.dark .topbar-widget-slot [class*="bg-slate-100"] {
|
|
381
|
+
background-color: var(--panel);
|
|
382
|
+
}
|
|
383
|
+
.dark .topbar-widget-slot [class*="hover:bg-gray-"]:hover,
|
|
384
|
+
.dark .topbar-widget-slot [class*="hover:bg-slate-"]:hover {
|
|
385
|
+
background-color: var(--panel);
|
|
386
|
+
}
|
package/dist/native.cjs
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
var react = require('react');
|
|
5
5
|
var fi = require('react-icons/fi');
|
|
6
|
+
var reactDom = require('react-dom');
|
|
6
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
8
|
|
|
8
9
|
// src/native/index.tsx
|
|
@@ -545,66 +546,69 @@ function SupportAction() {
|
|
|
545
546
|
]
|
|
546
547
|
}
|
|
547
548
|
),
|
|
548
|
-
open
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
/* @__PURE__ */ jsxRuntime.
|
|
560
|
-
|
|
561
|
-
/* @__PURE__ */ jsxRuntime.
|
|
562
|
-
|
|
563
|
-
"
|
|
564
|
-
{
|
|
565
|
-
type: "button",
|
|
566
|
-
onClick: close,
|
|
567
|
-
className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90",
|
|
568
|
-
children: "Done"
|
|
569
|
-
}
|
|
570
|
-
) })
|
|
571
|
-
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
572
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
|
|
573
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
574
|
-
"textarea",
|
|
575
|
-
{
|
|
576
|
-
value: message,
|
|
577
|
-
onChange: (e) => setMessage(e.target.value),
|
|
578
|
-
rows: 5,
|
|
579
|
-
placeholder: "How can we help?",
|
|
580
|
-
className: "mt-4 w-full resize-y rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-race-red)]"
|
|
581
|
-
}
|
|
582
|
-
),
|
|
583
|
-
state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[color:var(--color-race-red)]", children: "Sending failed \u2014 try again." }) : null,
|
|
584
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
|
|
585
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
549
|
+
open && typeof document !== "undefined" ? reactDom.createPortal(
|
|
550
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
551
|
+
"div",
|
|
552
|
+
{
|
|
553
|
+
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
|
|
554
|
+
role: "dialog",
|
|
555
|
+
"aria-modal": "true",
|
|
556
|
+
"aria-label": "Support request",
|
|
557
|
+
onMouseDown: (e) => {
|
|
558
|
+
if (e.target === e.currentTarget) close();
|
|
559
|
+
},
|
|
560
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-2xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] p-6 shadow-[var(--shadow-soft)]", children: [
|
|
561
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: "Contact Support" }),
|
|
562
|
+
state === "sent" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
563
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm text-[color:var(--muted)]", children: "Your request was sent. The team will reply by email." }),
|
|
564
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
586
565
|
"button",
|
|
587
566
|
{
|
|
588
567
|
type: "button",
|
|
589
568
|
onClick: close,
|
|
590
|
-
className: "rounded-full
|
|
591
|
-
children: "
|
|
569
|
+
className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90",
|
|
570
|
+
children: "Done"
|
|
592
571
|
}
|
|
593
|
-
)
|
|
572
|
+
) })
|
|
573
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
574
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
|
|
594
575
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
595
|
-
"
|
|
576
|
+
"textarea",
|
|
596
577
|
{
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
578
|
+
value: message,
|
|
579
|
+
onChange: (e) => setMessage(e.target.value),
|
|
580
|
+
rows: 5,
|
|
581
|
+
placeholder: "How can we help?",
|
|
582
|
+
className: "mt-4 w-full resize-y rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-race-red)]"
|
|
602
583
|
}
|
|
603
|
-
)
|
|
584
|
+
),
|
|
585
|
+
state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[color:var(--color-race-red)]", children: "Sending failed \u2014 try again." }) : null,
|
|
586
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
|
|
587
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
588
|
+
"button",
|
|
589
|
+
{
|
|
590
|
+
type: "button",
|
|
591
|
+
onClick: close,
|
|
592
|
+
className: "rounded-full border border-[color:var(--line)] px-4 py-2 text-sm font-semibold text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
|
|
593
|
+
children: "Cancel"
|
|
594
|
+
}
|
|
595
|
+
),
|
|
596
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
597
|
+
"button",
|
|
598
|
+
{
|
|
599
|
+
type: "button",
|
|
600
|
+
onClick: submit,
|
|
601
|
+
disabled: !message.trim() || state === "sending",
|
|
602
|
+
className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
|
|
603
|
+
children: state === "sending" ? "Sending\u2026" : "Send request"
|
|
604
|
+
}
|
|
605
|
+
)
|
|
606
|
+
] })
|
|
604
607
|
] })
|
|
605
608
|
] })
|
|
606
|
-
|
|
607
|
-
|
|
609
|
+
}
|
|
610
|
+
),
|
|
611
|
+
document.body
|
|
608
612
|
) : null
|
|
609
613
|
] });
|
|
610
614
|
}
|