[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.

feat: polish ui (#971)

authored by

Alex Savelyev and committed by
GitHub
8483ee4b 84d849ec

+25 -16
+1 -1
app/components/AppHeader.vue
··· 109 109 to="/" 110 110 :aria-label="$t('header.home')" 111 111 dir="ltr" 112 - class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 rounded" 112 + class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded" 113 113 > 114 114 <AppLogo class="w-8 h-8 rounded-lg" /> 115 115 <span>npmx</span>
+1 -1
app/components/AppLogo.vue
··· 15 15 > 16 16 <title>{{ $t('alt_logo') }}</title> 17 17 <rect fill="var(--bg)" width="512" height="512" rx="64" /> 18 - <rect fill="var(--fg)" x="110" y="310" width="60" height="60" /> 18 + <rect fill="currentColor" x="110" y="310" width="60" height="60" /> 19 19 <text 20 20 fill="var(--accent)" 21 21 x="320"
+2 -2
app/components/Header/AccountMenu.client.vue
··· 144 144 v-if="isNpmConnected && npmUser" 145 145 type="button" 146 146 role="menuitem" 147 - class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start" 147 + class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md" 148 148 @click="openConnectorModal" 149 149 > 150 150 <img ··· 187 187 v-if="atprotoUser" 188 188 type="button" 189 189 role="menuitem" 190 - class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start" 190 + class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md" 191 191 @click="openAuthModal" 192 192 > 193 193 <img
+2 -2
app/components/Header/SearchBox.vue
··· 109 109 <div class="relative group" :class="{ 'is-focused': isSearchFocused }"> 110 110 <div class="search-box relative flex items-center"> 111 111 <span 112 - class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1" 112 + class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1" 113 113 > 114 114 / 115 115 </span> ··· 122 122 name="q" 123 123 :placeholder="$t('search.placeholder')" 124 124 v-bind="noCorrect" 125 - class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:(outline-2 outline-accent/70)" 125 + class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)" 126 126 @focus="handleSearchFocus" 127 127 @blur="handleSearchBlur" 128 128 />
+1 -1
app/components/Tag/Button.vue
··· 13 13 14 14 <template> 15 15 <button 16 - class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1" 16 + class="inline-flex items-center px-2 py-0.5 text-xs font-mono border border-solid rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1" 17 17 :class="[ 18 18 pressed 19 19 ? 'bg-fg text-bg border-fg hover:(text-text-bg/50)'
+18 -9
app/pages/index.vue
··· 43 43 <template> 44 44 <main> 45 45 <section class="container min-h-screen flex flex-col"> 46 - <header class="flex-1 flex flex-col items-center justify-center text-center py-20"> 46 + <header 47 + class="flex-1 flex flex-col items-center justify-center text-center pt-20 pb-4 md:pb-8 lg:pb-20" 48 + > 47 49 <h1 48 50 dir="ltr" 49 - class="flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-4 motion-safe:animate-fade-in motion-safe:animate-fill-both" 51 + class="flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-2 motion-safe:animate-fade-in motion-safe:animate-fill-both" 50 52 > 51 - <AppLogo class="w-12 h-12 sm:w-20 sm:h-20 md:w-24 md:h-24 rounded-2xl sm:rounded-3xl" /> 53 + <AppLogo 54 + class="w-12 h-12 -ms-3 sm:w-20 sm:h-20 sm:-ms-5 md:w-24 md:h-24 md:-ms-6 rounded-2xl sm:rounded-3xl" 55 + /> 52 56 <span class="pb-4">npmx</span> 53 57 </h1> 54 58 55 59 <p 56 - class="text-fg-muted text-lg sm:text-xl max-w-md mb-12 motion-safe:animate-slide-up motion-safe:animate-fill-both" 60 + class="text-fg-muted text-lg sm:text-xl max-w-md mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both" 57 61 style="animation-delay: 0.1s" 58 62 > 59 63 {{ $t('tagline') }} ··· 75 79 76 80 <div class="search-box relative flex items-center"> 77 81 <span 78 - class="absolute inset-is-4 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 group-focus-within:text-accent z-1" 82 + class="absolute inset-is-4 text-fg-subtle font-mono text-lg pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1" 79 83 > 80 84 / 81 85 </span> ··· 89 93 autofocus 90 94 :placeholder="$t('search.placeholder')" 91 95 v-bind="noCorrect" 92 - class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:(outline-2 outline-accent/70)" 96 + class="w-full bg-bg-subtle border border-border rounded-xl ps-8 pe-24 h-14 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 motion-reduce:transition-none hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)" 93 97 @input="handleInput" 94 98 /> 95 99 96 100 <button 97 101 type="submit" 98 - class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-accent/70" 102 + class="absolute group inset-ie-2.5 px-2.5 sm:ps-4 sm:pe-4 py-2 font-mono text-sm text-bg bg-fg/90 rounded-md transition-[background-color,transform] duration-200 hover:bg-fg! group-focus-within:bg-fg/80 active:scale-95 focus-visible:outline-accent/70" 99 103 > 100 - <span class="i-carbon:search align-middle w-4 h-4" aria-hidden="true"></span> 101 - {{ $t('search.button') }} 104 + <span 105 + class="inline-block i-carbon:search align-middle w-4 h-4 sm:mr-2" 106 + aria-hidden="true" 107 + ></span> 108 + <span class="sr-only sm:not-sr-only"> 109 + {{ $t('search.button') }} 110 + </span> 102 111 </button> 103 112 </div> 104 113 </div>