From 6504742de18a711ecb2d12d534d97898e2c79f50 Mon Sep 17 00:00:00 2001
From: Thomas Wang <thomas.wang@reddit.com>
Date: Fri, 2 May 2025 12:39:46 -0400
Subject: [PATCH 1/6] cursor

---
 .../classic-webview/src/components/PurchaseButton.tsx     | 8 ++++----
 .../src/components/UnlockHardcoreCTAContent.tsx           | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/classic-webview/src/components/PurchaseButton.tsx b/packages/classic-webview/src/components/PurchaseButton.tsx
index 3ac9202a..7ac87b6c 100644
--- a/packages/classic-webview/src/components/PurchaseButton.tsx
+++ b/packages/classic-webview/src/components/PurchaseButton.tsx
@@ -26,21 +26,21 @@ export const PurchaseButton: React.FC<PurchaseButtonProps> = (props) => {
     <button
       onClick={onClick}
       className={cn(
-        'flex w-full cursor-pointer flex-row items-center justify-between gap-4 whitespace-nowrap rounded-full border-2 border-current px-6 py-3 text-center font-sans font-semibold sm:w-auto',
+        'flex w-full min-w-0 cursor-pointer flex-row items-center justify-between rounded-full border-2 border-current px-3 py-3 text-center font-sans font-semibold sm:w-auto sm:px-6',
         style === 'primary' ? 'text-mustard-gold' : 'text-slate-gray'
       )}
     >
-      <span className="text-left text-base">{children}</span>
+      <span className="mr-2 truncate text-left text-base">{children}</span>
       <span
         className={cn(
-          'flex w-fit flex-row items-center gap-[6px] rounded-full px-3 py-2 text-xs',
+          'flex flex-none flex-row items-center gap-1 rounded-full px-2 py-2 text-xs sm:gap-[6px] sm:px-3',
           style === 'primary' ? 'bg-mustard-gold text-black' : 'bg-charcoal text-white'
         )}
       >
         <span className="flex h-4 w-4 items-center justify-center">
           <GoldIcon />
         </span>
-        Use {price}
+        <span className="whitespace-nowrap">Use {price}</span>
       </span>
     </button>
   );
