From 1a5b6976c2d085a5abbd6cd8d17a2aa52c960cf3 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 1 Apr 2025 18:09:39 +0100
Subject: [PATCH] Wiggle animation on the course banner

---
 src/components/AuthenticationFlow/CourseLoginPopup.tsx | 2 +-
 src/components/SQLCourse/BuyButton.tsx                 | 7 ++++++-
 src/components/SQLCourse/CourseAnnouncement.tsx        | 5 ++++-
 tailwind.config.cjs                                    | 9 +++++++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/AuthenticationFlow/CourseLoginPopup.tsx b/src/components/AuthenticationFlow/CourseLoginPopup.tsx
index cc344ac82..5670c94fa 100644
--- a/src/components/AuthenticationFlow/CourseLoginPopup.tsx
+++ b/src/components/AuthenticationFlow/CourseLoginPopup.tsx
@@ -81,7 +81,7 @@ export function CourseLoginPopup(props: CourseLoginPopupProps) {
     <Modal onClose={onClose} bodyClassName="p-5 h-auto">
       <div className="mb-7 text-center">
         <p className="mb-3.5 pt-2 text-2xl font-semibold leading-5 text-slate-900">
-          Create or login to your account
+          Create or login to Enroll
         </p>
         <p className="mt-2 text-sm leading-4 text-slate-600">
           Login or sign up for an account to start learning
diff --git a/src/components/SQLCourse/BuyButton.tsx b/src/components/SQLCourse/BuyButton.tsx
index 2242d4ff8..e62be8d70 100644
--- a/src/components/SQLCourse/BuyButton.tsx
+++ b/src/components/SQLCourse/BuyButton.tsx
@@ -15,6 +15,7 @@ import { useToast } from '../../hooks/use-toast';
 import { httpPost } from '../../lib/query-http';
 import { deleteUrlParam, getUrlParams } from '../../lib/browser';
 import { VideoModal } from '../VideoModal';
+import { showLoginPopup } from '../../lib/popup';
 
 export const SQL_COURSE_SLUG = 'sql';
 
@@ -128,11 +129,15 @@ export function BuyButton(props: BuyButtonProps) {
   }, []);
 
   const isLoadingPricing =
-    isLoadingCourse || !coursePricing || isLoadingCourseProgress;
+    isLoadingCourse ||
+    !coursePricing ||
+    isLoadingCourseProgress ||
+    isCreatingCheckoutSession;
   const isAlreadyEnrolled = !!courseProgress?.enrolledAt;
 
   function initPurchase() {
     if (!isLoggedIn()) {
+      setIsLoginPopupOpen(true);
       return;
     }
 
diff --git a/src/components/SQLCourse/CourseAnnouncement.tsx b/src/components/SQLCourse/CourseAnnouncement.tsx
index 12a4a9d13..efec6b50c 100644
--- a/src/components/SQLCourse/CourseAnnouncement.tsx
+++ b/src/components/SQLCourse/CourseAnnouncement.tsx
@@ -26,7 +26,10 @@ export function CourseAnnouncement() {
             </span>
             <span className="block sm:hidden">Announcing our SQL course</span>
           </span>
-          <span className="items-center gap-1.5 rounded-full bg-black px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-white hover:bg-zinc-800 sm:px-3 sm:py-1">
+          <span className={cn(
+            "items-center gap-1.5 rounded-full bg-black px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-white hover:bg-zinc-800 sm:px-3 sm:py-1",
+            isVisible && "animate-wiggle [animation-delay:0.25s]"
+          )}>
             <span className="mr-1.5 hidden sm:inline">Start Learning</span>
             <span className="mr-1.5 inline sm:hidden">Visit</span>
             <span className="">→</span>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 14780c3ed..1b2966596 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -47,12 +47,21 @@ module.exports = {
             transform: "translate(-50%,-40%) scale(1)",
           },
         },
+        wiggle: {
+          '0%': { transform: 'rotate(-4deg)' },
+          '20%': { transform: 'rotate(4deg)' },
+          '40%': { transform: 'rotate(-3deg)' },
+          '60%': { transform: 'rotate(3deg)' },
+          '80%': { transform: 'rotate(-2deg)' },
+          '100%': { transform: 'rotate(0deg)' },
+        },
       },
       animation: {
         'fade-slide-up':
           'fade-slide-up 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards',
         'fade-in': 'fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards',
         spotlight: "spotlight 2s ease 0.25s 1 forwards",
+        wiggle: 'wiggle 0.5s ease-in-out forwards',
       },
     },
     container: {