improves party form ui

minhd-vu · Feb 27, 2024 · 11dc5ac · 11dc5ac
1 parent 9c97551
commit 11dc5ac
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 18 deletions.
diff --git a/components/JoinParty.tsx b/components/JoinParty.tsx
@@ -31,22 +31,24 @@ export default function JoinParty() {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <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
-          />
-        )}
-      />
-      {errors.code?.message}
-      <button className="btn btn-primary">Join Party</button>
+    <form onSubmit={handleSubmit(onSubmit)} className="">
+      <div className="space-x-2">
+        <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
+            />
+          )}
+        />
+        <button className="btn btn-primary">Join Party</button>
+      </div>
+      <p className="text-sm text-error mt-1">{errors.code?.message}</p>
     </form>
   );
 }
diff --git a/components/Party.tsx b/components/Party.tsx
@@ -46,10 +46,11 @@ export default function Party() {
   const party = user.party;
   if (!party) {
     return (
-      <>
+      <div className="text-center space-y-2">
         <JoinParty />
+        <p className="text-2xl font-bold">or</p>
         <CreateParty />
-      </>
+      </div>
     );
   }