diff --git a/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx b/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx
index 56870ded..c8c7e1a0 100644
--- a/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx
+++ b/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx
@@ -18,7 +18,7 @@ export const UnlockHardcoreCTAContent = ({
         Unlocking Hardcore grants access to today and all previous hardcore puzzles.
       </p>
       <hr className="h-px w-1/2 max-w-xs bg-white/20"></hr>
-      <div className="flex w-full flex-col items-center gap-4 py-2 sm:w-auto sm:flex-row sm:items-start">
+      <div className="flex w-full flex-col items-center gap-4 py-2 sm:flex-row sm:flex-wrap sm:justify-center">
         <PurchaseButton price={50} style="secondary" productSku="hardcore-mode-seven-day-access">
           Unlock for 7 days
         </PurchaseButton>

From 4bf9a978b08eb520844c6206db5937b9686da9e9 Mon Sep 17 00:00:00 2001
From: Thomas Wang <44534939+cytommi@users.noreply.github.com>
Date: Fri, 2 May 2025 13:31:30 -0400
Subject: [PATCH 2/6] Update
 packages/classic-webview/src/components/PurchaseButton.tsx

Co-authored-by: Diego Hernandez <5973294+diego-codes@users.noreply.github.com>
---
 packages/classic-webview/src/components/PurchaseButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/classic-webview/src/components/PurchaseButton.tsx b/packages/classic-webview/src/components/PurchaseButton.tsx
index 7ac87b6c..1011db67 100644
--- a/packages/classic-webview/src/components/PurchaseButton.tsx
+++ b/packages/classic-webview/src/components/PurchaseButton.tsx
@@ -26,7 +26,7 @@ export const PurchaseButton: React.FC<PurchaseButtonProps> = (props) => {
     <button
       onClick={onClick}
       className={cn(
-        'flex w-full min-w-0 cursor-pointer flex-row items-center justify-between rounded-full border-2 border-current px-3 py-3 text-center font-sans font-semibold sm:w-auto sm:px-6',
+        'flex w-full min-w-0 cursor-pointer flex-row items-center justify-between rounded-full border-2 border-current p-3 text-center font-sans font-semibold sm:w-auto sm:px-6',
         style === 'primary' ? 'text-mustard-gold' : 'text-slate-gray'
       )}
     >

From dbd3ee8da86ab5430b84a6728c0851dea6c6c9b7 Mon Sep 17 00:00:00 2001
From: Thomas Wang <44534939+cytommi@users.noreply.github.com>
Date: Fri, 2 May 2025 13:31:39 -0400
Subject: [PATCH 3/6] Update
 packages/classic-webview/src/components/PurchaseButton.tsx

Co-authored-by: Diego Hernandez <5973294+diego-codes@users.noreply.github.com>
---
 packages/classic-webview/src/components/PurchaseButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/classic-webview/src/components/PurchaseButton.tsx b/packages/classic-webview/src/components/PurchaseButton.tsx
index 1011db67..8a085063 100644
--- a/packages/classic-webview/src/components/PurchaseButton.tsx
+++ b/packages/classic-webview/src/components/PurchaseButton.tsx
@@ -30,7 +30,7 @@ export const PurchaseButton: React.FC<PurchaseButtonProps> = (props) => {
         style === 'primary' ? 'text-mustard-gold' : 'text-slate-gray'
       )}
     >
-      <span className="mr-2 truncate text-left text-base">{children}</span>
+      <span className="truncate text-left text-base">{children}</span>
       <span
         className={cn(
           'flex flex-none flex-row items-center gap-1 rounded-full px-2 py-2 text-xs sm:gap-[6px] sm:px-3',

From eb9073028d64be4cc5dabbc57c94b0dbd697fc1c Mon Sep 17 00:00:00 2001
From: Thomas Wang <44534939+cytommi@users.noreply.github.com>
Date: Fri, 2 May 2025 13:31:47 -0400
Subject: [PATCH 4/6] Update
 packages/classic-webview/src/components/PurchaseButton.tsx

Co-authored-by: Diego Hernandez <5973294+diego-codes@users.noreply.github.com>
---
 packages/classic-webview/src/components/PurchaseButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/classic-webview/src/components/PurchaseButton.tsx b/packages/classic-webview/src/components/PurchaseButton.tsx
index 8a085063..35f11d5e 100644
--- a/packages/classic-webview/src/components/PurchaseButton.tsx
+++ b/packages/classic-webview/src/components/PurchaseButton.tsx
@@ -33,7 +33,7 @@ export const PurchaseButton: React.FC<PurchaseButtonProps> = (props) => {
       <span className="truncate text-left text-base">{children}</span>
       <span
         className={cn(
-          'flex flex-none flex-row items-center gap-1 rounded-full px-2 py-2 text-xs sm:gap-[6px] sm:px-3',
+          'flex flex-none flex-row items-center gap-1 rounded-full p-2 text-xs sm:gap-[6px] sm:px-3',
           style === 'primary' ? 'bg-mustard-gold text-black' : 'bg-charcoal text-white'
         )}
       >

From 01fd96a65574df5d2557e79c5f923f26389cb19e Mon Sep 17 00:00:00 2001
From: Thomas Wang <thomas.wang@reddit.com>
Date: Fri, 2 May 2025 13:34:49 -0400
Subject: [PATCH 5/6] center text

---
 .../src/components/UnlockHardcoreCTAContent.tsx             | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx b/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx
index c8c7e1a0..7fa8a404 100644
--- a/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx
+++ b/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx
@@ -13,8 +13,10 @@ export const UnlockHardcoreCTAContent = ({
   return (
     <div className="flex w-full max-w-md flex-col items-center justify-center gap-4 p-6 sm:gap-6 sm:p-8 md:max-w-2xl md:p-10">
       {withLogo && <HardcoreLogo />}
-      <p className="text-xl font-bold text-white sm:text-2xl">100 guesses. No hints. No mercy.</p>
-      <p className="text-sm font-normal text-gray-300">
+      <p className="text-center text-xl font-bold text-white sm:text-2xl">
+        100 guesses. No hints. No mercy.
+      </p>
+      <p className="text-center text-sm font-normal text-gray-300">
         Unlocking Hardcore grants access to today and all previous hardcore puzzles.
       </p>
       <hr className="h-px w-1/2 max-w-xs bg-white/20"></hr>

From 4cbeb737f21c557fc4a2c9a30dec2d2b510d0ac5 Mon Sep 17 00:00:00 2001
From: Thomas Wang <thomas.wang@reddit.com>
Date: Fri, 2 May 2025 13:58:48 -0400
Subject: [PATCH 6/6] shortText

---
 .../src/components/PurchaseButton.tsx              |  8 +++++---
 .../src/components/UnlockHardcoreCTAContent.tsx    | 14 ++++++++++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/classic-webview/src/components/PurchaseButton.tsx b/packages/classic-webview/src/components/PurchaseButton.tsx
index 35f11d5e..dcd8c6a3 100644
--- a/packages/classic-webview/src/components/PurchaseButton.tsx
+++ b/packages/classic-webview/src/components/PurchaseButton.tsx
@@ -8,10 +8,11 @@ interface PurchaseButtonProps {
   style: 'primary' | 'secondary';
   price: number;
   productSku: 'hardcore-mode-lifetime-access' | 'hardcore-mode-seven-day-access';
+  shortText: string;
 }
 
 export const PurchaseButton: React.FC<PurchaseButtonProps> = (props) => {
-  const { children, price, productSku, style } = props;
+  const { children, price, productSku, style, shortText } = props;
 
   const onClick = () => {
     sendMessageToDevvit({
@@ -26,11 +27,12 @@ export const PurchaseButton: React.FC<PurchaseButtonProps> = (props) => {
     <button
       onClick={onClick}
       className={cn(
-        'flex w-full min-w-0 cursor-pointer flex-row items-center justify-between rounded-full border-2 border-current p-3 text-center font-sans font-semibold sm:w-auto sm:px-6',
+        'flex w-full min-w-0 cursor-pointer flex-row items-center justify-between gap-4 rounded-full border-2 border-current p-3 text-center font-sans font-semibold sm:w-auto sm:px-6',
         style === 'primary' ? 'text-mustard-gold' : 'text-slate-gray'
       )}
     >
-      <span className="truncate text-left text-base">{children}</span>
+      <span className="xs:block hidden truncate text-left text-base">{children}</span>
+      <span className="xs:hidden block text-left text-base">{shortText}</span>
       <span
         className={cn(
           'flex flex-none flex-row items-center gap-1 rounded-full p-2 text-xs sm:gap-[6px] sm:px-3',
diff --git a/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx b/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx
index 7fa8a404..98a17d62 100644
--- a/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx
+++ b/packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx
@@ -21,10 +21,20 @@ export const UnlockHardcoreCTAContent = ({
       </p>
       <hr className="h-px w-1/2 max-w-xs bg-white/20"></hr>
       <div className="flex w-full flex-col items-center gap-4 py-2 sm:flex-row sm:flex-wrap sm:justify-center">
-        <PurchaseButton price={50} style="secondary" productSku="hardcore-mode-seven-day-access">
+        <PurchaseButton
+          price={50}
+          style="secondary"
+          productSku="hardcore-mode-seven-day-access"
+          shortText="7 Days"
+        >
           Unlock for 7 days
         </PurchaseButton>
-        <PurchaseButton price={250} style="primary" productSku="hardcore-mode-lifetime-access">
+        <PurchaseButton
+          price={250}
+          style="primary"
+          productSku="hardcore-mode-lifetime-access"
+          shortText="FOREVER"
+        >
           Unlock FOREVER
         </PurchaseButton>
       </div>