[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 107 107 target: '_blank', 108 108 type: 'link', 109 109 external: true, 110 - iconClass: 'i-simple-icons:bluesky', 110 + iconClass: 'i-carbon:logo-bluesky', 111 111 }, 112 112 { 113 113 name: 'Chat',
+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
··· 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
··· 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
··· 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