Skip to content

feat/restriction-dialog-update #454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vekkele wants to merge 2 commits into
base: next
Choose a base branch
from
Open

feat/restriction-dialog-update #454

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aacf0c3
feat(restriction dialog) Update dialog layout
vekkele Jul 23, 2026
308a084
feat(restriction dialog) Update dialog visuals
vekkele Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 32 additions & 40 deletions src/lib/ui/app/Chart/RestrictedDataDialog/RestrictedDataDialog.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,58 +26,50 @@
})
</script>

<Dialog class="max-w-[480px] column md:mx-auto md:h-max sm:max-w-full">
<h2 class="flex items-center justify-between border-b px-5 py-3 text-base">
Restricted data
<Dialog class="mx-auto w-[calc(100%-40px)] max-w-[480px] column" forceDesktop>
<h2 class="flex items-center justify-between border-b bg-whale px-5 py-3 text-base font-medium">
Why is some data hidden?

<Button iconSize="12" size="sm" icon="close" onclick={close}></Button>
<Button iconSize="12" size="md" icon="close" onclick={close}></Button>
</h2>

<section class="min-h-0 gap-4 px-6 py-5 column">
<article class="overflow-auto rounded border column">
<div class="flex bg-athens text-fiord">
<section class="cell">Metric</section>
<section class="cell">Period of restricted data</section>
</div>

{#each Object.values(chartPlanRestrictions.$) as restriction}
{@const { label, restrictedTo, restrictedFrom } = restriction!}
<div class="flex border-t">
<section class="cell flex items-center">{label}</section>

<section class="cell">
{#if restrictedFrom}
Before: {getFormattedMonthDayYear(new Date(restrictedFrom))}
<section class="min-h-0 gap-6 overflow-auto px-6 pb-5 pt-6 column md:text-base">
<section class="gap-3 column">
<h3 class="font-semibold">Your plan has limited data period for:</h3>

<ul class="pl-4">
{#each Object.values(chartPlanRestrictions.$) as restriction}
{@const { label, restrictedTo, restrictedFrom } = restriction!}
<li class="list-outside list-disc">
<span>{label}</span>

{#if restrictedFrom && restrictedTo}
<span>
({getFormattedMonthDayYear(new Date(restrictedFrom))} - {getFormattedMonthDayYear(
new Date(restrictedTo),
)})
</span>
{/if}
<br />
{#if restrictedTo}
After: {getFormattedMonthDayYear(new Date(restrictedTo))}
{/if}
</section>
</div>
{/each}
</article>
</li>
{/each}
</ul>

<p class="text-fiord">
Your plan currently is restricted to limited data for this metric. To unlock the full range of
Santiment metrics, click the button below to Upgrade your account to PRO
</p>
<p>
To unlock the full potential of Santiment metrics you need to upgrade your account to PRO
</p>
</section>

<Button
class="self-start"
class="self-start sm:w-full sm:justify-center"
variant="fill"
accent="orange"
href="/pricing"
icon="crown"
data-source={source}
data-type="metrics_paywall"
onclick={close}>Upgrade</Button
onclick={close}
>
Upgrade
</Button>
</section>
</Dialog>

<style>
.cell {
flex: 1;
padding: 6px 16px;
}
</style>