Update Free plan button copy and styles in onboarding plan selection screen

Author: MananTank

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>
+  );
+}

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>
   );
 }