Skip to content

Commit 6c62d94

Browse files
RYGRITdanielroe
RYGRIT
and
danielroe
authored
fix(ui): make all icons inline-block by default (#652)
Co-authored-by: Daniel Roe <daniel@roe.dev>
1 parent cdd8d19 commit 6c62d94

21 files changed

+56
-62
lines changed

‎app/components/CollapsibleSection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ useHead({
109109
>
110110
{{ title }}
111111
<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"
113113
aria-hidden="true"
114114
/>
115115
</a>

‎app/components/Header/ConnectorModal.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,8 @@ function handleDisconnect() {
119119
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"
120120
@click="copy('pnpm npmx-connector')"
121121
>
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" />
124124
</button>
125125
</div>
126126

@@ -141,10 +141,10 @@ function handleDisconnect() {
141141
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"
142142
@click="copyCommand"
143143
>
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" />
145145
<span
146146
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"
148148
aria-hidden="true"
149149
/>
150150
</button>

‎app/components/Header/MobileMenu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ onUnmounted(deactivate)
9494
:aria-label="$t('common.close')"
9595
@click="closeMenu"
9696
>
97-
<span class="i-carbon:close block w-5 h-5" aria-hidden="true" />
97+
<span class="i-carbon:close w-5 h-5" aria-hidden="true" />
9898
</button>
9999
</div>
100100

‎app/components/LicenseDisplay.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
2828
</template>
2929
<span
3030
v-if="hasAnyValidLicense"
31-
class="i-carbon-scales w-3.5 h-3.5 text-fg-subtle flex-shrink-0 inline-block self-center"
31+
class="i-carbon-scales w-3.5 h-3.5 text-fg-subtle flex-shrink-0 self-center"
3232
aria-hidden="true"
3333
/>
3434
</span>

‎app/components/Modal.client.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ defineExpose({
4040
:aria-label="$t('common.close')"
4141
@click="handleModalClose"
4242
>
43-
<span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
43+
<span class="i-carbon-close w-5 h-5" aria-hidden="true" />
4444
</button>
4545
</div>
4646
<!-- Modal body content -->

‎app/components/Org/MembersPanel.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@ watch(lastExecutionTime, () => {
302302
@click="refreshData"
303303
>
304304
<span
305-
class="i-carbon:renew block w-4 h-4"
305+
class="i-carbon:renew w-4 h-4"
306306
:class="{ 'motion-safe:animate-spin': isLoading || isLoadingTeams }"
307307
aria-hidden="true"
308308
/>
@@ -391,7 +391,7 @@ watch(lastExecutionTime, () => {
391391
<!-- Loading state -->
392392
<div v-if="isLoading && memberList.length === 0" class="p-8 text-center">
393393
<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"
395395
aria-hidden="true"
396396
/>
397397
<p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.members.loading') }}</p>
@@ -470,7 +470,7 @@ watch(lastExecutionTime, () => {
470470
:aria-label="$t('org.members.remove_from_org', { name: member.name })"
471471
@click="handleRemoveMember(member.name)"
472472
>
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" />
474474
</button>
475475
</div>
476476
</div>
@@ -549,7 +549,7 @@ watch(lastExecutionTime, () => {
549549
:aria-label="$t('org.members.cancel_add')"
550550
@click="showAddMember = false"
551551
>
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" />
553553
</button>
554554
</div>
555555
</form>

‎app/components/Org/OperationsQueue.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ watch(isExecuting, executing => {
141141
:aria-label="$t('operations.queue.refresh')"
142142
@click="refreshState"
143143
>
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" />
145145
</button>
146146
</div>
147147
</div>
@@ -213,7 +213,7 @@ watch(isExecuting, executing => {
213213
:aria-label="$t('operations.queue.approve_operation')"
214214
@click="approveOperation(op.id)"
215215
>
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" />
217217
</button>
218218
<button
219219
v-if="op.status !== 'running'"
@@ -222,7 +222,7 @@ watch(isExecuting, executing => {
222222
:aria-label="$t('operations.queue.remove_operation')"
223223
@click="removeOperation(op.id)"
224224
>
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" />
226226
</button>
227227
</div>
228228
</li>
@@ -235,7 +235,7 @@ watch(isExecuting, executing => {
235235
role="alert"
236236
>
237237
<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" />
239239
<span class="font-mono text-sm text-amber-400">
240240
{{ $t('operations.queue.otp_prompt') }}
241241
</span>
@@ -295,7 +295,7 @@ watch(isExecuting, executing => {
295295
class="flex items-center gap-2 font-mono text-xs text-fg-muted cursor-pointer hover:text-fg transition-colors duration-200 select-none"
296296
>
297297
<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"
299299
aria-hidden="true"
300300
/>
301301
{{ $t('operations.queue.log') }} ({{ completedOperations.length }})
@@ -331,7 +331,7 @@ watch(isExecuting, executing => {
331331
:aria-label="$t('operations.queue.remove_from_log')"
332332
@click="removeOperation(op.id)"
333333
>
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" />
335335
</button>
336336
</li>
337337
</ul>

‎app/components/Org/TeamsPanel.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ watch(lastExecutionTime, () => {
272272
@click="loadTeams"
273273
>
274274
<span
275-
class="i-carbon:renew block w-4 h-4"
275+
class="i-carbon:renew w-4 h-4"
276276
:class="{ 'animate-spin': isLoadingTeams }"
277277
aria-hidden="true"
278278
/>
@@ -328,7 +328,7 @@ watch(lastExecutionTime, () => {
328328
<!-- Loading state -->
329329
<div v-if="isLoadingTeams && teams.length === 0" class="p-8 text-center">
330330
<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"
332332
aria-hidden="true"
333333
/>
334334
<p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.teams.loading') }}</p>
@@ -398,7 +398,7 @@ watch(lastExecutionTime, () => {
398398
:aria-label="$t('org.teams.delete_team', { name: teamName })"
399399
@click.stop="handleDestroyTeam(teamName)"
400400
>
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" />
402402
</button>
403403
</div>
404404

@@ -432,7 +432,7 @@ watch(lastExecutionTime, () => {
432432
:aria-label="$t('org.teams.remove_user', { user })"
433433
@click="handleRemoveUser(teamName, user)"
434434
>
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" />
436436
</button>
437437
</li>
438438
</ul>
@@ -468,7 +468,7 @@ watch(lastExecutionTime, () => {
468468
:aria-label="$t('org.teams.cancel_add_user')"
469469
@click="showAddUserFor = null"
470470
>
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" />
472472
</button>
473473
</form>
474474
</div>
@@ -525,7 +525,7 @@ watch(lastExecutionTime, () => {
525525
:aria-label="$t('org.teams.cancel_create')"
526526
@click="showCreateTeam = false"
527527
>
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" />
529529
</button>
530530
</form>
531531
</div>

‎app/components/Package/AccessControls.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ watch(
163163
@click="loadCollaborators"
164164
>
165165
<span
166-
class="i-carbon-renew block w-3.5 h-3.5"
166+
class="i-carbon-renew w-3.5 h-3.5"
167167
:class="{ 'motion-safe:animate-spin': isLoadingCollaborators }"
168168
aria-hidden="true"
169169
/>
@@ -173,7 +173,7 @@ watch(
173173
<!-- Loading state -->
174174
<div v-if="isLoadingCollaborators && collaboratorList.length === 0" class="py-4 text-center">
175175
<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"
177177
aria-hidden="true"
178178
/>
179179
</div>
@@ -229,7 +229,7 @@ watch(
229229
:aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
230230
@click="handleRevokeAccess(collab.name)"
231231
>
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" />
233233
</button>
234234
<span v-else class="text-xs text-fg-subtle"> {{ $t('package.access.owner') }} </span>
235235
</li>
@@ -291,7 +291,7 @@ watch(
291291
:aria-label="$t('package.access.cancel_grant')"
292292
@click="showGrantAccess = false"
293293
>
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" />
295295
</button>
296296
</div>
297297
</form>

‎app/components/Package/Card.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ const pkgDescription = useMarkdown(() => ({
118118
<div class="flex items-center gap-1.5">
119119
<dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
120120
<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" />
122122
<span class="font-mono">{{ $n(result.downloads.weekly) }}/w</span>
123123
</dd>
124124
</div>
@@ -152,7 +152,7 @@ const pkgDescription = useMarkdown(() => ({
152152
v-if="result.downloads?.weekly"
153153
class="text-fg-subtle gap-2 flex items-center justify-end"
154154
>
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" />
156156
<span class="font-mono text-xs">
157157
{{ $n(result.downloads.weekly) }} {{ $t('common.per_week') }}
158158
</span>

0 commit comments

Comments
 (0)