forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix(ui): make all icons inline-block by default (#652)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
rygrit
Daniel Roe
and committed by
GitHub
6c62d945
cdd8d196
+56
-62
+1
-1
app/components/CollapsibleSection.vue
+1
-1
app/components/CollapsibleSection.vue
···
109
109
>
110
110
{{ title }}
111
111
<span
112
-
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
112
+
class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
113
113
aria-hidden="true"
114
114
/>
115
115
</a>
+4
-4
app/components/Header/ConnectorModal.vue
+4
-4
app/components/Header/ConnectorModal.vue
···
119
119
class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
120
120
@click="copy('pnpm npmx-connector')"
121
121
>
122
-
<span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
123
-
<span v-else class="i-carbon:checkmark block w-5 h-5 text-green-500" aria-hidden="true" />
122
+
<span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
123
+
<span v-else class="i-carbon:checkmark w-5 h-5 text-green-500" aria-hidden="true" />
124
124
</button>
125
125
</div>
126
126
···
141
141
class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
142
142
@click="copyCommand"
143
143
>
144
-
<span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
144
+
<span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
145
145
<span
146
146
v-else
147
-
class="i-carbon:checkmark block w-5 h-5 text-green-500"
147
+
class="i-carbon:checkmark w-5 h-5 text-green-500"
148
148
aria-hidden="true"
149
149
/>
150
150
</button>
+1
-1
app/components/Header/MobileMenu.vue
+1
-1
app/components/Header/MobileMenu.vue
+1
-1
app/components/LicenseDisplay.vue
+1
-1
app/components/LicenseDisplay.vue
+1
-1
app/components/Modal.client.vue
+1
-1
app/components/Modal.client.vue
+4
-4
app/components/Org/MembersPanel.vue
+4
-4
app/components/Org/MembersPanel.vue
···
302
302
@click="refreshData"
303
303
>
304
304
<span
305
-
class="i-carbon:renew block w-4 h-4"
305
+
class="i-carbon:renew w-4 h-4"
306
306
:class="{ 'motion-safe:animate-spin': isLoading || isLoadingTeams }"
307
307
aria-hidden="true"
308
308
/>
···
391
391
<!-- Loading state -->
392
392
<div v-if="isLoading && memberList.length === 0" class="p-8 text-center">
393
393
<span
394
-
class="i-carbon:rotate-180 block w-5 h-5 text-fg-muted animate-spin mx-auto"
394
+
class="i-carbon:rotate-180 w-5 h-5 text-fg-muted animate-spin mx-auto"
395
395
aria-hidden="true"
396
396
/>
397
397
<p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.members.loading') }}</p>
···
470
470
:aria-label="$t('org.members.remove_from_org', { name: member.name })"
471
471
@click="handleRemoveMember(member.name)"
472
472
>
473
-
<span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
473
+
<span class="i-carbon:close w-4 h-4" aria-hidden="true" />
474
474
</button>
475
475
</div>
476
476
</div>
···
549
549
:aria-label="$t('org.members.cancel_add')"
550
550
@click="showAddMember = false"
551
551
>
552
-
<span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
552
+
<span class="i-carbon:close w-4 h-4" aria-hidden="true" />
553
553
</button>
554
554
</div>
555
555
</form>
+6
-6
app/components/Org/OperationsQueue.vue
+6
-6
app/components/Org/OperationsQueue.vue
···
141
141
:aria-label="$t('operations.queue.refresh')"
142
142
@click="refreshState"
143
143
>
144
-
<span class="i-carbon:renew block w-4 h-4" aria-hidden="true" />
144
+
<span class="i-carbon:renew w-4 h-4" aria-hidden="true" />
145
145
</button>
146
146
</div>
147
147
</div>
···
213
213
:aria-label="$t('operations.queue.approve_operation')"
214
214
@click="approveOperation(op.id)"
215
215
>
216
-
<span class="i-carbon:checkmark block w-4 h-4" aria-hidden="true" />
216
+
<span class="i-carbon:checkmark w-4 h-4" aria-hidden="true" />
217
217
</button>
218
218
<button
219
219
v-if="op.status !== 'running'"
···
222
222
:aria-label="$t('operations.queue.remove_operation')"
223
223
@click="removeOperation(op.id)"
224
224
>
225
-
<span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
225
+
<span class="i-carbon-close w-4 h-4" aria-hidden="true" />
226
226
</button>
227
227
</div>
228
228
</li>
···
235
235
role="alert"
236
236
>
237
237
<div class="flex items-center gap-2 mb-2">
238
-
<span class="i-carbon:locked block w-4 h-4 text-amber-400 shrink-0" aria-hidden="true" />
238
+
<span class="i-carbon:locked w-4 h-4 text-amber-400 shrink-0" aria-hidden="true" />
239
239
<span class="font-mono text-sm text-amber-400">
240
240
{{ $t('operations.queue.otp_prompt') }}
241
241
</span>
···
295
295
class="flex items-center gap-2 font-mono text-xs text-fg-muted cursor-pointer hover:text-fg transition-colors duration-200 select-none"
296
296
>
297
297
<span
298
-
class="i-carbon:chevron-right rtl-flip block w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
298
+
class="i-carbon:chevron-right rtl-flip w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
299
299
aria-hidden="true"
300
300
/>
301
301
{{ $t('operations.queue.log') }} ({{ completedOperations.length }})
···
331
331
:aria-label="$t('operations.queue.remove_from_log')"
332
332
@click="removeOperation(op.id)"
333
333
>
334
-
<span class="i-carbon:close block w-3 h-3" aria-hidden="true" />
334
+
<span class="i-carbon:close w-3 h-3" aria-hidden="true" />
335
335
</button>
336
336
</li>
337
337
</ul>
+6
-6
app/components/Org/TeamsPanel.vue
+6
-6
app/components/Org/TeamsPanel.vue
···
272
272
@click="loadTeams"
273
273
>
274
274
<span
275
-
class="i-carbon:renew block w-4 h-4"
275
+
class="i-carbon:renew w-4 h-4"
276
276
:class="{ 'animate-spin': isLoadingTeams }"
277
277
aria-hidden="true"
278
278
/>
···
328
328
<!-- Loading state -->
329
329
<div v-if="isLoadingTeams && teams.length === 0" class="p-8 text-center">
330
330
<span
331
-
class="i-carbon:rotate-180 block w-5 h-5 text-fg-muted motion-safe:animate-spin mx-auto"
331
+
class="i-carbon:rotate-180 w-5 h-5 text-fg-muted motion-safe:animate-spin mx-auto"
332
332
aria-hidden="true"
333
333
/>
334
334
<p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.teams.loading') }}</p>
···
398
398
:aria-label="$t('org.teams.delete_team', { name: teamName })"
399
399
@click.stop="handleDestroyTeam(teamName)"
400
400
>
401
-
<span class="i-carbon:trash-can block w-4 h-4" aria-hidden="true" />
401
+
<span class="i-carbon:trash-can w-4 h-4" aria-hidden="true" />
402
402
</button>
403
403
</div>
404
404
···
432
432
:aria-label="$t('org.teams.remove_user', { user })"
433
433
@click="handleRemoveUser(teamName, user)"
434
434
>
435
-
<span class="i-carbon:close block w-3.5 h-3.5" aria-hidden="true" />
435
+
<span class="i-carbon:close w-3.5 h-3.5" aria-hidden="true" />
436
436
</button>
437
437
</li>
438
438
</ul>
···
468
468
:aria-label="$t('org.teams.cancel_add_user')"
469
469
@click="showAddUserFor = null"
470
470
>
471
-
<span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
471
+
<span class="i-carbon:close w-4 h-4" aria-hidden="true" />
472
472
</button>
473
473
</form>
474
474
</div>
···
525
525
:aria-label="$t('org.teams.cancel_create')"
526
526
@click="showCreateTeam = false"
527
527
>
528
-
<span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
528
+
<span class="i-carbon:close w-4 h-4" aria-hidden="true" />
529
529
</button>
530
530
</form>
531
531
</div>
+4
-4
app/components/Package/AccessControls.vue
+4
-4
app/components/Package/AccessControls.vue
···
163
163
@click="loadCollaborators"
164
164
>
165
165
<span
166
-
class="i-carbon-renew block w-3.5 h-3.5"
166
+
class="i-carbon-renew w-3.5 h-3.5"
167
167
:class="{ 'motion-safe:animate-spin': isLoadingCollaborators }"
168
168
aria-hidden="true"
169
169
/>
···
173
173
<!-- Loading state -->
174
174
<div v-if="isLoadingCollaborators && collaboratorList.length === 0" class="py-4 text-center">
175
175
<span
176
-
class="i-carbon-rotate-180 block w-4 h-4 text-fg-muted animate-spin mx-auto"
176
+
class="i-carbon-rotate-180 w-4 h-4 text-fg-muted animate-spin mx-auto"
177
177
aria-hidden="true"
178
178
/>
179
179
</div>
···
229
229
:aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
230
230
@click="handleRevokeAccess(collab.name)"
231
231
>
232
-
<span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
232
+
<span class="i-carbon-close w-3.5 h-3.5" aria-hidden="true" />
233
233
</button>
234
234
<span v-else class="text-xs text-fg-subtle"> {{ $t('package.access.owner') }} </span>
235
235
</li>
···
291
291
:aria-label="$t('package.access.cancel_grant')"
292
292
@click="showGrantAccess = false"
293
293
>
294
-
<span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
294
+
<span class="i-carbon-close w-4 h-4" aria-hidden="true" />
295
295
</button>
296
296
</div>
297
297
</form>
+2
-2
app/components/Package/Card.vue
+2
-2
app/components/Package/Card.vue
···
118
118
<div class="flex items-center gap-1.5">
119
119
<dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
120
120
<dd class="flex items-center gap-1.5">
121
-
<span class="i-carbon:chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
121
+
<span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
122
122
<span class="font-mono">{{ $n(result.downloads.weekly) }}/w</span>
123
123
</dd>
124
124
</div>
···
152
152
v-if="result.downloads?.weekly"
153
153
class="text-fg-subtle gap-2 flex items-center justify-end"
154
154
>
155
-
<span class="i-carbon:chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
155
+
<span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
156
156
<span class="font-mono text-xs">
157
157
{{ $n(result.downloads.weekly) }} {{ $t('common.per_week') }}
158
158
</span>
+3
-3
app/components/Package/Dependencies.vue
+3
-3
app/components/Package/Dependencies.vue
···
95
95
:title="getOutdatedTooltip(outdatedDeps[dep], $t)"
96
96
aria-hidden="true"
97
97
>
98
-
<span class="i-carbon:warning-alt w-3 h-3 block" />
98
+
<span class="i-carbon:warning-alt w-3 h-3" />
99
99
</span>
100
100
<NuxtLink
101
101
v-if="getVulnerableDepInfo(dep)"
···
107
107
:class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
108
108
:title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
109
109
>
110
-
<span class="i-carbon:security w-3 h-3 block" aria-hidden="true" />
110
+
<span class="i-carbon:security w-3 h-3" aria-hidden="true" />
111
111
<span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
112
112
</NuxtLink>
113
113
<NuxtLink
···
119
119
class="shrink-0 text-purple-500"
120
120
:title="getDeprecatedDepInfo(dep)!.message"
121
121
>
122
-
<span class="i-carbon-warning-hex w-3 h-3 block" aria-hidden="true" />
122
+
<span class="i-carbon-warning-hex w-3 h-3" aria-hidden="true" />
123
123
<span class="sr-only">{{ $t('package.deprecated.label') }}</span>
124
124
</NuxtLink>
125
125
<NuxtLink
+1
-1
app/components/Package/DownloadAnalytics.vue
+1
-1
app/components/Package/DownloadAnalytics.vue
+1
-1
app/components/Package/InstallScripts.vue
+1
-1
app/components/Package/InstallScripts.vue
+1
-1
app/components/Package/ListControls.vue
+1
-1
app/components/Package/ListControls.vue
+3
-3
app/components/Package/Maintainers.vue
+3
-3
app/components/Package/Maintainers.vue
···
176
176
>
177
177
{{ $t('package.maintainers.title') }}
178
178
<span
179
-
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
179
+
class="i-carbon-link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
180
180
aria-hidden="true"
181
181
/>
182
182
</a>
···
230
230
"
231
231
@click="handleRemoveOwner(maintainer.name)"
232
232
>
233
-
<span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
233
+
<span class="i-carbon-close w-3.5 h-3.5" aria-hidden="true" />
234
234
</button>
235
235
</li>
236
236
</ul>
···
280
280
:aria-label="$t('package.maintainers.cancel_add')"
281
281
@click="showAddOwner = false"
282
282
>
283
-
<span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
283
+
<span class="i-carbon-close w-4 h-4" aria-hidden="true" />
284
284
</button>
285
285
</form>
286
286
</div>
+4
-4
app/components/Package/SkillsModal.vue
+4
-4
app/components/Package/SkillsModal.vue
···
184
184
<!-- File counts & warnings -->
185
185
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
186
186
<span v-if="skill.fileCounts?.scripts" class="text-fg-subtle">
187
-
<span class="i-carbon:script size-3 inline-block align-[-2px] me-0.5" />{{
187
+
<span class="i-carbon:script size-3 align-[-2px] me-0.5" />{{
188
188
$t(
189
189
'package.skills.file_counts.scripts',
190
190
{ count: skill.fileCounts.scripts },
···
193
193
}}
194
194
</span>
195
195
<span v-if="skill.fileCounts?.references" class="text-fg-subtle">
196
-
<span class="i-carbon:document size-3 inline-block align-[-2px] me-0.5" />{{
196
+
<span class="i-carbon:document size-3 align-[-2px] me-0.5" />{{
197
197
$t(
198
198
'package.skills.file_counts.refs',
199
199
{ count: skill.fileCounts.references },
···
202
202
}}
203
203
</span>
204
204
<span v-if="skill.fileCounts?.assets" class="text-fg-subtle">
205
-
<span class="i-carbon:image size-3 inline-block align-[-2px] me-0.5" />{{
205
+
<span class="i-carbon:image size-3 align-[-2px] me-0.5" />{{
206
206
$t(
207
207
'package.skills.file_counts.assets',
208
208
{ count: skill.fileCounts.assets },
···
212
212
</span>
213
213
<template v-for="warning in skill.warnings" :key="warning.message">
214
214
<span class="text-amber-500">
215
-
<span class="i-carbon:warning size-3 inline-block align-[-2px] me-0.5" />{{
215
+
<span class="i-carbon:warning size-3 align-[-2px] me-0.5" />{{
216
216
warning.message
217
217
}}
218
218
</span>
+1
-4
app/components/Terminal/Install.vue
+1
-4
app/components/Terminal/Install.vue
···
153
153
class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
154
154
:title="$t('package.get_started.view_types', { package: typesPackageName })"
155
155
>
156
-
<span
157
-
class="i-carbon:arrow-right rtl-flip w-3 h-3 inline-block align-middle"
158
-
aria-hidden="true"
159
-
/>
156
+
<span class="i-carbon:arrow-right rtl-flip w-3 h-3 align-middle" aria-hidden="true" />
160
157
<span class="sr-only">View {{ typesPackageName }}</span>
161
158
</NuxtLink>
162
159
</div>
+1
-4
app/components/UserCombobox.vue
+1
-4
app/components/UserCombobox.vue
···
204
204
role="status"
205
205
aria-live="polite"
206
206
>
207
-
<span
208
-
class="i-carbon:information w-3 h-3 inline-block me-1 align-middle"
209
-
aria-hidden="true"
210
-
/>
207
+
<span class="i-carbon:information w-3 h-3 me-1 align-middle" aria-hidden="true" />
211
208
{{
212
209
$t('user.combobox.press_enter_to_add', {
213
210
username: inputValue.trim().replace(/^@/, ''),
+2
-2
app/components/compare/PackageSelector.vue
+2
-2
app/components/compare/PackageSelector.vue
···
75
75
:aria-label="$t('compare.selector.remove_package', { package: pkg })"
76
76
@click="removePackage(pkg)"
77
77
>
78
-
<span class="i-carbon:close block w-3.5 h-3.5" aria-hidden="true" />
78
+
<span class="i-carbon:close w-3.5 h-3.5" aria-hidden="true" />
79
79
</button>
80
80
</div>
81
81
</div>
···
90
90
class="absolute inset-is-3 top-1/2 -translate-y-1/2 text-fg-subtle"
91
91
aria-hidden="true"
92
92
>
93
-
<span class="i-carbon:search inline-block w-4 h-4" />
93
+
<span class="i-carbon:search w-4 h-4" />
94
94
</span>
95
95
<input
96
96
id="package-search"
+6
-9
app/pages/[...package].vue
+6
-9
app/pages/[...package].vue
···
783
783
class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
784
784
:title="$t('package.stats.view_dependency_graph')"
785
785
>
786
-
<span class="i-carbon:network-3 w-3.5 h-3.5 inline-block" aria-hidden="true" />
786
+
<span class="i-carbon:network-3 w-3.5 h-3.5" aria-hidden="true" />
787
787
<span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
788
788
</a>
789
789
···
795
795
class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
796
796
:title="$t('package.stats.inspect_dependency_tree')"
797
797
>
798
-
<span
799
-
class="i-solar:eye-scan-outline w-3.5 h-3.5 inline-block"
800
-
aria-hidden="true"
801
-
/>
798
+
<span class="i-solar:eye-scan-outline w-3.5 h-3.5" aria-hidden="true" />
802
799
<span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
803
800
</a>
804
801
</dd>
···
932
929
>
933
930
{{ $t('package.get_started.title') }}
934
931
<span
935
-
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
932
+
class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
936
933
aria-hidden="true"
937
934
/>
938
935
</a>
···
984
981
>
985
982
{{ $t('package.readme.title') }}
986
983
<span
987
-
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
984
+
class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
988
985
aria-hidden="true"
989
986
/>
990
987
</a>
···
1022
1019
>
1023
1020
{{ $t('package.keywords_title') }}
1024
1021
<span
1025
-
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
1022
+
class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
1026
1023
aria-hidden="true"
1027
1024
/>
1028
1025
</a>
···
1072
1069
>
1073
1070
{{ $t('package.compatibility') }}
1074
1071
<span
1075
-
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
1072
+
class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
1076
1073
aria-hidden="true"
1077
1074
/>
1078
1075
</a>