From d07c2342acaf62c6b4d5e9e754e9f2edd88426dc Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:47:50 +0530
Subject: [PATCH] style: updated the UI of the pro plan modal (#70)

---
 web/components/license/pro-plan-modal.tsx | 39 +++++++++++------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/web/components/license/pro-plan-modal.tsx b/web/components/license/pro-plan-modal.tsx
index ca57182230..d484981828 100644
--- a/web/components/license/pro-plan-modal.tsx
+++ b/web/components/license/pro-plan-modal.tsx
@@ -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