forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
refactor: use buttons and links components in account menu (#1451)
authored by
Marcus Blättermann
and committed by
GitHub
a5b2e9cd
307c21c1
+36
-59
+1
-1
app/components/AppHeader.vue
+1
-1
app/components/AppHeader.vue
+1
-1
app/components/CallToAction.vue
+1
-1
app/components/CallToAction.vue
···
19
19
{
20
20
id: 'bluesky',
21
21
href: 'https://social.npmx.dev',
22
-
icon: 'i-simple-icons:bluesky',
22
+
icon: 'i-carbon:logo-bluesky',
23
23
titleKey: $t('about.get_involved.follow.title'),
24
24
descriptionKey: $t('about.get_involved.follow.description'),
25
25
ctaKey: $t('about.get_involved.follow.cta'),
+13
-16
app/components/Header/AccountMenu.client.vue
+13
-16
app/components/Header/AccountMenu.client.vue
···
142
142
<!-- Connected accounts section -->
143
143
<div v-if="hasAnyConnection" class="py-1">
144
144
<!-- npm CLI connection -->
145
-
<button
145
+
<ButtonBase
146
146
v-if="isNpmConnected && npmUser"
147
-
type="button"
148
147
role="menuitem"
149
-
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
148
+
class="w-full text-start gap-x-3 border-none"
150
149
@click="openConnectorModal"
150
+
out
151
151
>
152
152
<img
153
153
v-if="npmAvatar"
···
182
182
})
183
183
}}
184
184
</span>
185
-
</button>
185
+
</ButtonBase>
186
186
187
187
<!-- Atmosphere connection -->
188
-
<button
188
+
<ButtonBase
189
189
v-if="atprotoUser"
190
-
type="button"
191
190
role="menuitem"
192
-
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
191
+
class="w-full text-start gap-x-3 border-none"
193
192
@click="openAuthModal"
194
193
>
195
194
<img
···
212
211
>
213
212
<span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
214
213
</span>
215
-
</button>
214
+
</ButtonBase>
216
215
</div>
217
216
218
217
<!-- Divider (only if we have connections AND options to connect) -->
···
223
222
224
223
<!-- Connect options -->
225
224
<div v-if="!isNpmConnected || !atprotoUser" class="py-1">
226
-
<button
225
+
<ButtonBase
227
226
v-if="!isNpmConnected"
228
-
type="button"
229
227
role="menuitem"
230
-
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
228
+
class="w-full text-start gap-x-3 border-none"
231
229
@click="openConnectorModal"
232
230
>
233
231
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
···
248
246
</span>
249
247
<span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
250
248
</span>
251
-
</button>
249
+
</ButtonBase>
252
250
253
-
<button
251
+
<ButtonBase
254
252
v-if="!atprotoUser"
255
-
type="button"
256
253
role="menuitem"
257
-
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
254
+
class="w-full text-start gap-x-3 border-none"
258
255
@click="openAuthModal"
259
256
>
260
257
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
···
266
263
</span>
267
264
<span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</span>
268
265
</span>
269
-
</button>
266
+
</ButtonBase>
270
267
</div>
271
268
</div>
272
269
</div>
+12
-22
app/components/Header/AuthModal.client.vue
+12
-22
app/components/Header/AuthModal.client.vue
···
64
64
</p>
65
65
</div>
66
66
</div>
67
-
<button
68
-
class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
69
-
@click="logout"
70
-
>
67
+
<ButtonBase class="w-full" @click="logout">
71
68
{{ $t('auth.modal.disconnect') }}
72
-
</button>
69
+
</ButtonBase>
73
70
</div>
74
71
75
72
<!-- Disconnected state -->
···
111
108
<span class="font-bold">npmx.dev</span>
112
109
</template>
113
110
<template #atproto>
114
-
<a :href="atprotoLink" target="_blank" class="text-blue-400 hover:underline">
115
-
AT Protocol
116
-
</a>
111
+
<LinkBase :to="atprotoLink"> AT Protocol </LinkBase>
117
112
</template>
118
113
<template #bluesky>
119
-
<a href="https://bsky.app" target="_blank" class="text-blue-400 hover:underline">
120
-
Bluesky
121
-
</a>
114
+
<LinkBase to="https://bsky.app"> Bluesky </LinkBase>
122
115
</template>
123
116
<template #tangled>
124
-
<a href="https://tangled.org" target="_blank" class="text-blue-400 hover:underline">
125
-
Tangled
126
-
</a>
117
+
<LinkBase to="https://tangled.org"> Tangled </LinkBase>
127
118
</template>
128
119
</i18n-t>
129
120
</div>
···
133
124
<ButtonBase type="submit" variant="primary" :disabled="!handleInput.trim()" class="w-full">
134
125
{{ $t('auth.modal.connect') }}
135
126
</ButtonBase>
136
-
<ButtonBase type="button" variant="primary" class="w-full" @click="handleCreateAccount">
127
+
<ButtonBase type="button" class="w-full" @click="handleCreateAccount">
137
128
{{ $t('auth.modal.create_account') }}
138
129
</ButtonBase>
139
130
<hr class="color-border" />
140
-
<ButtonBase type="button" variant="primary" class="w-full" @click="handleBlueskySignIn" block>
131
+
<ButtonBase
132
+
type="button"
133
+
class="w-full"
134
+
@click="handleBlueskySignIn"
135
+
classicon="i-carbon:logo-bluesky"
136
+
>
141
137
{{ $t('auth.modal.connect_bluesky') }}
142
-
<svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
143
-
<path
144
-
fill="#0F73FF"
145
-
d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
146
-
></path>
147
-
</svg>
148
138
</ButtonBase>
149
139
</form>
150
140
</Modal>
+9
-19
app/components/Header/ConnectorModal.vue
+9
-19
app/components/Header/ConnectorModal.vue
···
80
80
{{ $t('connector.modal.connected_hint') }}
81
81
</div>
82
82
83
-
<button
84
-
type="button"
85
-
class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
86
-
@click="handleDisconnect"
87
-
>
83
+
<ButtonBase type="button" class="w-full" @click="handleDisconnect">
88
84
{{ $t('connector.modal.disconnect') }}
89
-
</button>
85
+
</ButtonBase>
90
86
</div>
91
87
92
88
<!-- Disconnected state -->
···
100
96
<p class="text-sm text-fg-muted">
101
97
<i18n-t keypath="connector.modal.contributor_notice" scope="global">
102
98
<template #link>
103
-
<a
104
-
href="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
105
-
target="_blank"
106
-
rel="noopener noreferrer"
107
-
class="text-blue-400 hover:underline"
99
+
<LinkBase
100
+
to="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
108
101
>
109
102
{{ $t('connector.modal.contributor_link') }}
110
-
</a>
103
+
</LinkBase>
111
104
</template>
112
105
</i18n-t>
113
106
</p>
···
124
117
>
125
118
<span class="text-fg-subtle">$</span>
126
119
<span class="text-fg-subtle ms-2">pnpm npmx-connector</span>
127
-
<button
128
-
type="button"
120
+
<ButtonBase
129
121
:aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
130
-
class="ms-auto text-fg-subtle p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
131
122
@click="copy('pnpm npmx-connector')"
132
-
>
133
-
<span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
134
-
<span v-else class="i-carbon:checkmark block w-5 h-5 text-green-500" aria-hidden="true" />
135
-
</button>
123
+
class="ms-auto"
124
+
:classicon="copied ? 'i-carbon:checkmark text-green-500' : 'i-carbon:copy'"
125
+
/>
136
126
</div>
137
127
138
128
<!-- TODO: Uncomment when npmx-connector is published to npm