refactor(glossaries): align CreateGlossaryDialog with editorial design system

_bmad-output/implementation-artifacts/spec-align-create-glossary-dialog-design.md

@@ -0,0 +1,22 @@
+---
+title: 'Aligner le design du CreateGlossaryDialog avec le design system éditorial'
+type: 'refactor'
+created: '2026-06-20'
+status: 'done'
+route: 'one-shot'
+context: []
+---
+
+# Aligner le design du CreateGlossaryDialog avec le design system éditorial
+
+## Intent
+
+**Problem:** Le dialog `CreateGlossaryDialog` utilisait le style shadcn/ui générique (boutons gris, tabs Radix standard, couleurs template Tailwind) alors que le reste de l'application — et notamment la page Glossaires elle-même — utilise un design éditorial premium avec typography serif Playfair Display, boutons `premium-button` dorés, cartes `editorial-card`, palette brand (#C5A17A), et micro-typographie soignée. De plus, les labels de langue étaient hardcodés en français au lieu d'utiliser le système i18n.
+
+**Approach:** Refactoriser le composant pour adopter le même vocabulaire visuel (editorial-card, premium-button, accent-pill, font-serif, brand colors), remplacer les labels hardcodés par des clés i18n existantes, et ajouter les attributs ARIA manquants sur les tabs custom.
+
+## Suggested Review Order
+
+1. [CreateGlossaryDialog.tsx](file:///d:/dev1405/office_translator/frontend/src/app/dashboard/glossaries/CreateGlossaryDialog.tsx) — Composant refactorisé : vérifier la cohérence visuelle avec la page parent
+2. [page.tsx](file:///d:/dev1405/office_translator/frontend/src/app/dashboard/glossaries/page.tsx) — Page Glossaires (référence design — non modifiée)
+3. [globals.css](file:///d:/dev1405/office_translator/frontend/src/app/globals.css) — Design tokens (référence — non modifié)

frontend/src/app/dashboard/glossaries/CreateGlossaryDialog.tsx

@@ -7,13 +7,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogDescription,
-  DialogFooter,
 } from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Badge } from '@/components/ui/badge';
 import { TermEditor } from './TermEditor';
 import { parseFileToTerms } from './csvUtils';
 import { useGlossaryTemplates } from './useGlossaries';
@@ -62,17 +58,6 @@ const TEMPLATE_ICONS: Record<string, React.ReactNode> = {
   ecommerce: <ShoppingCart className="size-5" />,
 };
 
-const TEMPLATE_COLORS: Record<string, string> = {
-  legal: 'bg-purple-50 text-purple-700 border-purple-200 hover:bg-purple-100',
-  technology: 'bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100',
-  finance: 'bg-green-50 text-green-700 border-green-200 hover:bg-green-100',
-  medical: 'bg-red-50 text-red-700 border-red-200 hover:bg-red-100',
-  marketing: 'bg-orange-50 text-orange-700 border-orange-200 hover:bg-orange-100',
-  hr: 'bg-teal-50 text-teal-700 border-teal-200 hover:bg-teal-100',
-  scientific: 'bg-indigo-50 text-indigo-700 border-indigo-200 hover:bg-indigo-100',
-  ecommerce: 'bg-pink-50 text-pink-700 border-pink-200 hover:bg-pink-100',
-};
-
 type FileStatus = 'idle' | 'parsing' | 'success' | 'error';
 
 const MAX_FILE_SIZE_MB = 5;
@@ -81,15 +66,16 @@ function TemplateCard({
   template,
   onSelect,
   isLoading,
+  isSelected,
   termsLabel,
 }: {
   template: GlossaryTemplate;
   onSelect: (t: GlossaryTemplate) => void;
   isLoading: boolean;
+  isSelected: boolean;
   termsLabel: string;
 }) {
   const icon = TEMPLATE_ICONS[template.id] ?? <BookOpen className="size-5" />;
-  const colorClass = TEMPLATE_COLORS[template.id] ?? 'bg-muted text-foreground border-border hover:bg-muted/80';
 
   return (
     <button
@@ -97,22 +83,34 @@ function TemplateCard({
       onClick={() => onSelect(template)}
       disabled={isLoading}
       className={cn(
-        'flex flex-col gap-2 rounded-lg border p-3 text-start transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
-        colorClass
+        'editorial-card flex flex-col gap-2 p-4 text-start transition-all disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer group',
+        'hover:shadow-md hover:-translate-y-0.5',
+        isSelected
+          ? 'ring-2 ring-brand-accent ring-offset-1 border-brand-accent/40'
+          : 'border-black/5 dark:border-white/5 hover:border-brand-accent/30'
       )}
     >
       <div className="flex items-center justify-between gap-2">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2.5">
+          <div className="w-8 h-8 rounded-lg bg-brand-accent/10 dark:bg-brand-accent/15 flex items-center justify-center text-brand-accent shrink-0">
             {icon}
-          <span className="text-sm font-medium leading-tight">
+          </div>
+          <span className="text-sm font-serif font-semibold text-brand-dark dark:text-white leading-tight tracking-tight">
             {template.name.split(' - ')[0]}
           </span>
         </div>
-        <Badge variant="secondary" className="shrink-0 text-xs font-normal">
+        <span className="accent-pill !px-2.5 !py-0.5 !text-[10px] shrink-0">
           {template.terms_count} {termsLabel}
-        </Badge>
+        </span>
       </div>
-      <p className="text-xs opacity-75 line-clamp-2">{template.description}</p>
+      <p className="text-[11px] text-brand-dark/50 dark:text-white/40 font-light leading-relaxed line-clamp-2">
+        {template.description}
+      </p>
+      {isSelected && (
+        <div className="absolute -top-1.5 -right-1.5 z-10">
+          <CheckCircle2 className="size-5 text-brand-accent bg-white dark:bg-[#141414] rounded-full" />
+        </div>
+      )}
     </button>
   );
 }
@@ -182,18 +180,18 @@ function FileUploadZone({
   };
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-4">
       <div
         onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
         onDragLeave={() => setIsDragging(false)}
         onDrop={handleDrop}
         onClick={() => !disabled && fileInputRef.current?.click()}
         className={cn(
-          'relative flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-8 text-center transition-colors cursor-pointer',
-          isDragging ? 'border-primary bg-primary/5' : 'border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/30',
+          'relative flex flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed p-8 text-center transition-all cursor-pointer',
+          isDragging ? 'border-brand-accent bg-brand-accent/5' : 'border-brand-dark/10 dark:border-white/10 hover:border-brand-accent/50 hover:bg-brand-muted/30 dark:hover:bg-white/[0.02]',
           disabled && 'opacity-50 cursor-not-allowed',
-          status === 'success' && 'border-green-400 bg-green-50',
-          status === 'error' && 'border-destructive/50 bg-destructive/5'
+          status === 'success' && 'border-emerald-400/50 bg-emerald-50 dark:bg-emerald-900/10',
+          status === 'error' && 'border-destructive/30 bg-destructive/5'
         )}
       >
         <input
@@ -207,73 +205,67 @@ function FileUploadZone({
 
         {status === 'parsing' && (
           <>
-            <Loader2 className="size-8 animate-spin text-primary" />
-            <p className="text-sm text-muted-foreground">{t('glossaries.dialog.parsing')}</p>
+            <Loader2 className="size-8 animate-spin text-brand-accent" />
+            <p className="text-xs text-brand-dark/50 dark:text-white/40 font-light">{t('glossaries.dialog.parsing')}</p>
           </>
         )}
 
         {status === 'success' && parsedFile && (
           <>
-            <CheckCircle2 className="size-8 text-green-600" />
+            <CheckCircle2 className="size-8 text-emerald-600" />
             <div>
-              <p className="text-sm font-medium text-green-700">
+              <p className="text-xs font-bold text-emerald-700 dark:text-emerald-400">
                 {t('glossaries.dialog.termsImported', { count: String(parsedFile.count) })}
               </p>
-              <p className="text-xs text-muted-foreground mt-0.5">{parsedFile.name}</p>
+              <p className="text-[11px] text-brand-dark/40 dark:text-white/30 mt-0.5 font-light">{parsedFile.name}</p>
             </div>
-            <Button
+            <button
               type="button"
-              variant="ghost"
-              size="sm"
               onClick={(e) => { e.stopPropagation(); reset(); }}
-              className="gap-1.5 text-xs"
+              className="gap-1.5 text-[11px] font-bold uppercase tracking-wider text-brand-dark/50 dark:text-white/40 hover:text-brand-dark dark:hover:text-white transition-colors cursor-pointer"
             >
-              <X className="size-3.5" /> {t('glossaries.dialog.changeFile')}
-            </Button>
+              <X className="size-3 inline mr-1" />{t('glossaries.dialog.changeFile')}
+            </button>
           </>
         )}
 
         {status === 'error' && (
           <>
             <AlertCircle className="size-8 text-destructive" />
-            <div>
-              <p className="text-sm font-medium text-destructive">{errorMsg}</p>
-            </div>
-            <Button
+            <p className="text-xs font-medium text-destructive">{errorMsg}</p>
+            <button
               type="button"
-              variant="ghost"
-              size="sm"
               onClick={(e) => { e.stopPropagation(); reset(); }}
-              className="gap-1.5 text-xs"
+              className="gap-1.5 text-[11px] font-bold uppercase tracking-wider text-brand-dark/50 dark:text-white/40 hover:text-brand-dark dark:hover:text-white transition-colors cursor-pointer"
             >
-              <X className="size-3.5" /> {t('glossaries.dialog.retry')}
-            </Button>
+              <X className="size-3 inline mr-1" />{t('glossaries.dialog.retry')}
+            </button>
           </>
         )}
 
         {status === 'idle' && (
           <>
-            <div className="flex size-12 items-center justify-center rounded-full bg-muted">
-              <Upload className="size-6 text-muted-foreground" />
+            <div className="w-12 h-12 rounded-xl bg-brand-muted dark:bg-white/10 flex items-center justify-center text-brand-accent">
+              <Upload className="size-6" />
             </div>
             <div>
-              <p className="text-sm font-medium">{t('glossaries.dialog.dropTitle')}</p>
-              <p className="text-xs text-muted-foreground mt-1">{t('glossaries.dialog.dropOr')}</p>
+              <p className="text-sm font-serif font-medium text-brand-dark dark:text-white tracking-tight">{t('glossaries.dialog.dropTitle')}</p>
+              <p className="text-[11px] text-brand-dark/40 dark:text-white/30 mt-1 font-light">{t('glossaries.dialog.dropOr')}</p>
             </div>
-            <p className="text-xs text-muted-foreground">{t('glossaries.dialog.dropFormats')}</p>
+            <p className="text-[11px] text-brand-dark/35 dark:text-white/25 font-light">{t('glossaries.dialog.dropFormats')}</p>
           </>
         )}
       </div>
 
-      <div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground space-y-1">
-        <p className="font-medium">{t('glossaries.dialog.formatTitle')}</p>
-        <p>{t('glossaries.dialog.formatDesc')}</p>
-        <div className="font-mono bg-background rounded border px-2 py-1 mt-1">
-          <div className="text-muted-foreground">source,target</div>
-          <div>server,server</div>
-          <div>database,database</div>
+      <div className="rounded-xl bg-brand-muted/40 dark:bg-white/[0.03] border border-black/5 dark:border-white/5 p-3.5 text-[11px] text-brand-dark/60 dark:text-white/50 font-light space-y-1">
+        <p className="font-bold text-brand-dark/80 dark:text-white/80 text-xs">{t('glossaries.dialog.formatTitle')}</p>
+        <p className="leading-relaxed">{t('glossaries.dialog.formatDesc')}</p>
+        <div className="font-mono bg-white dark:bg-[#141414] rounded-lg border border-black/5 dark:border-white/5 px-3 py-2 mt-1.5 text-[11px]">
+          <div className="text-brand-dark/30 dark:text-white/25">source,target</div>
+          <div className="text-brand-dark dark:text-white">server,server</div>
+          <div className="text-brand-dark dark:text-white">database,database</div>
         </div>
-        <p className="mt-1">{t('glossaries.dialog.formatNote')}</p>
+        <p className="mt-1.5 italic text-brand-dark/40 dark:text-white/30">{t('glossaries.dialog.formatNote')}</p>
       </div>
     </div>
   );
@@ -379,49 +371,70 @@ export function CreateGlossaryDialog({
       : t('glossaries.dialog.createEmpty');
   })();
 
+  const tabs = [
+    { id: 'templates' as const, label: t('glossaries.dialog.tabTemplates'), icon: <BookOpen className="size-3.5" /> },
+    { id: 'file' as const, label: t('glossaries.dialog.tabFile'), icon: <FileText className="size-3.5" /> },
+    { id: 'manual' as const, label: t('glossaries.dialog.tabManual'), icon: <PenLine className="size-3.5" /> },
+  ];
+
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
-        <DialogHeader className="shrink-0">
-          <DialogTitle>{t('glossaries.dialog.title')}</DialogTitle>
-          <DialogDescription>{t('glossaries.dialog.description')}</DialogDescription>
+      <DialogContent className="sm:max-w-2xl max-h-[90vh] flex flex-col overflow-hidden !rounded-2xl border-black/5 dark:border-white/5 bg-white dark:bg-[#141414] shadow-editorial p-0">
+
+        {/* ── Header ────────────────────────────────────── */}
+        <DialogHeader className="shrink-0 px-8 pt-8 pb-0">
+          <DialogTitle className="text-2xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
+            {t('glossaries.dialog.title')}
+          </DialogTitle>
+          <DialogDescription className="text-[11px] text-brand-dark/45 dark:text-white/40 font-light">
+            {t('glossaries.dialog.description')}
+          </DialogDescription>
         </DialogHeader>
 
-        <div className="shrink-0 space-y-3 pt-2">
+        {/* ── Name + Languages ──────────────────────────── */}
+        <div className="shrink-0 space-y-4 px-8 pt-5">
           <div>
-            <Label htmlFor="glossary-name">{t('glossaries.dialog.nameLabel')}</Label>
+            <Label htmlFor="glossary-name" className="text-xs font-bold text-brand-dark/70 dark:text-white/60 uppercase tracking-wider">
+              {t('glossaries.dialog.nameLabel')}
+            </Label>
             <Input
               id="glossary-name"
               value={name}
               onChange={(e) => { setName(e.target.value); setNameAutoFilled(false); }}
               placeholder={t('glossaries.dialog.namePlaceholder')}
               disabled={isProcessing}
-              className="mt-1"
+              className="mt-1.5 bg-brand-muted/30 dark:bg-white/[0.03] border-black/5 dark:border-white/10 rounded-xl focus:ring-brand-accent/20 focus:border-brand-accent/30"
             />
           </div>
-          {/* Language pair selector */}
-          <div className="flex items-center gap-2">
+
+          <div className="flex items-center gap-3">
             <div className="flex-1">
-              <Label className="text-xs text-muted-foreground mb-1 block">Langue source</Label>
+              <Label htmlFor="glossary-source-lang" className="text-[10px] font-bold text-brand-dark/50 dark:text-white/40 uppercase tracking-wider mb-1.5 block">
+                {t('glossaries.edit.sourceLang')}
+              </Label>
               <select
+                id="glossary-source-lang"
                 value={sourceLanguage}
                 onChange={e => setSourceLanguage(e.target.value)}
                 disabled={isProcessing}
-                className="w-full h-9 rounded-md border border-input bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                className="w-full h-10 rounded-xl border border-black/5 dark:border-white/10 bg-brand-muted/30 dark:bg-white/[0.03] px-3 text-sm text-brand-dark dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all"
               >
                 {SUPPORTED_LANGUAGES.map(l => (
                   <option key={l.code} value={l.code}>{l.flag} {l.label}</option>
                 ))}
               </select>
             </div>
-            <div className="pt-5 text-muted-foreground font-bold">→</div>
+            <div className="pt-5 text-brand-accent font-bold text-lg">→</div>
             <div className="flex-1">
-              <Label className="text-xs text-muted-foreground mb-1 block">Langue cible</Label>
+              <Label htmlFor="glossary-target-lang" className="text-[10px] font-bold text-brand-dark/50 dark:text-white/40 uppercase tracking-wider mb-1.5 block">
+                {t('glossaries.edit.targetLang')}
+              </Label>
               <select
+                id="glossary-target-lang"
                 value={targetLanguage}
                 onChange={e => setTargetLanguage(e.target.value)}
                 disabled={isProcessing}
-                className="w-full h-9 rounded-md border border-input bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                className="w-full h-10 rounded-xl border border-black/5 dark:border-white/10 bg-brand-muted/30 dark:bg-white/[0.03] px-3 text-sm text-brand-dark dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all"
               >
                 {SUPPORTED_LANGUAGES.map(l => (
                   <option key={l.code} value={l.code}>{l.flag} {l.label}</option>
@@ -431,95 +444,106 @@ export function CreateGlossaryDialog({
           </div>
         </div>
 
-        <Tabs
-          value={activeTab}
-          onValueChange={(v) => setActiveTab(v as typeof activeTab)}
-          className="flex flex-col flex-1 min-h-0 mt-4"
+        {/* ── Tab Navigation ────────────────────────────── */}
+        <div className="shrink-0 px-8 mt-5">
+          <div role="tablist" className="flex gap-1 p-1 rounded-xl bg-brand-muted/50 dark:bg-white/[0.03] border border-black/5 dark:border-white/5">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                type="button"
+                role="tab"
+                aria-selected={activeTab === tab.id}
+                aria-controls={`tabpanel-${tab.id}`}
+                id={`tab-${tab.id}`}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  'flex-1 flex items-center justify-center gap-1.5 py-2 px-3 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-all cursor-pointer',
+                  activeTab === tab.id
+                    ? 'bg-white dark:bg-[#1a1a1a] text-brand-dark dark:text-white shadow-sm border border-black/5 dark:border-white/10'
+                    : 'text-brand-dark/40 dark:text-white/30 hover:text-brand-dark/70 dark:hover:text-white/60'
+                )}
               >
-          <TabsList className="shrink-0 w-full grid grid-cols-3">
-            <TabsTrigger value="templates" className="gap-1.5 text-xs">
-              <BookOpen className="size-3.5" />
-              {t('glossaries.dialog.tabTemplates')}
-            </TabsTrigger>
-            <TabsTrigger value="file" className="gap-1.5 text-xs">
-              <FileText className="size-3.5" />
-              {t('glossaries.dialog.tabFile')}
-            </TabsTrigger>
-            <TabsTrigger value="manual" className="gap-1.5 text-xs">
-              <PenLine className="size-3.5" />
-              {t('glossaries.dialog.tabManual')}
-            </TabsTrigger>
-          </TabsList>
+                {tab.icon}
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
 
-          <TabsContent value="templates" className="flex-1 overflow-y-auto mt-4 space-y-3">
+        {/* ── Tab Content ───────────────────────────────── */}
+        <div className="flex-1 overflow-y-auto px-8 pt-5 min-h-0">
+
+          <div role="tabpanel" id="tabpanel-templates" aria-labelledby="tab-templates" hidden={activeTab !== 'templates'}>
+            <div className="space-y-3">
               {isLoadingTemplates ? (
                 <div className="flex items-center justify-center py-10">
-                <Loader2 className="size-6 animate-spin text-muted-foreground" />
+                  <div className="animate-spin rounded-full h-6 w-6 border-2 border-brand-muted border-t-brand-accent" />
                 </div>
               ) : (
                 <>
-                <p className="text-xs text-muted-foreground">
+                  <p className="text-[11px] text-brand-dark/45 dark:text-white/35 font-light">
                     {t('glossaries.dialog.templatesDesc')}
                   </p>
-                <div className="grid gap-2 sm:grid-cols-2">
+                  <div className="grid gap-3 sm:grid-cols-2">
                     {templates.map((template) => (
-                    <div
-                      key={template.id}
-                      className={cn(
-                        'relative',
-                        selectedTemplate?.id === template.id && 'ring-2 ring-primary ring-offset-1 rounded-lg'
-                      )}
-                    >
-                      {selectedTemplate?.id === template.id && (
-                        <CheckCircle2 className="absolute -top-1.5 -right-1.5 size-4 text-primary bg-background rounded-full z-10" />
-                      )}
+                      <div key={template.id} className="relative">
                         <TemplateCard
                           template={template}
                           onSelect={handleTemplateSelect}
                           isLoading={isProcessing}
+                          isSelected={selectedTemplate?.id === template.id}
                           termsLabel={t('glossaries.dialog.terms')}
                         />
                       </div>
                     ))}
                   </div>
                   {templates.length === 0 && !isLoadingTemplates && (
-                  <p className="text-sm text-muted-foreground text-center py-8">
+                    <p className="text-xs text-brand-dark/40 dark:text-white/30 text-center py-8 font-light">
                       {t('glossaries.dialog.templatesEmpty')}
                     </p>
                   )}
                 </>
               )}
-          </TabsContent>
+            </div>
+          </div>
 
-          <TabsContent value="file" className="flex-1 overflow-y-auto mt-4">
+          <div role="tabpanel" id="tabpanel-file" aria-labelledby="tab-file" hidden={activeTab !== 'file'}>
             <FileUploadZone
               onTermsParsed={handleFileTermsParsed}
               disabled={isProcessing}
             />
-          </TabsContent>
+          </div>
 
-          <TabsContent value="manual" className="flex-1 overflow-y-auto mt-4">
+          <div role="tabpanel" id="tabpanel-manual" aria-labelledby="tab-manual" hidden={activeTab !== 'manual'}>
             <TermEditor
               terms={terms}
               onChange={setTerms}
               disabled={isProcessing}
             />
-          </TabsContent>
-        </Tabs>
+          </div>
+        </div>
 
-        <DialogFooter className="shrink-0 pt-4 border-t mt-2">
-          <Button
-            variant="outline"
+        {/* ── Footer ────────────────────────────────────── */}
+        <div className="shrink-0 px-8 py-5 border-t border-black/5 dark:border-white/5 flex justify-end gap-3">
+          <button
+            type="button"
             onClick={() => handleOpenChange(false)}
             disabled={isProcessing}
+            className="px-5 py-2.5 bg-brand-muted dark:bg-white/5 text-brand-dark/50 dark:text-white/40 rounded-xl text-[11px] font-bold uppercase tracking-wider hover:text-brand-dark dark:hover:text-white transition-all cursor-pointer disabled:opacity-50"
           >
             {t('glossaries.dialog.cancel')}
-          </Button>
-          <Button onClick={handleSubmit} disabled={!canSubmit}>
-            {isProcessing && <Loader2 className="size-3.5 animate-spin me-1.5" />}
+          </button>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={!canSubmit}
+            className="premium-button px-8 py-2.5 text-[11px] uppercase tracking-widest !rounded-xl flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer font-bold"
+          >
+            {isProcessing && <Loader2 className="size-3.5 animate-spin" />}
             {submitLabel}
-          </Button>
-        </DialogFooter>
+          </button>
+        </div>
+
       </DialogContent>
     </Dialog>
   );