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

#171

#171

#171

#171

#171

#171

#171

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

frontend/src/components/users/UserCodeDialogue.tsx

@@ -1,6 +1,10 @@
+import { useDialogue } from '@/components/dialogues/DialogueProvider'
 import { Button } from '@/components/ui/button'
 import { Dialog,
 	 DialogContent,
+	 DialogDescription,
+	 DialogFooter,
+	 DialogHeader,
 	 DialogTitle } from '@/components/ui/dialog'
 import { toast } from '@/components/ui/use-toast'
 import { apiPost } from '@/lib/api'
@@ -14,11 +18,20 @@ type Props = { visible:         boolean
 
 
 export default ({ visible, onVisibleChange, user, setUser }: Props) => {
+  const dialogue = useDialogue ()
+
   const handleChange = async () => {
     if (!(user))
       return
 
-    if (!(confirm ('引継ぎコードを再発行しますか?\n再発行するとほかのブラウザからはログアウトされます．')))
+    if (!(await dialogue.confirm ({
+	title: '引継ぎコードを再発行しますか?',
+	description: (
+	    <div>
+	      <p>再発行するとほかのブラウザからはログアウトされます．</p>
+	    </div>),
+	confirmText: '再発行',
+	variant: 'danger' })))
       return
 
     const data = await apiPost<{ code: string }> ('/users/code/renew', { },
@@ -33,21 +46,26 @@ export default ({ visible, onVisibleChange, user, setUser }: Props) => {
 
   return (
       <Dialog open={visible} onOpenChange={onVisibleChange}>
-	<DialogContent>
-	  <DialogTitle>引継ぎコード</DialogTitle>
-	  <div>
-	    <p>あなたの引継ぎコードはこちらです：</p>
-	    <div className="m-2">{user?.inheritanceCode}</div>
-	    <p className="mt-1 text-sm text-red-500">
-	      このコードはほかの人には教えないでください!
-	    </p>
-	    <div className="my-4">
-	      <Button onClick={handleChange}
-		      className="px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400">
-		引継ぎコード再発行
-	      </Button>
-	    </div>
-	  </div>
+	<DialogContent className="px-6 pb-6 pt-7">
+	  <DialogHeader className="pl-8">
+	    <DialogTitle>引継ぎコード</DialogTitle>
+
+	    <DialogDescription asChild>
+	      <div>
+		<p>あなたの引継ぎコードはこちらです：</p>
+		<div className="m-2">{user?.inheritanceCode}</div>
+		<p className="mt-1 text-sm text-destructive">
+		  このコードはほかの人には教えないでください!
+		</p>
+	      </div>
+	    </DialogDescription>
+	  </DialogHeader>
+
+	  <DialogFooter>
+	    <Button onClick={handleChange} variant="destructive">
+	      引継ぎコード再発行
+	    </Button>
+	  </DialogFooter>
 	</DialogContent>
       </Dialog>)
 }