fix(ui): thème, textes et lisibilité restants de la revue

Les boutons suivent la couleur d’apparence, les libellés trop petits ou trop techniques sont clarifiés, et le catalogue des fournisseurs se met à jour tout seul.

Co-authored-by: Cursor <cursoragent@cursor.com>

memento-note/components/mcp/mcp-settings-panel.tsx

@@ -131,18 +131,18 @@ export function McpSettingsPanel({
             <Info size={18} />
           </div>
           <div>
-            <h4 className="text-[13px] font-bold text-ink">{t('mcpSettings.whatIsMcp.title')}</h4>
+            <h4 className="text-sm font-semibold text-ink">{t('mcpSettings.whatIsMcp.title')}</h4>
           </div>
         </div>
         <div className="p-6">
-          <p className="text-[11px] text-concrete leading-relaxed">
+          <p className="text-sm text-concrete leading-relaxed">
             {t('mcpSettings.whatIsMcp.description')}
           </p>
           <a
             href="https://modelcontextprotocol.io"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-1.5 text-[10px] font-bold text-brand-accent uppercase tracking-widest hover:underline mt-4"
+            className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-accent hover:underline mt-4"
           >
             {t('mcpSettings.whatIsMcp.learnMore')}
             <ExternalLink className="h-3 w-3" />
@@ -156,21 +156,21 @@ export function McpSettingsPanel({
             <Server size={18} />
           </div>
           <div>
-            <h4 className="text-[13px] font-bold text-ink">{t('mcpSettings.serverStatus.title')}</h4>
+            <h4 className="text-sm font-semibold text-ink">{t('mcpSettings.serverStatus.title')}</h4>
           </div>
         </div>
         <div className="p-6">
           <div className="space-y-4">
             <div className="flex items-center justify-between">
-              <span className="text-[11px] font-bold text-concrete uppercase tracking-widest">{t('mcpSettings.serverStatus.mode')}</span>
-              <span className="text-[10px] font-bold text-ink uppercase tracking-widest bg-paper dark:bg-white/10 px-3 py-1 rounded-lg border border-border">
+              <span className="text-sm text-concrete">{t('mcpSettings.serverStatus.mode')}</span>
+              <span className="text-xs font-medium text-ink bg-paper dark:bg-white/10 px-3 py-1 rounded-lg border border-border">
                 {serverStatus.mode.toUpperCase()}
               </span>
             </div>
             {serverStatus.mode === 'sse' && serverStatus.url && (
               <div className="space-y-2">
-                <span className="text-[10px] font-bold text-concrete uppercase tracking-widest">{t('mcpSettings.serverStatus.url')}</span>
-                <code className="text-[10px] bg-paper dark:bg-black/30 p-3 rounded-xl block break-all font-mono border border-border text-ink">
+                <span className="text-sm text-concrete">{t('mcpSettings.serverStatus.url')}</span>
+                <code className="text-xs bg-paper dark:bg-black/30 p-3 rounded-xl block break-all font-mono border border-border text-ink">
                   {serverStatus.url}
                 </code>
               </div>
@@ -182,22 +182,22 @@ export function McpSettingsPanel({
       <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl overflow-hidden">
         <div className="flex items-center justify-between p-6 border-b border-border/40">
           <div className="flex items-center gap-5">
-            <div className="p-3 bg-violet-500/10 rounded-2xl text-violet-500 border border-violet-500/20">
+            <div className="p-3 bg-brand-accent/10 rounded-2xl text-brand-accent border border-brand-accent/20">
               <Key size={18} />
             </div>
             <div>
-              <h4 className="text-[13px] font-bold text-ink">{t('mcpSettings.apiKeys.title')}</h4>
-              <p className="text-[10px] text-concrete mt-0.5">{t('mcpSettings.apiKeys.description')}</p>
+              <h4 className="text-sm font-semibold text-ink">{t('mcpSettings.apiKeys.title')}</h4>
+              <p className="text-sm text-concrete mt-0.5">{t('mcpSettings.apiKeys.description')}</p>
             </div>
           </div>
           {!mcpAllowed ? (
-            <p className="text-[10px] text-concrete max-w-[200px] text-end leading-relaxed">
+            <p className="text-sm text-concrete max-w-[200px] text-end leading-relaxed">
               {t('mcpSettings.tierRequired', { tier })}
             </p>
           ) : (
           <Dialog open={createOpen} onOpenChange={setCreateOpen}>
             <DialogTrigger asChild>
-              <button className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-ink text-paper text-[10px] font-bold uppercase tracking-[0.15em] hover:scale-[1.02] active:scale-95 transition-all duration-300 shadow-lg shadow-ink/20">
+              <button className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-ink text-paper text-sm font-medium hover:opacity-90 active:scale-[0.98] transition-all">
                 <Plus className="h-3.5 w-3.5" />
                 {t('mcpSettings.apiKeys.generate')}
               </button>
@@ -209,7 +209,7 @@ export function McpSettingsPanel({
 
         {!mcpAllowed && (
           <div className="px-6 pb-4">
-            <p className="text-[11px] text-amber-800 dark:text-amber-200 bg-amber-500/10 border border-amber-500/20 rounded-xl px-4 py-3 leading-relaxed">
+            <p className="text-sm text-amber-800 dark:text-amber-200 bg-amber-500/10 border border-amber-500/20 rounded-xl px-4 py-3 leading-relaxed">
               {t('mcpSettings.upgradeHint')}
             </p>
           </div>
@@ -219,7 +219,7 @@ export function McpSettingsPanel({
           {keys.length === 0 ? (
             <div className="text-center py-8">
               <Key className="h-8 w-8 mx-auto mb-2 text-concrete opacity-30" />
-              <p className="text-[11px] text-concrete">{t('mcpSettings.apiKeys.empty')}</p>
+              <p className="text-sm text-concrete">{t('mcpSettings.apiKeys.empty')}</p>
             </div>
           ) : (
             <div className="space-y-3">
@@ -243,7 +243,7 @@ export function McpSettingsPanel({
           </DialogHeader>
           <div className="space-y-3">
             <div>
-              <Label className="text-[10px] font-bold text-concrete uppercase tracking-widest">{rawKeyName}</Label>
+              <Label className="text-sm text-concrete">{rawKeyName}</Label>
               <div className="flex items-center gap-2 mt-2">
                 <code className="flex-1 text-[10px] bg-paper dark:bg-black/30 p-3 rounded-xl break-all font-mono border border-border text-ink">
                   {showRawKey}
@@ -260,7 +260,7 @@ export function McpSettingsPanel({
           <DialogFooter>
             <button
               onClick={() => setShowRawKey(null)}
-              className="px-6 py-2.5 rounded-xl bg-ink text-paper text-[10px] font-bold uppercase tracking-[0.15em]"
+              className="px-6 py-2.5 rounded-xl bg-ink text-paper text-sm font-medium"
             >
               {t('mcpSettings.createDialog.done')}
             </button>
@@ -283,7 +283,7 @@ function CreateKeyDialog({ onGenerate, isPending }: { onGenerate: (name: string)
       </DialogHeader>
       <div className="space-y-3">
         <div>
-          <Label htmlFor="key-name" className="text-[10px] font-bold text-concrete uppercase tracking-widest">{t('mcpSettings.createDialog.nameLabel')}</Label>
+          <Label htmlFor="key-name" className="text-sm text-concrete">{t('mcpSettings.createDialog.nameLabel')}</Label>
           <Input
             id="key-name"
             placeholder={t('mcpSettings.createDialog.namePlaceholder')}
@@ -297,7 +297,7 @@ function CreateKeyDialog({ onGenerate, isPending }: { onGenerate: (name: string)
         <button
           onClick={() => onGenerate(name)}
           disabled={isPending}
-          className="px-6 py-2.5 rounded-xl bg-ink text-paper text-[10px] font-bold uppercase tracking-[0.15em] disabled:opacity-60"
+          className="px-6 py-2.5 rounded-xl bg-ink text-paper text-sm font-medium disabled:opacity-60"
         >
           <div className="flex items-center gap-2">
             {isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Key className="h-4 w-4" />}
@@ -321,9 +321,9 @@ function KeyCard({ keyInfo, onRevoke, onDelete, isPending }: { keyInfo: McpKeyIn
     <div className="flex items-center justify-between p-4 rounded-2xl border border-border/60 bg-paper/30 dark:bg-black/10">
       <div className="space-y-1">
         <div className="flex items-center gap-2">
-          <span className="text-[13px] font-bold text-ink">{keyInfo.name}</span>
+          <span className="text-sm font-semibold text-ink">{keyInfo.name}</span>
           <span className={cn(
-            'text-[9px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-lg',
+            'text-xs font-medium px-2 py-0.5 rounded-lg',
             keyInfo.active
               ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300'
               : 'bg-concrete/10 text-concrete'
@@ -331,7 +331,7 @@ function KeyCard({ keyInfo, onRevoke, onDelete, isPending }: { keyInfo: McpKeyIn
             {keyInfo.active ? t('mcpSettings.apiKeys.active') : t('mcpSettings.apiKeys.revoked')}
           </span>
         </div>
-        <div className="flex gap-4 text-[10px] text-concrete">
+        <div className="flex gap-4 text-sm text-concrete">
           <span>{t('mcpSettings.apiKeys.createdAt')}: {formatDate(keyInfo.createdAt)}</span>
           <span>{t('mcpSettings.apiKeys.lastUsed')}: {formatDate(keyInfo.lastUsedAt)}</span>
         </div>
@@ -341,7 +341,7 @@ function KeyCard({ keyInfo, onRevoke, onDelete, isPending }: { keyInfo: McpKeyIn
           <button
             onClick={() => onRevoke(keyInfo.shortId)}
             disabled={isPending}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl border border-border text-[10px] font-bold uppercase tracking-widest text-concrete hover:text-ink hover:border-ink/30 transition-colors disabled:opacity-60"
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl border border-border text-sm font-medium text-concrete hover:text-ink hover:border-ink/30 transition-colors disabled:opacity-60"
           >
             <Ban className="h-3 w-3" />
             {t('mcpSettings.apiKeys.revoke')}
@@ -350,7 +350,7 @@ function KeyCard({ keyInfo, onRevoke, onDelete, isPending }: { keyInfo: McpKeyIn
           <button
             onClick={() => onDelete(keyInfo.shortId)}
             disabled={isPending}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-rose-500/10 text-rose-600 dark:text-rose-400 text-[10px] font-bold uppercase tracking-widest hover:bg-rose-500/20 transition-colors disabled:opacity-60"
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-rose-500/10 text-rose-600 dark:text-rose-400 text-sm font-medium hover:bg-rose-500/20 transition-colors disabled:opacity-60"
           >
             <Trash2 className="h-3 w-3" />
             {t('mcpSettings.apiKeys.delete')}
@@ -428,8 +428,8 @@ function ConfigInstructions({ serverStatus }: { serverStatus: McpServerStatus })
           <ExternalLink size={18} />
         </div>
         <div>
-          <h4 className="text-[13px] font-bold text-ink">{t('mcpSettings.configInstructions.title')}</h4>
-          <p className="text-[10px] text-concrete mt-0.5">{t('mcpSettings.configInstructions.description')}</p>
+          <h4 className="text-sm font-semibold text-ink">{t('mcpSettings.configInstructions.title')}</h4>
+          <p className="text-sm text-concrete mt-0.5">{t('mcpSettings.configInstructions.description')}</p>
         </div>
       </div>
       <div className="p-6 space-y-3">
@@ -439,7 +439,7 @@ function ConfigInstructions({ serverStatus }: { serverStatus: McpServerStatus })
               className="w-full flex items-center justify-between px-5 py-3.5 text-left hover:bg-paper/50 dark:hover:bg-white/5 transition-colors"
               onClick={() => setExpanded(expanded === cfg.id ? null : cfg.id)}
             >
-              <span className="text-[11px] font-bold text-ink">{cfg.title}</span>
+              <span className="text-sm font-medium text-ink">{cfg.title}</span>
               {expanded === cfg.id ? (
                 <ChevronDown className="h-4 w-4 text-concrete" />
               ) : (
@@ -448,7 +448,7 @@ function ConfigInstructions({ serverStatus }: { serverStatus: McpServerStatus })
             </button>
             {expanded === cfg.id && (
               <div className="px-5 pb-5">
-                <p className="text-[11px] text-concrete mb-3">{cfg.description}</p>
+                <p className="text-sm text-concrete mb-3">{cfg.description}</p>
                 <div className="relative">
                   <pre className="text-[10px] bg-paper dark:bg-black/30 p-4 rounded-xl overflow-x-auto border border-border">
                     <code>{cfg.snippet}</code>