Fix hardcore purchase button responsive design (#71)

Author: cytommi

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,21 +27,22 @@ 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 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="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 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 p-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>
   );

packages/classic-webview/src/components/UnlockHardcoreCTAContent.tsx

@@ -13,14 +13,28 @@ 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">Get access to expert-level puzzles</p>
+      <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>
-      <div className="flex w-full flex-col items-center gap-4 py-2 sm:w-auto sm:flex-row sm:items-start">
-        <PurchaseButton price={50} style="secondary" productSku="hardcore-mode-seven-day-access">
+      <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"
+          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>