refactor: 💄 update the UI for the controls and add nuxt UI

app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    primary: "fuchsia",
+    gray: "cool",
+  },
+});

nuxt.config.ts

@@ -9,9 +9,10 @@ export default defineNuxtConfig({
     },
   },
 
-  modules: ["@nuxtjs/tailwindcss"],
   runtimeConfig: {
     turnID: "",
     turnToken: "",
   },
-});
+
+  modules: ["@nuxt/ui"],
+});

package.json

@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@nuxt/ui": "2.20.0",
     "nuxt": "^3.14.159",
     "simple-peer": "^9.11.1",
     "vue": "latest",
@@ -18,7 +19,6 @@
   "packageManager": "[email protected]+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b",
   "devDependencies": {
     "@flydotio/dockerfile": "^0.5.9",
-    "@nuxtjs/tailwindcss": "^6.12.2",
     "@types/simple-peer": "^9.11.8"
   }
 }

pages/index.vue

@@ -1,32 +1,32 @@
 <template>
   <div class="flex items-center flex-col justify-center h-screen px-6">
     <h1 class="text-2xl md:text-4xl py-4">Welcome to NK chat</h1>
-    <div class="flex flex-col gap-4 text-center">
-      <button @click="joinRoom" class="mr-2 py-2 px-2 border-2">
-        Create room
-      </button>
+    <div class="flex flex-col gap-6 text-center">
+      <UButton block @click="joinRoom"> Create new room </UButton>
 
       <hr />
 
       <form action="" class="flex flex-col gap-2">
         <label for="roomLink"
           >Enter room link
-          <input
-            class="w-full p-1 border-b-2 bg-gray-100"
+          <UInput
+            class="my-1 w-full p-1"
+            size="sm"
             type="text"
             name="roomLink"
             id="roomLink"
             required
             v-model="roomLink"
           />
         </label>
-        <button
-          class="py-2 px-2 border-2"
+        <UButton
+          block
+          variant="outline"
           @click.prevent="joinRoom"
           type="submit"
         >
           Join
-        </button>
+        </UButton>
       </form>
     </div>
   </div>

pages/join.vue

@@ -4,22 +4,16 @@
     <form action="" class="flex flex-col gap-2">
       <label for="username"
         >Enter your display name
-        <input
-          class="w-full p-1 border-b-2 bg-gray-100"
+        <UInput
+          class="w-full p-1"
           type="text"
           name="username"
           id="username"
           required
           v-model="username"
         />
       </label>
-      <button
-        @click.prevent="enterRoom"
-        class="py-2 px-2 border-2"
-        type="submit"
-      >
-        Join
-      </button>
+      <UButton block @click.prevent="enterRoom" type="submit"> Join </UButton>
     </form>
   </div>
 </template>