From eb728869ebe95e0ca7834eaf6c4d060353dec96c Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Sat, 23 Nov 2024 00:21:17 +0000
Subject: [PATCH] Update Free plan button copy and styles in onboarding plan
 selection screen (#5500)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new component called `TextDivider` and integrates it into the `OnboardingChoosePlan` component. It also makes adjustments to the layout and button styles within `OnboardingChoosePlan`.

### Detailed summary
- Added `TextDivider` component in `TextDivider.tsx` for displaying a horizontal divider with text.
- Updated `OnboardingChoosePlan` to include `TextDivider` with the text "OR".
- Changed the grid gap from `md:gap-4` to `md:gap-5`.
- Replaced the previous button with a new styled button in `OnboardingChoosePlan`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../src/@/components/TextDivider.tsx          | 19 +++++++++++++
 .../src/app/login/onboarding/ChoosePlan.tsx   | 27 ++++++++++---------
 2 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 apps/dashboard/src/@/components/TextDivider.tsx

diff --git a/apps/dashboard/src/@/components/TextDivider.tsx b/apps/dashboard/src/@/components/TextDivider.tsx
new file mode 100644
index 00000000000..7a0730f23fa
--- /dev/null
+++ b/apps/dashboard/src/@/components/TextDivider.tsx
@@ -0,0 +1,19 @@
+import { cn } from "@/lib/utils";
+
+export function TextDivider(props: {
+  text: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center text-muted-foreground text-sm",
+        props.className,
+      )}
+    >
+      <span className="h-[1px] flex-1 bg-border" />
+      <span className="mx-4">{props.text}</span>
+      <span className="h-[1px] flex-1 bg-border" />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx b/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx
index d32c12fd4d6..82e00dbc8b1 100644
--- a/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx
+++ b/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { TextDivider } from "@/components/TextDivider";
 import { PricingCard } from "@/components/blocks/pricing-card";
 import { Button } from "@/components/ui/button";
-import { ArrowRightIcon } from "lucide-react";
 import { TitleAndDescription } from "./Title";
 
 export function OnboardingChoosePlan(props: {
@@ -20,7 +20,7 @@ export function OnboardingChoosePlan(props: {
 
       <div className="h-4" />
 
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-4">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-5">
         <PricingCard
           billingPlan="starter"
           teamSlug={props.teamSlug}
@@ -51,17 +51,20 @@ export function OnboardingChoosePlan(props: {
         />
       </div>
 
-      <div className="h-4" />
+      <TextDivider text="OR" className="my-4" />
 
-      <div className="flex justify-center">
-        <Button
-          variant="link"
-          onClick={props.skipPlan}
-          className="inline-flex translate-x-2 items-center gap-2 text-muted-foreground"
-        >
-          Continue with Free Plan <ArrowRightIcon className="size-4" />
-        </Button>
-      </div>
+      <Button
+        variant="outline"
+        onClick={props.skipPlan}
+        className="relative h-auto w-full items-center gap-2 rounded-xl bg-muted/50 py-2.5"
+      >
+        <span className="flex flex-col gap-0.5">
+          <span className="text-base text-foreground">Skip for now</span>
+          <span className="text-muted-foreground text-sm">
+            You will have limited access to services
+          </span>
+        </span>
+      </Button>
     </div>
   );
 }