davidwindham.com / npmx.dev
forked from npmx.dev/npmx.dev
[READ-ONLY] a fast, modern browser for the npm registry
fork atom

feat: switch dependency icons to be tappable tooltips (#1471)

authored by

James Garbutt and committed by
GitHub 1e45cdca 49a84739

+16 -6
+16 -6
app/components/Package/Dependencies.vue
··· 120 120 <span class="flex items-center gap-1 max-w-[40%]" dir="ltr"> 121 121 <TooltipApp 122 122 v-if="outdatedDeps[dep]" 123 - class="shrink-0 p-2 -m-2" 123 + class="shrink-0" 124 124 :class="getVersionClass(outdatedDeps[dep])" 125 - aria-hidden="true" 126 125 :text="getOutdatedTooltip(outdatedDeps[dep], $t)" 127 126 > 128 - <span class="i-lucide:circle-alert w-3 h-3" /> 127 + <button 128 + type="button" 129 + class="p-2 -m-2" 130 + :aria-label="getOutdatedTooltip(outdatedDeps[dep], $t)" 131 + > 132 + <span class="i-lucide:circle-alert w-3 h-3" aria-hidden="true" /> 133 + </button> 129 134 </TooltipApp> 130 135 <TooltipApp 131 136 v-if="replacementDeps[dep]" 132 - class="shrink-0 p-2 -m-2 text-amber-700 dark:text-amber-500" 133 - aria-hidden="true" 137 + class="shrink-0 text-amber-700 dark:text-amber-500" 134 138 :text="$t('package.dependencies.has_replacement')" 135 139 > 136 - <span class="i-carbon:idea w-3 h-3" /> 140 + <button 141 + type="button" 142 + class="p-2 -m-2" 143 + :aria-label="$t('package.dependencies.has_replacement')" 144 + > 145 + <span class="i-lucide:lightbulb w-3 h-3" aria-hidden="true" /> 146 + </button> 137 147 </TooltipApp> 138 148 <LinkBase 139 149 v-if="getVulnerableDepInfo(dep)"