From eec0acfd632e9e81f07ed96a38c043de6b8b8b1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20Falco=CC=81n?= <victoor89@gmail.com>
Date: Sat, 18 Jul 2026 08:13:58 +0200
Subject: [PATCH] Give the mobile paywall X a legible backing and dedup
 free-plan action

Review follow-up: the dismiss X floated as a bare ghost icon over the
paywall's colored cards, so it could read as low-contrast and easy to
miss. Wrap it in the same fixed top-corner treatment MobileBackButton
uses (44px target, rounded-full, subtle border/background/shadow,
backdrop-blur) for legibility and to match the existing convention.
Also extract the shared continue-for-free handler and reveal classes now
used by both the mobile X and the desktop button.
---
 resources/js/pages/subscription/paywall.tsx | 31 +++++++++++----------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/resources/js/pages/subscription/paywall.tsx b/resources/js/pages/subscription/paywall.tsx
index 35ce50e6..92effc54 100644
--- a/resources/js/pages/subscription/paywall.tsx
+++ b/resources/js/pages/subscription/paywall.tsx
@@ -383,23 +383,28 @@ function PricingSection({
         return () => clearTimeout(timer);
     }, [canUseFreePlan]);
 
+    const continueForFree = () => router.visit(dashboard().url);
+    const freeRevealClasses = freeButtonVisible
+        ? 'opacity-100'
+        : 'pointer-events-none opacity-0';
+
     return (
         <div className="flex flex-col gap-4">
             {canUseFreePlan && (
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    aria-label={__('Continue for free')}
-                    onClick={() => router.visit(dashboard().url)}
+                <div
                     className={cn(
                         'fixed top-4 right-4 z-50 transition-opacity duration-1000 md:hidden',
-                        freeButtonVisible
-                            ? 'opacity-100'
-                            : 'pointer-events-none opacity-0',
+                        freeRevealClasses,
                     )}
                 >
-                    <XIcon className="size-5" />
-                </Button>
+                    <button
+                        onClick={continueForFree}
+                        aria-label={__('Continue for free')}
+                        className="flex size-11 items-center justify-center rounded-full border border-border/75 bg-sidebar/50 text-primary shadow-lg shadow-black/20 backdrop-blur transition-all duration-200 hover:bg-sidebar/80 active:scale-95"
+                    >
+                        <XIcon className="size-5" />
+                    </button>
+                </div>
             )}
 
             {selectedPlanData && (
@@ -458,15 +463,13 @@ function PricingSection({
                 <div
                     className={cn(
                         'hidden transition-opacity duration-1000 md:block',
-                        freeButtonVisible
-                            ? 'opacity-100'
-                            : 'pointer-events-none opacity-0',
+                        freeRevealClasses,
                     )}
                 >
                     <Button
                         variant="ghost"
                         className="w-full"
-                        onClick={() => router.visit(dashboard().url)}
+                        onClick={continueForFree}
                     >
                         {__('Continue for free')}
                     </Button>