#399

frontend/src/components/dialogues/DialogueProvider.tsx

@@ -1,7 +1,12 @@
 import { createContext, useCallback, useContext, useMemo, useState } from 'react'
 
-import CommonDialogue from '@/components/dialogues/CommonDialogue'
 import { Button } from '@/components/ui/button'
+import { Dialog,
+	 DialogContent,
+	 DialogDescription,
+	 DialogFooter,
+	 DialogHeader,
+	 DialogTitle } from '@/components/ui/dialog'
 
 import type { FC, ReactNode } from 'react'
 
@@ -106,60 +111,67 @@ const DialogueProvider: FC<Props> = ({ children }) => {
       <DialogueContext.Provider value={api}>
 	{children}
 
-	{active && (
-	    <CommonDialogue
-		open={Boolean (active)}
-		onOpenChange={open => {
-		  if (!(open))
-		    closeActive (active.kind !== 'confirm' && null)
-		}}
-		title={active.options.title}
-		description={active.options.description}
-		bodyClassName="hidden"
-		footer={
-		    <>
-		      {active.kind === 'confirm' && (
-			  <>
-			    <Button
-				variant="outline"
-				onClick={() => closeActive (false)}>
-			      {active.options.cancelText ?? '取消'}
-			    </Button>
+	<Dialog
+	    open={Boolean (active)}
+	    onOpenChange={open => {
+	      if (!(open))
+		closeActive (active?.kind !== 'confirm' && null)
+	    }}>
+	  {active && (
+	      <DialogContent className="px-6 pb-6 pt-7">
+		<DialogHeader className="pl-8">
+		  <DialogTitle>{active.options.title}</DialogTitle>
 
+		  {active.options.description && (
+		      <DialogDescription asChild>
+			<div>{active.options.description}</div>
+		      </DialogDescription>)}
+		</DialogHeader>
+
+		<DialogFooter>
+		  {active.kind === 'confirm' && (
+		      <>
+			<Button
+			    variant="outline"
+			    onClick={() => closeActive (false)}>
+			  {active.options.cancelText ?? '取消'}
+			</Button>
+
+			<Button
+			    variant={(active.options.variant === 'danger')
+				     ? 'destructive'
+				     : 'default'}
+			    onClick={() => closeActive (true)}>
+			  {active.options.confirmText ?? '確定'}
+			</Button>
+		      </>)}
+
+		  {active.kind === 'alert' && (
+		      <Button onClick={() => closeActive ()}>
+			{active.options.okText ?? '確定'}
+		      </Button>)}
+
+		  {active.kind === 'choice' && (
+		      <>
+			<Button
+			    variant="outline"
+			    onClick={() => closeActive (null)}>
+			  {active.options.cancelText ?? '取消'}
+			</Button>
+
+			{active.options.choices.map (choice => (
 			    <Button
-				variant={(active.options.variant === 'danger')
+				key={choice.value}
+				variant={(choice.variant === 'danger')
 					 ? 'destructive'
 					 : 'default'}
-				onClick={() => closeActive (true)}>
-			      {active.options.confirmText ?? '確定'}
-			    </Button>
-			  </>)}
-
-		      {active.kind === 'alert' && (
-			  <Button onClick={() => closeActive ()}>
-			    {active.options.okText ?? '確定'}
-			  </Button>)}
-
-		      {active.kind === 'choice' && (
-			  <>
-			    <Button
-				variant="outline"
-				onClick={() => closeActive (null)}>
-			      {active.options.cancelText ?? '取消'}
-			    </Button>
-
-			    {active.options.choices.map (choice => (
-				<Button
-				    key={choice.value}
-				    variant={(choice.variant === 'danger')
-					     ? 'destructive'
-					     : 'default'}
-				    onClick={() => closeActive (choice.value)}>
-				  {choice.label}
-				</Button>))}
-			  </>)}
-		    </>}/>
-	  )}
+				onClick={() => closeActive (choice.value)}>
+			      {choice.label}
+			    </Button>))}
+		      </>)}
+		</DialogFooter>
+	      </DialogContent>)}
+	</Dialog>
       </DialogueContext.Provider>)
 }