feat: update TODO and enhance design token integration

- Marked hydration issues and design system tasks as complete in TODO.md, reflecting progress on theme optimization.
- Added documentation for CSS variables in globals.css to guide future color modifications using design tokens.
- Refactored QuickActions component to utilize StatusMessage for better message display and applied design tokens for button styles, improving UI consistency.

src/components/settings/index/QuickActions.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { Card, CardContent } from '@/components/ui/Card';
+import { StatusMessage } from '@/components/ui/StatusMessage';
+import { useDesignTokens } from '@/hooks/useDesignTokens';
 
 interface Message {
   type: 'success' | 'error';
@@ -27,6 +29,7 @@ export function QuickActions({
   jiraEnabled,
   messages 
 }: QuickActionsProps) {
+  const { styles } = useDesignTokens();
   return (
     <div className="mt-8">
       <h2 className="text-xl font-semibold text-[var(--foreground)] mb-4">
@@ -43,17 +46,18 @@ export function QuickActions({
                   Créer une sauvegarde des données
                 </p>
                 {messages.backup && (
-                  <p className="text-xs mt-1" style={{ 
-                    color: messages.backup.type === 'success' ? 'var(--success)' : 'var(--destructive)' 
-                  }}>
-                    {messages.backup.text}
-                  </p>
+                  <div className="mt-2">
+                    <StatusMessage type={messages.backup.type}>
+                      {messages.backup.text}
+                    </StatusMessage>
+                  </div>
                 )}
               </div>
               <button 
                 onClick={onCreateBackup}
                 disabled={isBackupLoading}
-                className="px-3 py-1.5 bg-[var(--primary)] text-[var(--primary-foreground)] rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                className="px-3 py-1.5 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                style={styles.primaryButton}
               >
                 {isBackupLoading ? 'En cours...' : 'Sauvegarder'}
               </button>
@@ -70,17 +74,18 @@ export function QuickActions({
                   Tester la connexion Jira
                 </p>
                 {messages.jira && (
-                  <p className="text-xs mt-1" style={{ 
-                    color: messages.jira.type === 'success' ? 'var(--success)' : 'var(--destructive)' 
-                  }}>
-                    {messages.jira.text}
-                  </p>
+                  <div className="mt-2">
+                    <StatusMessage type={messages.jira.type}>
+                      {messages.jira.text}
+                    </StatusMessage>
+                  </div>
                 )}
               </div>
               <button 
                 onClick={onTestJira}
                 disabled={!jiraEnabled || isJiraTestLoading}
-                className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                className="px-3 py-1.5 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                style={styles.input}
               >
                 {isJiraTestLoading ? 'Test...' : 'Tester'}
               </button>