Skip to content

Commit

Permalink
Additional styling updates for pricing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@StevenWeathers
StevenWeathers committed Mar 30, 2024
1 parent 750819b commit 148a26c
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 126 deletions.
2 changes: 1 addition & 1 deletion ui/src/components/pricing/Checkmark.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
</script>

<span
class="inline-flex items-center justify-center text-lime-500 dark:text-lime-400 rounded-full flex-shrink-0"
class="inline-flex items-center justify-center text-green-600 dark:text-lime-400 rounded-full flex-shrink-0"
>
<CheckCircleIcon />
</span>
14 changes: 7 additions & 7 deletions ui/src/components/pricing/PayPeriodToggle.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@
@apply font-medium;
@apply border;
@apply border-transparent;
@apply text-violet-200;
@apply text-indigo-200;
}
.toggle:hover {
@apply bg-violet-800;
@apply bg-indigo-800;
}
.toggle:focus {
Expand All @@ -27,22 +27,22 @@
@apply ring-2;
@apply ring-white;
@apply ring-offset-2;
@apply ring-offset-violet-700;
@apply ring-offset-indigo-700;
}
.active {
@apply border-violet-700;
@apply border-indigo-700;
@apply bg-white;
@apply text-violet-700;
@apply text-indigo-700;
@apply shadow-sm;
}
.active:hover {
@apply bg-violet-50;
@apply bg-indigo-50;
}
</style>

<div class="flex rounded-lg bg-violet-700 p-0.5">
<div class="flex rounded-lg bg-indigo-700 p-0.5">
<button
on:click="{togglePaymentPeriod}"
type="button"
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/pricing/SubscribeButton.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
> to subscribe
</p>
{:else if $user.subscribed}
<p class="text-lime-500 dark:text-lime-400 p-2 font-bold">
<p class="text-green-600 dark:text-lime-400 p-2 font-bold">
Already subscribed, thank you!
</p>
{:else}
Expand Down
233 changes: 116 additions & 117 deletions ui/src/pages/subscription/Pricing.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script lang="ts">
import PageLayout from '../../components/global/PageLayout.svelte';
import Checkmark from '../../components/pricing/Checkmark.svelte';
import SubscribeButton from '../../components/pricing/SubscribeButton.svelte';
import Crossmark from '../../components/pricing/Crossmark.svelte';
Expand Down Expand Up @@ -35,7 +34,7 @@
Name: 'Primary Features',
Included: true,
Header: true,
ColorClass: 'text-yellow-thunder',
ColorClass: 'text-blue-600 dark:text-sky-400',
},
{
Name: 'Poker Planning',
Expand Down Expand Up @@ -76,7 +75,7 @@
Name: 'Premium Features',
Included: true,
Header: true,
ColorClass: 'text-lime-500 dark:text-lime-400',
ColorClass: 'text-green-600 dark:text-lime-400',
},
{
Name: 'Import Poker Stories from Jira',
Expand Down Expand Up @@ -114,7 +113,7 @@
Name: 'Primary Features',
Included: true,
Header: true,
ColorClass: 'text-yellow-thunder',
ColorClass: 'text-blue-600 dark:text-sky-400',
},
{
Name: 'Poker Planning',
Expand Down Expand Up @@ -155,7 +154,7 @@
Name: 'Premium Features',
Included: true,
Header: true,
ColorClass: 'text-lime-500 dark:text-lime-400',
ColorClass: 'text-green-600 dark:text-lime-400',
},
{
Name: 'Import Poker Stories from Jira',
Expand Down Expand Up @@ -193,7 +192,7 @@
Name: 'Primary Features',
Included: true,
Header: true,
ColorClass: 'text-yellow-thunder',
ColorClass: 'text-blue-600 dark:text-sky-400',
},
{
Name: 'Poker Planning',
Expand Down Expand Up @@ -234,7 +233,7 @@
Name: 'Premium Features',
Included: true,
Header: true,
ColorClass: 'text-lime-500 dark:text-lime-400',
ColorClass: 'text-green-600 dark:text-lime-400',
},
{
Name: 'Import Poker Stories from Jira',
Expand Down Expand Up @@ -272,7 +271,7 @@
Name: 'Primary Features',
Included: true,
Header: true,
ColorClass: 'text-yellow-thunder',
ColorClass: 'text-blue-600 dark:text-sky-400',
},
{
Name: 'Poker Planning',
Expand Down Expand Up @@ -313,7 +312,7 @@
Name: 'Premium Features',
Included: true,
Header: true,
ColorClass: 'text-lime-500 dark:text-lime-400',
ColorClass: 'text-green-600 dark:text-lime-400',
},
{
Name: 'Import Poker Stories from Jira',
Expand All @@ -335,10 +334,8 @@
];
</script>

