Adjust verified identity copy

frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue

@@ -44,13 +44,7 @@
             {{ props.identity.platform }}
           </p>
         </div>
-        <lf-tooltip v-if="props.identity.verified" content="Verified identity">
-          <lf-icon
-            name="verified-badge-line"
-            :size="16"
-            class="ml-1 text-primary-500"
-          />
-        </lf-tooltip>
+        <lf-verified-identity-badge v-if="props.identity.verified" />
       </div>
       <p v-if="props.identity.platforms && CrowdIntegrations.getPlatformsLabel(props.identity.platforms)" class="text-tiny text-gray-400 pt-1.5">
         Source: {{ CrowdIntegrations.getPlatformsLabel(props.identity.platforms) }}
@@ -125,6 +119,7 @@ import { useContributorStore } from '@/modules/contributor/store/contributor.sto
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import { computed, ref } from 'vue';
+import LfVerifiedIdentityBadge from '@/shared/modules/identities/components/verified-identity-badge.vue';
 
 const props = defineProps<{
   identity: ContributorIdentity,

frontend/src/modules/organization/components/details/identity/organization-details-identity-item.vue

@@ -42,13 +42,7 @@
             {{ props.identity.handle ?? props.identity.value }}
           </a>
         </div>
-        <lf-tooltip v-if="props.identity.verified" content="Verified identity">
-          <lf-icon
-            name="verified-badge-line"
-            :size="16"
-            class="ml-1 text-primary-500"
-          />
-        </lf-tooltip>
+        <lf-verified-identity-badge v-if="props.identity.verified" />
       </div>
     </div>
 
@@ -98,6 +92,7 @@ import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import { ref } from 'vue';
 import { Organization, OrganizationIdentity } from '@/modules/organization/types/Organization';
 import { useOrganizationStore } from '@/modules/organization/store/pinia';
+import LfVerifiedIdentityBadge from '@/shared/modules/identities/components/verified-identity-badge.vue';
 
 const props = defineProps<{
   identity: OrganizationIdentity,

frontend/src/modules/organization/components/organization-manage-domains-drawer.vue

@@ -13,11 +13,7 @@
               <div class="flex-grow">
                 <p class="text-xs font-medium gap-1 flex items-center">
                   <span>{{ identity.value }}</span>
-                  <span v-if="identity.verified">
-                    <el-tooltip placement="top" content="Verified identity">
-                      <i class="ri-verified-badge-fill text-primary-500" />
-                    </el-tooltip>
-                  </span>
+                  <lf-verified-identity-badge v-if="identity.verified" />
                 </p>
                 <p class="mt-0.5 text-tiny text-gray-400">
                   Source: {{ platformLabel(identity.platforms) }}
@@ -111,6 +107,7 @@ import { MemberIdentity } from '@/modules/member/types/Member';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import LfDropdownSeparator from '@/ui-kit/dropdown/DropdownSeparator.vue';
 import AppSvg from '@/shared/svg/svg.vue';
+import LfVerifiedIdentityBadge from '@/shared/modules/identities/components/verified-identity-badge.vue';
 
 const props = defineProps<{
   modelValue: boolean,

frontend/src/modules/organization/components/view/_aside/_aside-identities-extra.vue

@@ -41,11 +41,8 @@
               :href="emailIdentity.link ?? undefined"
             >
               <span>{{ emailIdentity.handle }}</span>
-              <span v-if="emailIdentity.verified">
-                <el-tooltip placement="top" content="Verified identity">
-                  <i class="ri-verified-badge-fill text-primary-500" />
-                </el-tooltip>
-              </span></a>
+              <lf-verified-identity-badge v-if="emailIdentity.verified" />
+            </a>
           </div>
         </el-tooltip>
       </div>
@@ -106,11 +103,7 @@
               :href="domainIdentity.link ?? undefined"
             >
               <span>{{ domainIdentity.handle }}</span>
-              <span v-if="domainIdentity.verified">
-                <el-tooltip placement="top" content="Verified identity">
-                  <i class="ri-verified-badge-fill text-primary-500" />
-                </el-tooltip>
-              </span>
+              <lf-verified-identity-badge v-if="domainIdentity.verified" />
             </a>
           </div>
         </el-tooltip>
@@ -165,11 +158,8 @@
               :href="affiliatedProfileIdentity.link ?? undefined"
             >
               <span>{{ affiliatedProfileIdentity.handle }}</span>
-              <span v-if="affiliatedProfileIdentity.verified">
-                <el-tooltip placement="top" content="Verified identity">
-                  <i class="ri-verified-badge-fill text-primary-500" />
-                </el-tooltip>
-              </span></a>
+              <lf-verified-identity-badge v-if="affiliatedProfileIdentity.verified" />
+            </a>
           </div>
         </el-tooltip>
       </div>
@@ -253,6 +243,7 @@ import {
 } from 'vue';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
+import LfVerifiedIdentityBadge from '@/shared/modules/identities/components/verified-identity-badge.vue';
 
 const props = defineProps<{
   emails: {

frontend/src/shared/modules/identities/components/emails-vertical-list.vue

@@ -40,11 +40,7 @@
                   <i class="ri-shining-fill text-sm" :class="isEnrichment(identity.platforms) ? 'text-purple-400' : 'text-gray-300'" />
                 </el-tooltip>
               </div>
-              <div v-if="identity.verified" class="pl-1">
-                <el-tooltip placement="top" content="Verified identity">
-                  <i class="ri-verified-badge-fill text-primary-500" />
-                </el-tooltip>
-              </div>
+              <lf-verified-identity-badge v-if="identity.verified" />
             </div>
           </template>
         </div>
@@ -57,6 +53,7 @@
 import AppPlatform from '@/shared/modules/platform/components/platform.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import { computed } from 'vue';
+import LfVerifiedIdentityBadge from '@/shared/modules/identities/components/verified-identity-badge.vue';
 
 const props = defineProps<{
   emails: {

frontend/src/shared/modules/identities/components/identities-vertical-list.vue

@@ -50,11 +50,7 @@
                     {{ handle }}
                   </component>
 
-                  <div v-if="verified" class="pl-1">
-                    <el-tooltip placement="top" content="Verified identity">
-                      <i class="ri-verified-badge-fill text-primary-500" />
-                    </el-tooltip>
-                  </div>
+                  <lf-verified-identity-badge v-if="verified" />
                 </div>
 
                 <span
@@ -90,6 +86,7 @@ import AppPlatform from '@/shared/modules/platform/components/platform.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import { computed, ref } from 'vue';
 import { Platform } from '@/shared/modules/platform/types/Platform';
+import LfVerifiedIdentityBadge from '@/shared/modules/identities/components/verified-identity-badge.vue';
 
 const props = defineProps<{
   identities: {

frontend/src/shared/modules/identities/components/verified-identity-badge.vue

@@ -0,0 +1,27 @@
+<template>
+  <!-- Once we implement our own popover component, we should use the lf-tooltip instead of <el-tooltip>
+  Currently, the lf-tooltip is not working as expected, due to z-index issues.
+  -->
+  <el-tooltip placement="top" popper-class="!bg-gray-900 !py-1">
+    <template #content>
+      <span class="text-2xs flex flex-col text-center max-w-55">
+        <span class="font-semibold text-white">
+          Verified identity
+        </span>
+        <span class="text-gray-300">
+          Identities from connected integrations are automatically verified.
+        </span>
+      </span>
+    </template>
+
+    <lf-icon
+      name="verified-badge-line"
+      :size="16"
+      class="ml-1 text-primary-500"
+    />
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+</script>