@opexa/portal-components 0.0.462 → 0.0.464
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.
|
@@ -83,5 +83,5 @@ export function Maya({ logo, responsibleGamingLogo, pagcorLogo, banner, classNam
|
|
|
83
83
|
};
|
|
84
84
|
runInit();
|
|
85
85
|
}, []);
|
|
86
|
-
return (_jsxs("div", { className: twMerge('relative flex min-h-screen flex-col', classNames.root), children: [banner && (_jsx(Image, { src: banner, alt: "brand logo",
|
|
86
|
+
return (_jsxs("div", { className: twMerge('relative flex min-h-screen flex-col bg-[#1F1F1F]', classNames.root), children: [banner && (_jsx(Image, { src: banner, alt: "brand logo", fill: true, className: twMerge('w-full grow object-contain object-top', classNames.banner) })), _jsxs("div", { className: twMerge('absolute bottom-0 w-full shrink-0 bg-[#1F1F1F] p-6', classNames.progressRoot), children: [_jsxs("div", { children: [_jsx(Image, { src: logo, alt: "brand logo", height: 50, width: 120, className: twMerge('mx-auto mb-5 h-12.5 w-auto', classNames.logo) }), _jsx("div", { className: twMerge('overflow-hidden rounded-full p-px', !complete && (classNames.progressTrackIncompleteBG ?? 'bg-[#373A41]'), complete && (classNames.progressTrackCompleteBG ?? 'bg-[#ffb300]'), classNames.progressTrack), id: "progress:root", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progress, "aria-labelledby": "progress:label", children: _jsx("div", { className: twMerge('rounded-full bg-[#1F1F1F] p-px', classNames.progressTrackOuter), children: _jsx("div", { className: twMerge('relative h-4 w-full overflow-hidden rounded-full bg-[#22262e]', classNames.progressTrackInner), children: _jsx("div", { className: twMerge('absolute left-0 h-full rounded-full bg-[#ffb300] transition-all duration-150', classNames.progressBar), style: { width: `${progress}%` } }) }) }) }), _jsxs("span", { id: "progress:label", className: twMerge('mt-3 block text-center text-[#CECFD2] text-sm', classNames.progressLabel), children: [progress, "% Loading..."] })] }), _jsxs("div", { className: twMerge('mt-7 flex items-center justify-center gap-2 text-[#94969C] text-xs', classNames.licensedBy), children: [_jsx("span", { children: "Officially Licensed by" }), _jsx(Image, { src: pagcorLogo ?? pagcorLogoDefault, alt: "PAGCOR logo", height: 43, width: 88, className: twMerge('h-[43px] w-auto shrink-0', classNames.pagcorLogo), draggable: false, unoptimized: true }), _jsx(Image, { src: responsibleGamingLogo ?? responsibleGamingLogoDefault, alt: "Responsible Gaming logo", height: 50, width: 186, className: twMerge('h-[50px] w-auto shrink-0', classNames.responsibleGamingLogo), draggable: false, unoptimized: true })] })] })] }));
|
|
87
87
|
}
|
|
@@ -84,7 +84,7 @@ function Stages(props) {
|
|
|
84
84
|
const stage = props?.stages?.findLastIndex((stage) => stage.cleared) ?? 0;
|
|
85
85
|
return stage !== -1 ? stage + 1 : 1;
|
|
86
86
|
}, [props.stages]);
|
|
87
|
-
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto mt-40 min-h-auto min-w-[23rem] max-w-[25rem] overflow-y-auto rounded-xl px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: props.quest?.name || 'Quest' }), _jsx("div", { className: "font-normal text-[#94969C] text-sm", dangerouslySetInnerHTML: {
|
|
87
|
+
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto mt-40 min-h-auto min-w-[23rem] max-w-[25rem] overflow-y-auto rounded-xl border border-border-wagering-popup px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: props.quest?.name || 'Quest' }), _jsx("div", { className: "font-normal text-[#94969C] text-sm", dangerouslySetInnerHTML: {
|
|
88
88
|
__html: props.quest?.description ||
|
|
89
89
|
'Ready for a challenge? Complete them all and get amazing rewards!',
|
|
90
90
|
} }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: props.stages.map((stage, idx) => {
|
|
@@ -98,10 +98,10 @@ function Stages(props) {
|
|
|
98
98
|
}
|
|
99
99
|
function QuestWageringStageUnlocked({ bonus, stage, progressValue, data, isCompleted = false, }) {
|
|
100
100
|
const localeInfo = useLocaleInfo();
|
|
101
|
-
return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl bg-bg-
|
|
101
|
+
return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl border border-border-wagering-stage-popup bg-bg-wagering-stage-popup p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx(Badge.Root, { colorScheme: isCompleted ? 'success' : 'blue', size: "md", round: true, children: _jsx(Badge.Label, { children: data.cleared ? 'Completed' : 'Ongoing' }) })] }), _jsxs("div", { className: "mt-2.5 flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", progressValue, "%"] }), _jsx(Badge.Root, { size: "md", className: "border border-border-badge bg-bg-badge", round: false, children: _jsxs(Badge.Label, { className: "!text-text-badge", children: ["+", formatNumber(bonus, {
|
|
102
102
|
currency: localeInfo.currency.code,
|
|
103
103
|
}), ' ', "Bonus"] }) })] }), _jsx(Progress.Root, { max: 100, className: "mt-2 h-2 rounded-full bg-bg-primary", value: progressValue ?? 0, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) })] }));
|
|
104
104
|
}
|
|
105
105
|
function QuestWageringStageLocked({ stage }) {
|
|
106
|
-
return (_jsxs("div", { className: "mb-4 flex items-center justify-between rounded-xl bg-bg-
|
|
106
|
+
return (_jsxs("div", { className: "mb-4 flex items-center justify-between rounded-xl border border-border-wagering-stage-popup bg-bg-wagering-stage-popup p-3", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx("div", { className: "flex items-center justify-center rounded-full border border-border-lock bg-bg-lock p-1", children: _jsx(Lock01Icon, { className: "size-3 stroke-3 font-medium text-text-lock" }) })] }));
|
|
107
107
|
}
|
package/dist/styles/theme.css
CHANGED
|
@@ -283,6 +283,10 @@
|
|
|
283
283
|
--color-bg-badge: #13161B;
|
|
284
284
|
--color-text-badge: #CECFD2;
|
|
285
285
|
|
|
286
|
+
--color-border-wagering-popup: transparent;
|
|
287
|
+
--color-bg-wagering-stage-popup: #13161b;
|
|
288
|
+
--color-border-wagering-stage-popup: transparent;
|
|
289
|
+
|
|
286
290
|
|
|
287
291
|
--font-sans: var(--font-sans);
|
|
288
292
|
--font-mono: var(--font-mono);
|