From d683e4d028384df08dc81b36626ba7138b214337 Mon Sep 17 00:00:00 2001
From: minhd-vu <minhd_vu@yahoo.com>
Date: Tue, 27 Feb 2024 19:33:18 -0500
Subject: [PATCH] update form ui closes #47

---
 components/Alert.tsx     |  2 +-
 components/JoinParty.tsx | 49 ++++++++++++++++++++++++++++--------
 components/NameForm.tsx  | 54 +++++++++++++++++++++++++++-------------
 3 files changed, 77 insertions(+), 28 deletions(-)

diff --git a/components/Alert.tsx b/components/Alert.tsx
index a78fcac..02de003 100644
--- a/components/Alert.tsx
+++ b/components/Alert.tsx
@@ -47,7 +47,7 @@ export default function Alert({ children }: { children: ReactNode }) {
   );
 }
 
-function toSentence(children: ReactNode) {
+export function toSentence(children: ReactNode) {
   if (!children) {
     return;
   }
diff --git a/components/JoinParty.tsx b/components/JoinParty.tsx
index 4a4bc66..36fae79 100644
--- a/components/JoinParty.tsx
+++ b/components/JoinParty.tsx
@@ -3,6 +3,7 @@
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { useSWRConfig } from "swr";
 import { PartyJoinBody } from "@/lib/party";
+import { toSentence } from "./Alert";
 
 export default function JoinParty() {
   const { mutate } = useSWRConfig();
@@ -31,24 +32,52 @@ export default function JoinParty() {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="">
-      <div className="space-x-2">
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="space-x-2 flex flex-row">
         <Controller
           name="code"
           control={control}
           render={({ field }) => (
-            <input
-              {...field}
-              onChange={(e) => field.onChange(e.target.value.toUpperCase())}
-              className="input input-bordered"
-              placeholder="Party Code"
-              required
-            />
+            <label className="input input-bordered flex items-center gap-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-4 h-4 opacity-70"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M4 5h2" />
+                <path d="M5 4v2" />
+                <path d="M11.5 4l-.5 2" />
+                <path d="M18 5h2" />
+                <path d="M19 4v2" />
+                <path d="M15 9l-1 1" />
+                <path d="M18 13l2 -.5" />
+                <path d="M18 19h2" />
+                <path d="M19 18v2" />
+                <path d="M14 16.518l-6.518 -6.518l-4.39 9.58a1 1 0 0 0 1.329 1.329l9.579 -4.39z" />
+              </svg>
+              <input
+                {...field}
+                onChange={(e) => field.onChange(e.target.value.toUpperCase())}
+                className="grow"
+                placeholder="Party Code"
+                required
+              />
+            </label>
           )}
         />
         <button className="btn btn-primary">Join Party</button>
       </div>
-      <p className="text-sm text-error mt-1">{errors.code?.message}</p>
+      <p className="text-sm text-error mt-1">
+        {toSentence(errors.code?.message)}
+      </p>
     </form>
   );
 }
diff --git a/components/NameForm.tsx b/components/NameForm.tsx
index c3a61d6..fb49eaf 100644
--- a/components/NameForm.tsx
+++ b/components/NameForm.tsx
@@ -3,6 +3,7 @@
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { useSWRConfig } from "swr";
 import { UserBody } from "@/lib/user";
+import { toSentence } from "./Alert";
 
 export default function NameForm() {
   const { mutate } = useSWRConfig();
@@ -31,23 +32,42 @@ export default function NameForm() {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <h1 className="text-3xl">Set Username</h1>
-      <p className="text-center">Please choose a username.</p>
-      <Controller
-        name="name"
-        control={control}
-        render={({ field }) => (
-          <input
-            {...field}
-            className="input input-bordered"
-            placeholder="Username"
-            required
-          />
-        )}
-      />
-      <p>{errors.name?.message}</p>
-      <button className="btn btn-primary">Save</button>
+    <form onSubmit={handleSubmit(onSubmit)} className="text-center space-y-2">
+      <p className="text-xl">Choose Your Username</p>
+      <div className="space-x-2 flex flex-row">
+        <Controller
+          name="name"
+          control={control}
+          render={({ field }) => (
+            <label className="input input-bordered flex items-center gap-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-4 h-4 opacity-70"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
+                <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+              </svg>
+              <input
+                {...field}
+                className="grow"
+                placeholder="Username"
+                required
+              />
+            </label>
+          )}
+        />
+        <button className="btn btn-primary">Save</button>
+      </div>
+      <p className="text-sm text-error">{toSentence(errors.name?.message)}</p>
     </form>
   );
 }