Added limits to the number of projects in an org

frontend/src/components/billing/Plan.tsx

@@ -20,8 +20,8 @@ interface Props {
 export default function Plan({ plan }: Props) {
   return (
     <div
-      className={`relative flex flex-col justify-between border-2 min-w-fit w-96 rounded-lg h-68 mr-4 bg-mineshaft-800 ${
-        plan.name !== 'Starter' && plan.current === true ? 'border-primary' : 'border-chicago-700'
+      className={`relative flex flex-col justify-between border min-w-fit w-96 rounded-lg h-68 mr-4 bg-mineshaft-800 ${
+        plan.name !== 'Starter' && plan.current === true ? 'border-2 border-primary' : 'border-mineshaft-600'
       }
 			`}
     >
@@ -41,13 +41,13 @@ export default function Plan({ plan }: Props) {
           <>
             {plan.buttonTextMain === 'Schedule a Demo' ? (
               <a href="/scheduledemo" target='_blank rel="noopener"'>
-                <div className="relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 hover:text-black hover:border-primary text-gray-400 font-semibold hover:bg-primary bg-bunker duration-200 cursor-pointer rounded-md flex w-max">
+                <div className="relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-mineshaft-600 hover:text-black hover:border-primary text-gray-400 font-semibold hover:bg-primary bg-bunker duration-200 cursor-pointer rounded-md flex w-max">
                   {plan.buttonTextMain}
                 </div>
               </a>
             ) : (
               <div
-                className={`relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 text-gray-400 font-semibold ${
+                className={`relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-mineshaft-600 text-gray-400 font-semibold ${
                   plan.buttonTextMain === 'Downgrade'
                     ? 'hover:bg-red hover:text-white hover:border-red'
                     : 'hover:bg-primary hover:text-black hover:border-primary'
@@ -74,7 +74,7 @@ export default function Plan({ plan }: Props) {
         ) : (
           <div
             className={`h-8 w-full rounded-b-md flex justify-center items-center z-10 ${
-              plan.name !== 'Starter' && plan.current === true ? 'bg-primary' : 'bg-chicago-700'
+              plan.name !== 'Starter' && plan.current === true ? 'bg-primary' : 'bg-mineshaft-400'
             }`}
           >
             <p className="text-xs text-black font-semibold">CURRENT PLAN</p>

frontend/src/components/v2/Button/Button.tsx

@@ -16,7 +16,7 @@ const buttonVariants = cva(
     'button',
     'transition-all',
     'font-inter font-medium',
-    'cursor-pointer',
+    'cursor-default',
     'inline-flex items-center justify-center',
     'relative',
     'whitespace-nowrap'
@@ -24,7 +24,7 @@ const buttonVariants = cva(
   {
     variants: {
       colorSchema: {
-        primary: ['bg-primary', 'text-black', 'border-primary bg-opacity-80 hover:bg-opacity-100'],
+        primary: ['bg-primary', 'text-black', 'border-primary bg-opacity-90 hover:bg-opacity-100'],
         secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
         danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90'],
         gray: ['bg-bunker-500', 'text-bunker-200']
@@ -40,7 +40,7 @@ const buttonVariants = cva(
       },
       isDisabled: {
         true: 'bg-mineshaft-700 border border-mineshaft-600 text-white opacity-50 cursor-not-allowed',
-        false: 'border border-primary-400'
+        false: 'border'
       },
       isFullWidth: {
         true: 'w-full',
@@ -111,7 +111,7 @@ const buttonVariants = cva(
       {
         colorSchema: 'secondary',
         variant: 'plain',
-        className: 'text-mineshaft-300'
+        className: 'text-mineshaft-300 hover:text-mineshaft-200 border-none'
       },
       {
         colorSchema: 'danger',

frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx

@@ -18,7 +18,7 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
           href={`/settings/billing/${localStorage.getItem('projectData.id') as string}`}
           key="upgrade-plan"
         >
-          <Button className="mr-4">Upgrade Plan</Button>
+          <Button className="mr-4 ml-2">Upgrade Plan</Button>
         </Link>,
         <ModalClose asChild key="upgrade-plan-cancel">
           <Button colorSchema="secondary" variant="plain">
@@ -27,8 +27,8 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
         </ModalClose>
       ]}
     >
-      <p className="mb-4 text-bunker-300">{text}</p>
-      <p className="font-medium text-bunker-300">
+      <p className="mb-2 text-bunker-300">{text}</p>
+      <p className="text-bunker-300">
         Upgrade and get access to this, as well as to other powerful enhancements.
       </p>
     </ModalContent>