feat: add invite page

app/javascript/dashboard/components/form/Input.vue

@@ -21,7 +21,7 @@
         'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
           !hasError,
         'px-3 py-3': spacing === 'base',
-        'px-3 py-2': spacing === 'compact',
+        'px-3 py-2 mb-0': spacing === 'compact',
       }"
       class="block w-full border-0 rounded-md shadow-sm outline-none appearance-none ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700"
       @input="onInput"

app/javascript/dashboard/routes/dashboard/start/InviteTeam.vue

@@ -5,46 +5,48 @@
     current-step="invite"
   >
     <section class="space-y-5">
-      <div class="space-y-2">
-        <div class="flex gap-2">
-          <form-input
-            v-model="emailToAdd"
-            name="email"
-            spacing="compact"
-            class="flex-grow"
-          />
-          <woot-button
-            variant="smooth"
-            color-scheme="secondary"
-            @click="pushEmail"
-          >
-            Add
-          </woot-button>
+      <div class="flex gap-2">
+        <form-input
+          v-model="emailToAdd"
+          name="email"
+          spacing="compact"
+          class="flex-grow"
+          @keyup.enter="pushEmail"
+        />
+        <woot-button
+          variant="smooth"
+          color-scheme="secondary"
+          @click="pushEmail"
+        >
+          Add
+        </woot-button>
+      </div>
+      <div
+        class="rounded-md min-h-[10rem] divide-y divide-slate-100"
+        :class="{
+          'border border-slate-200 border-dashed grid place-content-center':
+            emailsToInvite.length === 0,
+        }"
+      >
+        <div v-if="emailsToInvite.length === 0" class="px-5 py-5">
+          <p class="text-sm text-slate-400">No members to invite</p>
         </div>
         <div
-          class="rounded-lg min-h-[10rem] divide-y divide-slate-100"
-          :class="{
-            'border border-slate-200 border-dashed':
-              emailsToInvite.length === 0,
-          }"
+          v-for="email in emailsToInvite"
+          :key="email"
+          class="flex items-center justify-between gap-2 py-2 first:pt-0 last:pb-0"
         >
-          <div
-            v-for="email in emailsToInvite"
-            :key="email"
-            class="flex items-center justify-between gap-2 py-2 first:pt-0 last:pb-0"
-          >
-            <div class="flex items-center gap-2">
-              <thumbnail :username="email" size="30px" />
-              {{ email }}
-            </div>
-            <woot-button
-              variant="clear"
-              size="small"
-              color-scheme="alert"
-              icon="delete"
-              @click="emailsToInvite.splice(emailsToInvite.indexOf(email), 1)"
-            />
+          <div class="flex items-center gap-2">
+            <thumbnail :username="email" size="30px" />
+            {{ email }}
           </div>
+          <woot-button
+            variant="clear"
+            size="small"
+            color-scheme="alert"
+            icon="delete"
+            @click="emailsToInvite.splice(emailsToInvite.indexOf(email), 1)"
+          />
         </div>
       </div>
       <div class="space-y-2">