Improve add team page

simpleanalytics · Nov 13, 2024 · 034034c · 034034c
1 parent 2f17ad6
commit 034034c
Show file tree

Hide file tree

Showing 14 changed files with 129 additions and 50 deletions.
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -36,10 +36,14 @@ summary {
 a:not([class*="text-"]):not([data-no-style]):not(.button.primary),
 a strong,
 a code,
-.text-link {
+.text-link-strong {
   @apply text-red-500 hover:text-red-600 dark:text-red-600 hover:dark:text-red-700;
 }
 
+.text-link {
+  @apply text-blue-500 hover:text-blue-600 dark:text-blue-600 hover:dark:text-blue-700;
+}
+
 .button {
   @apply inline-flex items-center justify-center px-4 py-2 border-2 border-red-500 dark:border-red-600 text-base font-medium rounded-full text-red-500 bg-white dark:bg-transparent dark:text-red-600 dark:hover:text-red-600 hover:bg-gray-50 dark:hover:bg-transparent hover:text-red-600  hover:border-red-600 dark:hover:border-red-700 text-center;
 }

diff --git a/components/Popover.vue b/components/Popover.vue
@@ -0,0 +1,67 @@
+<template>
+  <transition name="fade">
+    <div
+      v-if="modelValue"
+      class="fixed inset-0 z-[9998] flex items-center justify-center bg-black/30"
+      @click.self="close"
+    >
+      <div
+        class="relative w-full max-w-2xl rounded-lg bg-gray-100 dark:bg-gray-700 p-6 shadow-xl"
+      >
+        <!-- Close button -->
+        <button
+          @click="close"
+          class="group absolute right-0 top-0 px-2 py-2"
+          aria-label="Close popover"
+        >
+          <XMarkIcon
+            class="h-6 w-6 stroke-gray-400 dark:stroke-blue-500 group-hover:stroke-blue-500 dark:group-hover:stroke-blue-500"
+          />
+        </button>
+
+        <!-- Scrollable Content -->
+        <div class="mt-4 overflow-y-auto max-h-[calc(90vh-6rem)]">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const close = () => emit("update:modelValue", false);
+
+onMounted(() => {
+  const handleEsc = (e) => {
+    if (e.key === "Escape" && props.modelValue) close();
+  };
+
+  document.addEventListener("keydown", handleEsc);
+  onBeforeUnmount(() => {
+    document.removeEventListener("keydown", handleEsc);
+  });
+});
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/components/SignupStep3.vue b/components/SignupStep3.vue
@@ -6,13 +6,15 @@
       <SignupErrors :errors="errors" :other-errors="nonTeamMembersErrors" />
 
       <div v-for="(member, index) in teamMembers" :key="index">
-        <label :for="'member-' + index" class="block text-sm font-medium">
-          Email and role of your
-          <span v-if="teamMembers.length > 1">{{ textNumber(index + 1) }}</span>
-          colleague
-        </label>
-        <div class="mt-1 flex items-start space-x-2">
+        <div class="mt-1 flex items-end space-x-2">
           <div class="flex-1">
+            <label :for="'member-' + index" class="block text-sm font-medium">
+              Email and role of your
+              <span v-if="teamMembers.length > 1">{{
+                textNumber(index + 1)
+              }}</span>
+              colleague
+            </label>
             <input
               v-model="member.email"
               :id="'member-' + index"
@@ -37,6 +39,12 @@
               class="hidden lg:block absolute ml-4 pb-3 -translate-y-full w-20 stroke-gray-300 dark:stroke-gray-500"
             />
 
+            <a
+              class="block text-right text-sm text-link"
+              @click="showRolesExplainer = !showRolesExplainer"
+            >
+              What are these roles?
+            </a>
             <select
               :value="member.role"
               :id="'role-' + index"
@@ -77,7 +85,7 @@
         </div>
       </div>
 
-      <div class="flex mt-8">
+      <div class="flex items-center mt-8">
         <button
           @click="addMember"
           type="button"
@@ -89,39 +97,33 @@
           <span v-else>Add another colleague</span>
         </button>
 
-        <div class="flex items-center ml-auto">
-          <button
-            type="submit"
-            class="flex justify-center button"
-            :disabled="signupStore.isLoading"
-          >
-            <CheckIcon class="h-5 w-5 mr-2" />
-            Complete Signup
-          </button>
+        <button
+          @click="skipAddingTeam"
+          class="flex justify-center text-gray-500 hover:underline ml-4"
+          :disabled="signupStore.isLoading"
+        >
+          skip adding team
+        </button>
+      </div>
 
-          <ChartLoader
-            v-if="signupStore.isLoading"
-            class="ml-3 h-8 text-red-500 dark:text-red-600"
-          />
-        </div>
+      <div class="flex items-center !mt-12 ml-auto">
+        <button
+          type="submit"
+          class="flex justify-center button"
+          :disabled="signupStore.isLoading"
+        >
+          <CheckIcon class="h-5 w-5 mr-2" />
+          Complete Signup
+        </button>
+
+        <ChartLoader
+          v-if="signupStore.isLoading"
+          class="ml-3 h-8 text-red-500 dark:text-red-600"
+        />
       </div>
     </form>
-    <button
-      @click="showRolesExplainer = !showRolesExplainer"
-      type="button"
-      class="mt-4 text-sm text-blue-500"
-    >
-      <span class="underline">What are these roles?</span>
-      <ChevronDoubleDownIcon
-        class="h-4 w-4 inline ml-1 transition-transform duration-500"
-        :class="showRolesExplainer ? 'rotate-180' : 'rotate-0'"
-      />
-    </button>
 
-    <div
-      v-if="showRolesExplainer"
-      class="mt-4 p-4 pb-2 border dark:border-none rounded-lg dark:bg-gray-900"
-    >
+    <Popover v-model="showRolesExplainer">
       <div v-for="role in rolesWithDescriptions" :key="role.value" class="mb-4">
         <h3 class="font-medium mb-2">{{ role.label }}</h3>
         <p class="text-sm leading-loose">
@@ -140,7 +142,7 @@
           />
         </a>
       </p>
-    </div>
+    </Popover>
   </div>
 </template>
 
@@ -159,6 +161,7 @@ import { useFieldErrors } from "~/composables/useFieldErrors";
 import AddADeveloperHere from "./icons/AddADeveloperHere.vue";
 import SignupErrors from "./SignupErrors.vue";
 import ChartLoader from "./ChartLoader.vue";
+import Popover from "./Popover.vue";
 
 const router = useRouter();
 const signupStore = useSignupStore();
@@ -206,6 +209,11 @@ const submitTeamMembers = () => {
   emit("next", { teamMembers: teamMembers.value });
 };
 
+const skipAddingTeam = () => {
+  signupStore.clearError("teamMembers");
+  emit("next", { teamMembers: [] });
+};
+
 const textNumber = (number) => {
   if (number > 10) {
     if (number % 10 === 1) {

diff --git a/pages/case-studies/index.vue b/pages/case-studies/index.vue
@@ -29,7 +29,7 @@
         "
         class="group bg-white dark:bg-gray-700 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-red-500 dark:focus-within:ring-red-600 flex flex-col rounded-lg shadow dark:shadow-none"
       >
-        <h3 class="text-lg font-medium text-link">
+        <h3 class="text-lg font-medium text-link-strong">
           <ClientOnly
             v-if="
               article.locale !== locale && getFlagUrl(article.locale, LOCALES)

diff --git a/pages/glossary/[category]/index.vue b/pages/glossary/[category]/index.vue
@@ -34,7 +34,7 @@
         "
         class="group bg-white dark:bg-gray-700 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-red-500 dark:focus-within:ring-red-600 flex flex-col rounded-lg shadow dark:shadow-none"
       >
-        <h3 class="text-lg font-medium text-link">
+        <h3 class="text-lg font-medium text-link-strong">
           {{ $t("glossary.key_terms_title") }} <Arrow />
         </h3>
         <p class="mt-2 text-sm text-gray-500 leading-relaxed">
@@ -58,7 +58,7 @@
         "
         class="group bg-white dark:bg-gray-700 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-red-500 dark:focus-within:ring-red-600 flex flex-col rounded-lg shadow dark:shadow-none"
       >
-        <h3 class="text-lg font-medium text-link">
+        <h3 class="text-lg font-medium text-link-strong">
           <ClientOnly
             v-if="
               article.locale !== locale && getFlagUrl(article.locale, LOCALES)

diff --git a/pages/glossary/[category]/key-terms/index.vue b/pages/glossary/[category]/key-terms/index.vue
@@ -36,7 +36,7 @@
         "
         class="group bg-white dark:bg-gray-700 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-red-500 dark:focus-within:ring-red-600 flex flex-col rounded-lg shadow dark:shadow-none"
       >
-        <h3 class="text-lg font-medium text-link">
+        <h3 class="text-lg font-medium text-link-strong">
           <ClientOnly
             v-if="
               article.locale !== locale && getFlagUrl(article.locale, LOCALES)

diff --git a/pages/glossary/index.vue b/pages/glossary/index.vue
@@ -50,7 +50,7 @@
           </span>
         </div>
         <div class="mt-4">
-          <h3 class="text-lg font-medium text-link">
+          <h3 class="text-lg font-medium text-link-strong">
             {{ $t(action.titleTranslation) }} <Arrow />
           </h3>
           <p class="mt-2 text-sm text-gray-500">

diff --git a/pages/guides/index.vue b/pages/guides/index.vue
@@ -29,7 +29,7 @@
         "
         class="group bg-white dark:bg-gray-700 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-red-500 dark:focus-within:ring-red-600 flex flex-col rounded-lg shadow dark:shadow-none"
       >
-        <h3 class="text-lg font-medium text-link">
+        <h3 class="text-lg font-medium text-link-strong">
           <ClientOnly
             v-if="
               article.locale !== locale && getFlagUrl(article.locale, LOCALES)

diff --git a/pages/resources/alternatives/index.vue b/pages/resources/alternatives/index.vue
@@ -32,7 +32,7 @@
         "
         class="group bg-white dark:bg-gray-700 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-red-500 dark:focus-within:ring-red-600 flex flex-col rounded-lg shadow dark:shadow-none"
       >
-        <h3 class="text-lg font-medium text-link">
+        <h3 class="text-lg font-medium text-link-strong">
           <ClientOnly
             v-if="
               article.locale !== locale && getFlagUrl(article.locale, LOCALES)

diff --git a/pages/resources/analytics-pricing/index.vue b/pages/resources/analytics-pricing/index.vue
@@ -32,7 +32,7 @@
         "
         class="group bg-white dark:bg-gray-700 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-red-500 dark:focus-within:ring-red-600 flex flex-col rounded-lg shadow dark:shadow-none"
       >
-        <h3 class="text-lg font-medium text-link">
+        <h3 class="text-lg font-medium text-link-strong">
           <ClientOnly
             v-if="
               article.locale !== locale && getFlagUrl(article.locale, LOCALES)

diff --git a/pages/resources/analytics-review/index.vue b/pages/resources/analytics-review/index.vue
@@ -32,7 +32,7 @@
         "
         class="group bg-white dark:bg-gray-700 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-red-500 dark:focus-within:ring-red-600 flex flex-col rounded-lg shadow dark:shadow-none"
       >
-        <h3 class="text-lg font-medium text-link">
+        <h3 class="text-lg font-medium text-link-strong">
           <ClientOnly
             v-if="
               article.locale !== locale && getFlagUrl(article.locale, LOCALES)

diff --git a/pages/resources/comparisons/index.vue b/pages/resources/comparisons/index.vue
@@ -32,7 +32,7 @@
         "
         class="group bg-white dark:bg-gray-700 p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-red-500 dark:focus-within:ring-red-600 flex flex-col rounded-lg shadow dark:shadow-none"
       >
-        <h3 class="text-lg font-medium text-link">
+        <h3 class="text-lg font-medium text-link-strong">
           <ClientOnly
             v-if="
               article.locale !== locale && getFlagUrl(article.locale, LOCALES)

diff --git a/pages/resources/index.vue b/pages/resources/index.vue
@@ -49,7 +49,7 @@
           </span>
         </div>
         <div class="mt-4">
-          <h3 class="text-lg font-medium text-link">
+          <h3 class="text-lg font-medium text-link-strong">
             {{ $t(action.titleTranslation) }} <Arrow />
           </h3>
         </div>

diff --git a/pages/utm-builder/index.vue b/pages/utm-builder/index.vue
@@ -47,7 +47,7 @@
           </span>
         </div>
         <div class="mt-4">
-          <h3 class="text-lg font-medium text-link">
+          <h3 class="text-lg font-medium text-link-strong">
             {{ $t(action.titleTranslation) }} <Arrow />
           </h3>
           <p class="mt-2 text-sm text-gray-500">