feat: animate card with animate presence, add check icon

Author: david-roper

apps/web/src/routes/_app/session/start-session.tsx

@@ -2,8 +2,10 @@ import React, { useEffect, useState } from 'react';
 
 import { Heading } from '@douglasneuroinformatics/libui/components';
 import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import { CheckCircle } from 'lucide-react';
 import type { FormTypes } from '@opendatacapture/runtime-core';
 import { createFileRoute, useLocation } from '@tanstack/react-router';
+import { AnimatePresence, motion } from 'motion/react';
 
 import { PageHeader } from '@/components/PageHeader';
 import { StartSessionForm } from '@/components/StartSessionForm';
@@ -41,30 +43,44 @@ const RouteComponent = () => {
           {t('startSession')}
         </Heading>
       </PageHeader>
-      <div className="space-y-4">
-        {currentSession == null && (
-          <StartSessionForm
-            currentGroup={currentGroup}
-            initialValues={initialValues}
-            readOnly={currentSession !== null || createSessionMutation.isPending}
-            username={currentUser?.username}
-            onSubmit={async (formData) => {
-              const session = await createSessionMutation.mutateAsync(formData);
-              startSession({ ...session, type: formData.type });
-            }}
-          />
-        )}
+      {currentSession == null && (
+        <StartSessionForm
+          currentGroup={currentGroup}
+          initialValues={initialValues}
+          readOnly={currentSession !== null || createSessionMutation.isPending}
+          username={currentUser?.username}
+          onSubmit={async (formData) => {
+            const session = await createSessionMutation.mutateAsync(formData);
+            startSession({ ...session, type: formData.type });
+          }}
+        />
+      )}
+      <AnimatePresence>
         {currentSession !== null && (
-          <div className="mx-auto block max-h-fit max-w-3xl rounded-lg border border-gray-200 bg-white p-6 opacity-70 shadow-sm dark:border-gray-700 dark:bg-gray-800">
-            <p className="max-w-4xl text-center text-yellow-600 dark:text-yellow-300">
-              {t({
-                en: 'The current session must be ended before starting the form again.',
-                fr: 'La session en cours doit être terminée avant de recommencer le formulaire.'
-              })}
-            </p>
-          </div>
+          <motion.div
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0 }}
+            initial={{ opacity: 0, scale: 0 }}
+            key="modal"
+          >
+            <div className="flex h-screen items-center justify-center">
+              {currentSession !== null && (
+                <div className="center mx-auto block max-w-3xl rounded-lg border border-gray-200 bg-white p-4 opacity-70 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                  <p className="flex max-w-4xl gap-x-3 text-center text-green-600 dark:text-green-300">
+                    <span>
+                      <CheckCircle />{' '}
+                    </span>
+                    {t({
+                      en: 'The current session must be ended before starting the form again.',
+                      fr: 'La session en cours doit être terminée avant de recommencer le formulaire.'
+                    })}
+                  </p>
+                </div>
+              )}
+            </div>
+          </motion.div>
         )}
-      </div>
+      </AnimatePresence>
     </React.Fragment>
   );
 };