From 0441b6ad129754761de325cbca49af60f1dda523 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Tue, 5 Aug 2025 02:01:03 +0100
Subject: [PATCH] style: reorder Tailwind CSS classes in PricingSection
 component and add prettierignore file

---
 .prettierignore                               |  7 +++
 .../components/PricingSection.svelte          | 43 ++++++++++---------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index e69de29b..b1e781fd 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,7 @@
+.svelte-kit
+build
+.github
+.turbo
+_template
+supabase
+static
\ No newline at end of file
diff --git a/apps/dashboard/src/lib/components/CourseLandingPage/components/PricingSection.svelte b/apps/dashboard/src/lib/components/CourseLandingPage/components/PricingSection.svelte
index 14a650ef..61a3d853 100644
--- a/apps/dashboard/src/lib/components/CourseLandingPage/components/PricingSection.svelte
+++ b/apps/dashboard/src/lib/components/CourseLandingPage/components/PricingSection.svelte
@@ -78,27 +78,27 @@
 <!-- Pricing Details -->
 {#if mobile}
   <div
-    class="sticky w-full flex items-center justify-center transition duration-300 h-fit bottom-0 lg:hidden bg-gray-50 dark:bg-neutral-800"
+    class="sticky bottom-0 flex h-fit w-full items-center justify-center bg-gray-50 transition duration-300 lg:hidden dark:bg-neutral-800"
   >
     <aside
       class="price-container sticky lg:hidden {editMode
         ? 'lg:bottom-2'
-        : 'lg:top-10'} lg:shadow-2xl lg:rounded-lg m-h-fit bg-gray-50 dark:bg-neutral-800 z-0 {className}"
+        : 'lg:top-10'} m-h-fit z-0 bg-gray-50 lg:rounded-lg lg:shadow-2xl dark:bg-neutral-800 {className}"
     >
       <div class="flex items-center justify-center gap-3 px-3 py-3">
         <!-- Pricing -->
         <div class=" text-center">
           {#if courseData?.metadata?.allowNewStudent}
-            <p class="dark:text-white font-medium text-sm flex items-center gap-1">
+            <p class="flex items-center gap-1 text-sm font-medium dark:text-white">
               {formatter?.format(calculatedCost) || calculatedCost}
               {#if isFree}
-                <span class="text-xs"
-                  >({$t('course.navItem.landing_page.pricing_section.free')})</span
-                >
+                <span class="text-xs">
+                  ({$t('course.navItem.landing_page.pricing_section.free')})
+                </span>
               {/if}
             </p>
             {#if courseData?.metadata?.showDiscount}
-              <p class="dark:text-white font-light text-sm text-gray-500">
+              <p class="text-sm font-light text-gray-500 dark:text-white">
                 {discount}% {$t('course.navItem.landing_page.pricing_section.discount')}.
                 <span class="line-through">
                   {formatter?.format(courseData?.cost || 0) || courseData.cost}
@@ -106,14 +106,14 @@
               </p>
             {/if}
           {:else}
-            <p class="dark:text-white text-lg">
+            <p class="text-lg dark:text-white">
               {$t('course.navItem.landing_page.pricing_section.not_accepting')}
             </p>
           {/if}
         </div>
 
         <!-- Call To Action Buttons -->
-        <div class="flex flex-col w-full h-full items-center">
+        <div class="flex h-full w-full flex-col items-center">
           <PrimaryButton
             label={isFree
               ? $t('course.navItem.landing_page.pricing_section.enroll')
@@ -130,36 +130,37 @@
   <aside
     class="price-container lg:sticky {editMode
       ? 'lg:top-0'
-      : 'lg:top-10'} lg:shadow-2xl lg:rounded-lg m-h-fit dark:bg-neutral-800 {className}"
+      : 'lg:top-10'} m-h-fit lg:rounded-lg lg:shadow-2xl dark:bg-neutral-800 {className}"
   >
     <div class="p-2 lg:p-10">
       <!-- Pricing -->
       <div class="mb-6">
         {#if courseData?.metadata?.allowNewStudent}
-          <p class="dark:text-white font-medium text-lg">
+          <p class="text-lg font-medium dark:text-white">
             {formatter?.format(calculatedCost) || calculatedCost}
             {#if isFree}
-              <span class="text-sm">({$t('course.navItem.landing_page.pricing_section.free')})</span
-              >
+              <span class="text-sm">
+                ({$t('course.navItem.landing_page.pricing_section.free')})
+              </span>
             {/if}
           </p>
           {#if courseData?.metadata?.showDiscount}
-            <p class="dark:text-white font-light text-sm text-gray-500">
+            <p class="text-sm font-light text-gray-500 dark:text-white">
               {discount}% {$t('course.navItem.landing_page.pricing_section.discount')}.
-              <span class="line-through"
-                >{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
-              >
+              <span class="line-through">
+                {formatter?.format(courseData?.cost || 0) || courseData.cost}
+              </span>
             </p>
           {/if}
         {:else}
-          <p class="dark:text-white text-lg">
+          <p class="text-lg dark:text-white">
             {$t('course.navItem.landing_page.pricing_section.not_accepting')}
           </p>
         {/if}
       </div>
 
       <!-- Call To Action Buttons -->
-      <div class="flex flex-col w-full items-center">
+      <div class="flex w-full flex-col items-center">
         <PrimaryButton
           label={isFree
             ? $t('course.navItem.landing_page.pricing_section.enroll')
@@ -169,7 +170,7 @@
           isDisabled={!courseData.metadata.allowNewStudent}
         />
         {#if courseData?.metadata?.showDiscount && courseData.metadata.allowNewStudent}
-          <p class="dark:text-white font-light text-sm text-gray-500">
+          <p class="text-sm font-light text-gray-500 dark:text-white">
             {$t('course.navItem.landing_page.pricing_section.bird')}
           </p>
         {/if}
@@ -178,7 +179,7 @@
 
     <!-- Gift Container -->
     {#if courseData?.metadata?.reward?.show}
-      <div class="p-10 flex items-center flex-col border-t border-b border-gray-300">
+      <div class="flex flex-col items-center border-b border-t border-gray-300 p-10">
         <HtmlRender content={get(courseData, 'metadata.reward.description', '')} />
       </div>
     {/if}