From a952d4227d966a21ed7f6ab109fbf554c8fce737 Mon Sep 17 00:00:00 2001
From: Vinzenz Schroeter <vinzenz.f.s@gmail.com>
Date: Sun, 5 May 2024 22:33:55 +0200
Subject: [PATCH] extract dialog component

---
 tank-frontend/src/JoinForm.css          | 12 ------------
 tank-frontend/src/JoinForm.tsx          | 11 ++++++-----
 tank-frontend/src/components/Dialog.css | 13 +++++++++++++
 tank-frontend/src/components/Dialog.tsx | 12 ++++++++++++
 4 files changed, 31 insertions(+), 17 deletions(-)
 create mode 100644 tank-frontend/src/components/Dialog.css
 create mode 100644 tank-frontend/src/components/Dialog.tsx

diff --git a/tank-frontend/src/JoinForm.css b/tank-frontend/src/JoinForm.css
index a1baee0..151848c 100644
--- a/tank-frontend/src/JoinForm.css
+++ b/tank-frontend/src/JoinForm.css
@@ -9,18 +9,6 @@
 }
 
 .JoinForm {
-    border: solid var(--border-size-thick) var(--color-secondary);
-
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    background: var(--color-background);
-
-    gap: 16px;
-    padding: 16px;
-
     animation-duration: 1s;
     animation-name: BlinkJoinFormBorder;
     animation-iteration-count: infinite;
diff --git a/tank-frontend/src/JoinForm.tsx b/tank-frontend/src/JoinForm.tsx
index dfd85b6..2235387 100644
--- a/tank-frontend/src/JoinForm.tsx
+++ b/tank-frontend/src/JoinForm.tsx
@@ -1,10 +1,11 @@
 import {useState} from 'react';
-import './JoinForm.css';
+import {useMutation} from '@tanstack/react-query';
+
 import {makeApiUrl} from './serverCalls';
-import Column from './components/Column.tsx';
 import Button from './components/Button.tsx';
 import TextInput from './components/TextInput.tsx';
-import {useMutation} from '@tanstack/react-query';
+import Dialog from './components/Dialog.tsx';
+import './JoinForm.css';
 
 export default function JoinForm({onDone}: {
     onDone: (name: string) => void;
@@ -29,7 +30,7 @@ export default function JoinForm({onDone}: {
 
     const confirm = () => postPlayer.mutate({name});
 
-    return <Column className="JoinForm">
+    return <Dialog className="JoinForm">
         <h3> Enter your name to play </h3>
         <TextInput
             value={name}
@@ -42,5 +43,5 @@ export default function JoinForm({onDone}: {
             disabled={disableButtons}
             text="INSERT COIN"/>
         {postPlayer.isError && <p>{postPlayer.error.message}</p>}
-    </Column>;
+    </Dialog>;
 }
diff --git a/tank-frontend/src/components/Dialog.css b/tank-frontend/src/components/Dialog.css
new file mode 100644
index 0000000..193905f
--- /dev/null
+++ b/tank-frontend/src/components/Dialog.css
@@ -0,0 +1,13 @@
+
+.Dialog {
+    border: solid var(--border-size-thick) var(--color-secondary);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    background: var(--color-background);
+
+    gap: 16px;
+    padding: 16px;
+}
diff --git a/tank-frontend/src/components/Dialog.tsx b/tank-frontend/src/components/Dialog.tsx
new file mode 100644
index 0000000..960efc3
--- /dev/null
+++ b/tank-frontend/src/components/Dialog.tsx
@@ -0,0 +1,12 @@
+import {ReactNode} from 'react';
+import Column from './Column.tsx';
+import './Dialog.css';
+
+export default function Dialog({children, className}: {
+    children: ReactNode;
+    className?: string;
+}) {
+    return <Column className={'Dialog ' + className ?? ''}>
+        {children}
+    </Column>
+}