refactor: use libui card, adjust padding and text

Author: david-roper

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import { Heading } from '@douglasneuroinformatics/libui/components';
+import { Card, Heading } from '@douglasneuroinformatics/libui/components';
 import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import type { FormTypes } from '@opendatacapture/runtime-core';
 import { createFileRoute, useLocation } from '@tanstack/react-router';
@@ -66,17 +66,17 @@ const RouteComponent = () => {
           >
             <div className="flex grow items-center justify-center">
               {currentSession !== null && (
-                <div className="mx-auto block max-w-3xl rounded-lg border border-gray-200 bg-white p-8 text-green-600 opacity-70 shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:text-green-300">
-                  <div className="flex flex-col items-center justify-center gap-y-12">
+                <Card className="mx-auto block max-w-3xl border p-12 text-green-600 opacity-70 dark:text-green-300">
+                  <div className="flex flex-col items-center justify-center gap-y-10">
                     <CheckCircle className="!size-20" />
-                    <p className="max-w-2xl text-center text-xl">
+                    <p className="max-w-2xl text-center text-lg font-medium">
                       {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>
+                </Card>
               )}
             </div>
           </motion.div>