Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-09-03 12:50:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #72 from makeplane/preview

Browse Source 
release: Pricing modal styling for dark mode
This commit is contained in:
sriram veeraghanta
2024-01-10 15:52:59 +05:30
committed by GitHub
parent deba0ab5d6 7ab3f7e550
commit dae6e247bc
1 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/components/license/pro-plan-modal.tsx
View File

@@ -67,7 +67,7 @@ export const ProPlanModal: FC<ProPlanModalProps> = (props) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black/25" />
<div className="fixed inset-0 bg-custom-backdrop" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
@@ -81,31 +81,28 @@ export const ProPlanModal: FC<ProPlanModalProps> = (props) => {
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title
as="h2"
className="text-2xl font-bold leading-6 text-gray-900 mt-4 flex justify-center items-center"
>
<Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded-2xl bg-custom-background-100 p-6 text-left align-middle shadow-xl transition-all border-[0.5px] border-custom-border-100">
<Dialog.Title as="h2" className="text-2xl font-bold leading-6 mt-4 flex justify-center items-center">
Early-adopter pricing for believers
</Dialog.Title>
<div className="mt-2 mb-5">
<p className="text-center text-sm mb-6 px-10">
<p className="text-center text-sm mb-6 px-10 text-custom-text-200">
Build Plane to your specs. You decide what we prioritize and build for everyone. Also get tailored
onboarding + implementation and priority support.
</p>
<Tab.Group>
<div className="flex w-full justify-center">
<Tab.List className="flex space-x-1 rounded-xl bg-slate-100 p-1 w-[72%]">
<Tab.List className="flex space-x-1 rounded-xl bg-custom-background-80 p-1 w-[72%]">
{PRICING_CATEGORIES.map((category, index) => (
<Tab
key={category}
className={({ selected }) =>
classNames(
"w-full rounded-lg py-2 text-sm font-medium leading-5 text-slate-800",
"ring-white/60 ring-offset-2 ring-offset-blue-400 focus:outline-none",
"w-full rounded-lg py-2 text-sm font-medium leading-5",
"ring-white/60 ring-offset-2 ring-offset-custom-primary-90 focus:outline-none",
selected
? "bg-white text-blue-700 shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-slate-600"
? "bg-custom-background-100 text-custom-primary-100 shadow"
: "hover:bg-custom-background-80 text-custom-text-300 hover:text-custom-text-100"
)
}
onClick={() => setTabIndex(index)}
@@ -113,7 +110,7 @@ export const ProPlanModal: FC<ProPlanModalProps> = (props) => {
<>
{category}
{category === "Yearly" && (
<span className=" bg-blue-500 text-white rounded-full px-2 py-1 ml-1 text-xs">
<span className="bg-custom-primary-100 text-white rounded-full px-2 py-1 ml-1 text-xs">
-28%
</span>
)}
@@ -124,16 +121,16 @@ export const ProPlanModal: FC<ProPlanModalProps> = (props) => {
</div>
<Tab.Panels className="mt-2">
<Tab.Panel className={classNames("rounded-xl bg-white p-3")}>
<Tab.Panel className={classNames("rounded-xl bg-custom-background-100 p-3")}>
<p className="ml-4 text-4xl font-bold mb-2">
$7
<span className="text-sm ml-3 text-slate-600">/user/month</span>
<span className="text-sm ml-3 text-custom-text-300">/user/month</span>
</p>
<ul>
{MONTHLY_PLAN_ITEMS.map((item) => (
<li key={item} className="relative rounded-md p-3 flex">
<p className="text-sm font-medium leading-5 flex items-center">
<CheckCircle height="16px" className="mr-4" />
<CheckCircle className="h-4 w-4 mr-4" />
<span>{item}</span>
</p>
</li>
@@ -144,7 +141,7 @@ export const ProPlanModal: FC<ProPlanModalProps> = (props) => {
<div className="absolute transition-all duration-1000 opacity-50 -inset-px bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt" />
<button
type="button"
className="relative inline-flex items-center justify-center px-8 py-4 text-sm font-medium text-slate-900 border-slate-200 border-[1.5px] transition-all duration-200 bg-white rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
className="relative inline-flex items-center justify-center px-8 py-4 text-sm font-medium border-custom-border-100 border-[1.5px] transition-all duration-200 bg-custom-background-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom-border-200"
onClick={handleProPlaneMonthRedirection}
>
Become Early Adopter
@@ -152,16 +149,16 @@ export const ProPlanModal: FC<ProPlanModalProps> = (props) => {
</div>
</div>
</Tab.Panel>
<Tab.Panel className={classNames("rounded-xl bg-white p-3")}>
<Tab.Panel className={classNames("rounded-xl bg-custom-background-100 p-3")}>
<p className="ml-4 text-4xl font-bold mb-2">
$5
<span className="text-sm ml-3 text-slate-600">/user/month</span>
<span className="text-sm ml-3 text-custom-text-300">/user/month</span>
</p>
<ul>
{YEARLY_PLAN_ITEMS.map((item) => (
<li key={item} className="relative rounded-md p-3 flex">
<p className="text-sm font-medium leading-5 flex items-center">
<CheckCircle height="16px" className="mr-4" />
<CheckCircle className="h-4 w-4 mr-4" />
<span>{item}</span>
</p>
</li>
@@ -172,7 +169,7 @@ export const ProPlanModal: FC<ProPlanModalProps> = (props) => {
<div className="absolute transition-all duration-1000 opacity-50 -inset-px bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt" />
<button
type="button"
className="relative inline-flex items-center justify-center px-8 py-4 text-sm font-medium text-slate-900 border-slate-600 transition-all duration-200 bg-white rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
className="relative inline-flex items-center justify-center px-8 py-4 text-sm font-medium border-custom-border-100 border-[1.5px] transition-all duration-200 bg-custom-background-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom-border-200"
onClick={handleProPlanYearlyRedirection}
>
Become Early Adopter