forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: polish ui (#971)
authored by
Alex Savelyev
and committed by
GitHub
8483ee4b
84d849ec
+25
-16
+1
-1
app/components/AppHeader.vue
+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
+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
+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
+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
+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
+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>