Merge pull request #1979 from codecrafters-io/update-upgrade-prompt

Update upgrade prompt to use container queries

app/components/course-page/course-stage-step/upgrade-prompt.hbs

@@ -1,17 +1,16 @@
 <div
-  class="py-6 px-5 rounded bg-teal-50 border border-teal-600"
+  class="py-6 px-5 rounded bg-teal-50 border border-teal-600 @container"
   {{did-insert this.handleDidInsert}}
-  {{did-resize this.onResize}}
   data-test-upgrade-prompt
   ...attributes
 >
-  <div class="flex justify-between {{if this.isLarge 'flex-row items-center' 'flex-col'}} gap-4">
+  <div class="flex justify-between flex-col @[640px]:flex-row @[640px]:items-center gap-6">
     <div>
-      <div class="font-bold text-slate-600 {{if this.isLarge 'text-2xl' 'text-xl'}}">
+      <div class="font-bold text-slate-600 text-xl @[640px]:text-2xl">
         This stage requires a CodeCrafters Membership.
       </div>
 
-      <div class="prose prose-compact py-3 {{if this.isLarge '' 'prose-sm'}}" data-test-upgrade-prompt-secondary-copy>
+      <div class="prose prose-compact prose-sm @[640px]:prose-base py-3" data-test-upgrade-prompt-secondary-copy>
         {{#if this.isLoadingRegionalDiscount}}
           <p>
             Plans start at $40/mo.
@@ -27,7 +26,7 @@
         </p>
       </div>
 
-      <PrimaryButton class="{{if this.isLarge 'w-fit' 'w-full'}}">
+      <PrimaryButton class="w-full @[640px]:w-fit">
         <LinkTo @route="pay">
           View Membership Plans →
         </LinkTo>

app/components/course-page/course-stage-step/upgrade-prompt.ts

@@ -15,7 +15,6 @@ export default class UpgradePromptComponent extends Component<Signature> {
   @service declare authenticator: AuthenticatorService;
   @service declare store: Store;
 
-  @tracked isLarge: boolean = false;
   @tracked isLoadingRegionalDiscount: boolean = true;
   @tracked regionalDiscount: RegionalDiscountModel | null = null;
 
@@ -50,19 +49,6 @@ export default class UpgradePromptComponent extends Component<Signature> {
     this.regionalDiscount = await this.store.createRecord('regional-discount').fetchCurrent();
     this.isLoadingRegionalDiscount = false;
   }
-
-  @action
-  onResize(entry: ResizeObserverEntry): void {
-    if (!entry.borderBoxSize?.[0]?.inlineSize) {
-      return;
-    }
-
-    if (entry.borderBoxSize[0].inlineSize > 680) {
-      this.isLarge = true;
-    } else {
-      this.isLarge = false;
-    }
-  }
 }
 
 declare module '@glint/environment-ember-loose/registry' {

package.json

@@ -197,6 +197,7 @@
   "dependencies": {
     "@rails/actioncable": "^7.1.3",
     "@stripe/stripe-js": "^4.1.0",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.13",
     "@typeform/embed": "^4.10.2",
     "@vimeo/player": "^2.23.0",

tailwind.config.js

@@ -233,5 +233,5 @@ module.exports = {
       width: ['group-hover'],
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/container-queries')],
 };