Add missing interaction to trial tag (#366)

CrowdDotDev · Dec 19, 2022 · aa3dffb · aa3dffb
1 parent a3bcfc9
commit aa3dffb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/frontend/src/assets/scss/badge.scss b/frontend/src/assets/scss/badge.scss
@@ -43,5 +43,9 @@
 
   &--light-yellow {
     @apply bg-yellow-50 text-yellow-600;
+
+    &:hover {
+      @apply bg-yellow-100;
+    }
   }
 }
diff --git a/frontend/src/modules/layout/components/workspace-dropdown.vue b/frontend/src/modules/layout/components/workspace-dropdown.vue
@@ -44,13 +44,21 @@
                   </div>
                   <div class="text-gray-500 text-2xs">
                     {{ getPlan(currentTenant.plan) }}
-                    <span
-                      v-if="getTrialDate(currentTenant)"
-                      class="badge badge--xs badge--light-yellow ml-1"
-                      >{{
-                        getTrialDate(currentTenant)
-                      }}</span
+                    <router-link
+                      :to="{
+                        name: 'settings',
+                        query: { activeTab: 'plans' }
+                      }"
+                      @click.stop
                     >
+                      <span
+                        v-if="getTrialDate(currentTenant)"
+                        class="badge badge--xs badge--light-yellow ml-1 hover:cursor-pointer"
+                        >{{
+                          getTrialDate(currentTenant)
+                        }}</span
+                      >
+                    </router-link>
                   </div>
                 </div>
               </div>
@@ -129,7 +137,7 @@ export default {
 <script setup>
 import { useStore } from 'vuex'
 import { computed, onMounted, ref, watch } from 'vue'
-import AppTenantListDrawer from '@/modules/tenant/components/tenant-list-drawer'
+import AppTenantListDrawer from '@/modules/tenant/components/tenant-list-drawer.vue'
 import config from '@/config'
 import { getTrialDate } from '@/utils/date'