投稿排他 (#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>)
 }

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>)
 }