<PageLayout>
<div
class="relative mx-auto max-w-2xl px-6 text-center lg:max-w-7xl lg:px-8 pt-8"
>
<section class="relative bg-indigo-600 py-12">
<div class="relative mx-auto max-w-2xl px-6 text-center lg:max-w-7xl lg:px-8">
<h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">
<span class="block lg:inline">Simple pricing,</span>
<span class="block lg:inline">no commitment.</span>
Expand All @@ -351,128 +348,130 @@

<h2 class="sr-only">Plans</h2>

<div class="relative mt-12 flex justify-center sm:mt-16">
<div class="relative flex justify-center mt-8">
<PayPeriodToggle
selectedPaymentPeriod="{selectedPaymentPeriod}"
togglePaymentPeriod="{togglePaymentPeriod}"
/>
</div>
</section>

<section class="text-gray-700 dark:text-gray-300">
<div class="container px-5 pb-24 pt-12 mx-auto flex flex-wrap">
<div class="lg:w-1/4 mt-48 hidden lg:block">
<div
class="mt-px border-t border-gray-300 dark:border-gray-700 border-b border-l rounded-tl-lg rounded-bl-lg overflow-hidden"
>
{#each Plans[0].Features as feature, idx}
<p
class="{idx % 2
? 'text-gray-900 dark:text-gray-300'
: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-300'} h-12 px-4 flex items-center justify-start"
>
{#if feature.Header}
<span class="text-lg font-semibold {feature.ColorClass}"
>{feature.Name}</span
>
{:else}
{feature.Name}
{/if}
</p>
{/each}
</div>
</div>
<section class="bg-white dark:bg-transparent text-gray-700 dark:text-gray-300">
<div class="container px-5 pb-24 pt-12 mx-auto flex flex-wrap">
<div class="lg:w-1/4 mt-48 hidden lg:block">
<div
class="flex lg:w-3/4 w-full flex-wrap lg:border border-gray-300 dark:border-gray-700 rounded-lg"
class="mt-px border-t border-gray-300 dark:border-gray-700 border-b border-l rounded-tl-lg rounded-bl-lg overflow-hidden"
>
{#each Plans as plan, pidx}
<div
class="lg:w-1/4 lg:mt-px w-full mb-10 lg:mb-0 border-2 rounded-lg relative {pidx %
2
? 'border-gray-300 dark:border-gray-700 lg:border-transparent dark:lg:border-transparent lg:rounded-none'
: 'border-gray-700'} {plan.Popular ? 'border-indigo-500' : ''}"
{#each Plans[0].Features as feature, idx}
<p
class="{idx % 2
? 'text-gray-900 dark:text-gray-300'
: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-300'} h-12 px-4 flex items-center justify-start"
>
{#if plan.Popular}
<span
class="bg-indigo-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl uppercase"
>Popular</span
{#if feature.Header}
<span class="text-lg font-semibold {feature.ColorClass}"
>{feature.Name}</span
>
{:else}
{feature.Name}
{/if}
<div
class="px-2 text-center h-48 flex flex-col items-center justify-center"
</p>
{/each}
</div>
</div>
<div
class="flex lg:w-3/4 w-full flex-wrap lg:border border-gray-300 dark:border-gray-700 rounded-lg"
>
{#each Plans as plan, pidx}
<div
class="lg:w-1/4 lg:mt-px w-full mb-10 lg:mb-0 border-2 rounded-lg relative {pidx %
2
? 'border-gray-300 dark:border-gray-700 lg:border-transparent dark:lg:border-transparent lg:rounded-none'
: 'border-gray-300 dark:border-gray-700'} {plan.Popular
? 'border-indigo-500'
: ''}"
>
{#if plan.Popular}
<span
class="bg-indigo-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl uppercase"
>Popular</span
>
{/if}
<div
class="px-2 text-center h-48 flex flex-col items-center justify-center"
>
<h3 class="tracking-widest uppercase">{plan.Name}</h3>
<h2
class="text-5xl text-gray-600 dark:text-gray-100 font-medium leading-none mb-4 mt-2"
>
<h3 class="tracking-widest uppercase">{plan.Name}</h3>
<h2
class="text-5xl text-gray-600 dark:text-gray-100 font-medium leading-none mb-4 mt-2"
{#if plan.Price.Free}
Free
{:else}
{#if selectedPaymentPeriod === 'month'}${plan.Price
.Month}{:else}
${plan.Price.Year}{/if}
<span class="text-gray-600 dark:text-gray-300 text-base ml-1"
>{#if selectedPaymentPeriod === 'month'}/mo{:else}/yr{/if}</span
>
{/if}
</h2>
<span class="text-sm text-gray-600 dark:text-gray-300"
>{plan.Price.Subtext}</span
>
</div>
<div>
{#each plan.Features as feature, idx}
<p
class="{idx % 2
? 'text-gray-600 dark:text-gray-300'
: 'bg-gray-100 dark:bg-gray-800'} h-12 px-2 flex items-center justify-start text-center justify-center {idx ===
0
? '-mt-px border-t border-gray-300 dark:border-gray-700'
: ''}"
>
{#if plan.Price.Free}
Free
{:else}
{#if selectedPaymentPeriod === 'month'}${plan.Price
.Month}{:else}
${plan.Price.Year}{/if}
<span class="text-gray-600 dark:text-gray-300 text-base ml-1"
>{#if selectedPaymentPeriod === 'month'}/mo{:else}/yr{/if}</span
{#if feature.Header}
<span
class="text-lg font-semibold {feature.ColorClass} lg:hidden"
>{feature.Name}</span
>
{/if}
</h2>
<span class="text-sm text-gray-600 dark:text-gray-300"
>{plan.Price.Subtext}</span
>
</div>
<div>
{#each plan.Features as feature, idx}
<p
class="{idx % 2
? 'text-gray-600 dark:text-gray-300'
: 'bg-gray-100 dark:bg-gray-800'} h-12 px-2 flex items-center justify-start text-center justify-center {idx ===
0
? '-mt-px border-t border-gray-300 dark:border-gray-700'
: ''}"
>
{#if feature.Header}
<span
class="text-lg font-semibold {feature.ColorClass} lg:hidden"
>{feature.Name}</span
>
{:else}
{#if feature.Included}
<Checkmark />
{:else}
{#if feature.Included}
<Checkmark />
{:else}
<Crossmark />
{/if}
<span class="lg:hidden ml-2">{feature.Name}</span>
<Crossmark />
{/if}
</p>
{/each}
</div>
<div
class="border-t border-gray-300 dark:border-gray-700 p-6 text-center rounded-bl-lg"
>
{#if plan.Price.Free}
{#if $user.rank && $user.rank !== 'GUEST'}
<p class="text-lime-500 dark:text-lime-400 p-2 font-bold">
Already registered.
</p>
{:else}
<a
href="{appRoutes.register}/subscription"
class="flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded"
>Register
<ArrowRight />
</a>
<span class="lg:hidden ml-2">{feature.Name}</span>
{/if}
</p>
{/each}
</div>
<div
class="border-t border-gray-300 dark:border-gray-700 p-6 text-center rounded-bl-lg"
>
{#if plan.Price.Free}
{#if $user.rank && $user.rank !== 'GUEST'}
<p class="text-green-600 dark:text-lime-400 p-2 font-bold">
Already registered.
</p>
{:else}
<SubscribeButton
planEnabled="{plan.Enabled}"
subscribeLink="{selectedPaymentPeriod === 'month'
? plan.Subscribe.MonthLink
: plan.Subscribe.YearLink}"
/>
<a
href="{appRoutes.register}/subscription"
class="flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded"
>Register
<ArrowRight />
</a>
{/if}
</div>
{:else}
<SubscribeButton
planEnabled="{plan.Enabled}"
subscribeLink="{selectedPaymentPeriod === 'month'
? plan.Subscribe.MonthLink
: plan.Subscribe.YearLink}"
/>
{/if}
</div>
{/each}
</div>
</div>
{/each}
</div>
</section>
</PageLayout>
</div>
</section>

0 comments on commit 148a26c

Please sign in to comment.