投稿排他 (#171) (#345)

#171

#171

#171

#171

#171

#171

#171

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #345

frontend/src/components/users/InheritDialogue.tsx

@@ -1,9 +1,12 @@
 import { useState } from 'react'
 
+import { useDialogue } from '@/components/dialogues/DialogueProvider'
 import { Button } from '@/components/ui/button'
 import { Dialog,
-         DialogContent,
-         DialogTitle } from '@/components/ui/dialog'
+	 DialogContent,
+	 DialogDescription,
+	 DialogHeader,
+	 DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { toast } from '@/components/ui/use-toast'
 import { apiPost } from '@/lib/api'
@@ -16,10 +19,16 @@ type Props = { visible:         boolean
 
 
 export default ({ visible, onVisibleChange, setUser }: Props) => {
+  const dialogue = useDialogue ()
+
   const [inputCode, setInputCode] = useState ('')
 
   const handleTransfer = async () => {
-    if (!(confirm ('引継ぎを行ってもよろしいですか?\n現在のアカウントからはログアウトされます．')))
+    if (!(await dialogue.confirm ({
+	title: '引継ぎを行ってもよろしいですか?',
+	description: '現在のアカウントからはログアウトされます．',
+	confirmText: '引継ぐ',
+	variant: 'danger' })))
       return
 
     try
@@ -44,14 +53,18 @@ export default ({ visible, onVisibleChange, setUser }: Props) => {
 
   return (
       <Dialog open={visible} onOpenChange={onVisibleChange}>
-	<DialogContent>
-	  <DialogTitle>ほかのブラウザから引継ぐ</DialogTitle>
-	  <div className="flex gap-2">
-	    <Input placeholder="引継ぎコードを入力"
-		   value={inputCode}
-		   onChange={ev => setInputCode (ev.target.value)}/>
-	    <Button onClick={handleTransfer}>引継ぐ</Button>
-	  </div>
+	<DialogContent className="px-6 pp-6 pt-7">
+	  <DialogHeader className="pl-8">
+	    <DialogTitle>ほかのブラウザから引継ぐ</DialogTitle>
+	    <DialogDescription asChild>
+	      <div className="flex gap-2">
+		<Input placeholder="引継ぎコードを入力"
+		       value={inputCode}
+		       onChange={ev => setInputCode (ev.target.value)}/>
+		<Button onClick={handleTransfer}>引継ぐ</Button>
+	      </div>
+	    </DialogDescription>
+	  </DialogHeader>
 	</DialogContent>
       </Dialog>)
 }