Update question ui

src/components/Questions/QuestionCard.tsx

@@ -22,10 +22,10 @@ export function QuestionCard() {
 
     // if the user has scrolled down and the top of the answer is not
     // visible, scroll to the top of the answer
-    const questionTop = questionRef.current?.getBoundingClientRect().top || 0;
+    const questionTop = (questionRef.current?.getBoundingClientRect().top || 0) - 147;
     if (questionTop < 0) {
       window.scrollTo({
-        top: window.scrollY + questionTop - 100,
+        top: window.scrollY + questionTop - 10,
       });
     }
   }, [isAnswerVisible]);

src/components/Questions/QuestionsList.tsx

@@ -4,6 +4,7 @@ import { QuestionsProgress } from './QuestionsProgress';
 import { CheckCircle, SkipForward, Sparkles } from 'lucide-react';
 import { QuestionCard } from './QuestionCard';
 import { QuestionLoader } from './QuestionLoader';
+import { isLoggedIn } from '../../lib/jwt';
 
 type ConfettiPosition = {
   x: number;
@@ -14,6 +15,7 @@ type ConfettiPosition = {
 
 export function QuestionsList() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [givenAnswers, setGivenAnswers] = useState<string[]>([]);
   const [confettiPos, setConfettiPos] = useState<undefined | ConfettiPosition>(
     undefined
   );
@@ -22,7 +24,9 @@ export function QuestionsList() {
 
   return (
     <div className="mb-40 gap-3 text-center">
-      <QuestionsProgress />
+      <QuestionsProgress
+        showLoginAlert={!isLoggedIn() && givenAnswers.length !== 0}
+      />
 
       {confettiPos && (
         <ReactConfetti
@@ -66,6 +70,8 @@ export function QuestionsList() {
               w: alreadyKnowRect?.width || 0,
               h: alreadyKnowRect?.height || 0,
             });
+
+            setGivenAnswers((prev) => [...prev, 'alreadyKnow']);
           }}
           className="flex flex-1 items-center rounded-xl border border-gray-300 bg-white py-3 px-4 text-black transition-colors hover:border-black hover:bg-black hover:text-white"
         >

src/components/Questions/QuestionsProgress.tsx

@@ -1,15 +1,15 @@
-import {
-  Check,
-  CheckCircle,
-  Lightbulb,
-  PartyPopper,
-  RotateCcw,
-  Sparkles,
-} from 'lucide-react';
+import { CheckCircle, RotateCcw, Sparkles } from 'lucide-react';
+import { showLoginPopup } from '../../lib/popup';
+
+type QuestionsProgressProps = {
+  showLoginAlert?: boolean;
+};
+
+export function QuestionsProgress(props: QuestionsProgressProps) {
+  const { showLoginAlert } = props;
 
-export function QuestionsProgress() {
   return (
-    <div className="mb-5 rounded-lg border border-gray-300 bg-white p-6 overflow-hidden">
+    <div className="mb-5 overflow-hidden rounded-lg border border-gray-300 bg-white p-6">
       <div className="mb-3 flex items-center text-gray-600">
         <div className="relative w-full flex-1 rounded-xl bg-gray-200 p-1">
           <div className="absolute bottom-0 left-0 top-0 w-[30%] rounded-xl bg-slate-800"></div>
@@ -40,12 +40,19 @@ export function QuestionsProgress() {
         </button>
       </div>
 
-      <p className="-mx-6 mt-6 -mb-6 border-t bg-yellow-100 py-3 text-sm text-yellow-900">
-        You progress will not be saved. Please{' '}
-        <button className="underline-offset-3 font-medium underline">
-          login to save your progress.
-        </button>
-      </p>
+      {showLoginAlert && (
+        <p className="-mx-6 mt-6 -mb-6 border-t bg-yellow-100 py-3 text-sm text-yellow-900">
+          You progress is not saved. Please{' '}
+          <button
+            onClick={() => {
+              showLoginPopup();
+            }}
+            className="underline-offset-3 font-medium underline hover:text-black"
+          >
+            login to save your progress.
+          </button>
+        </p>
+      )}
     </div>
   );
 }