Skip to content

Commit d741ef0

Browse files
BunsDevBunsDev
committed
style: update button and command menu styles for improved consistency
- Changed button styles to use rounded-3xl for a more modern look. - Updated background colors and hover effects for better visual appeal. - Refined command menu styles, replacing glassmorphic effects with solid backgrounds for clarity. - Enhanced text colors and borders for improved readability and consistency across components.
1 parent 5c5b96c commit d741ef0

2 files changed

Lines changed: 30 additions & 46 deletions

File tree

‎packages/docs/app/page.tsx‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -205,15 +205,15 @@ export default function HomePage() {
205205
<div className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4">
206206
<Link
207207
href="/docs"
208-
className="inline-flex items-center justify-center rounded-xl px-8 py-4 text-sm font-medium bg-violet-600 hover:bg-violet-500 text-white shadow-lg shadow-violet-600/25 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-300 hover:scale-105"
208+
className="inline-flex items-center justify-center rounded-3xl px-8 py-4 font-mono text-sm font-medium bg-[#1e1e2e] hover:bg-[#2a2a3e] text-violet-400 border border-violet-500/20 hover:border-violet-500/40 transition-all duration-300"
209209
>
210210
Get Started
211211
<ArrowRight className="ml-2 h-4 w-4" />
212212
</Link>
213213

214214
<Link
215215
href="https://github.com/BunsDev/create-markdown"
216-
className="inline-flex items-center justify-center rounded-xl px-8 py-4 text-sm font-medium bg-zinc-800 hover:bg-zinc-700 text-white border border-zinc-700 hover:border-zinc-600 shadow-lg transition-all duration-300"
216+
className="inline-flex items-center justify-center rounded-3xl px-8 py-4 text-sm font-medium bg-zinc-800 hover:bg-zinc-700 text-white border border-zinc-700 hover:border-zinc-600 shadow-lg transition-all duration-300"
217217
target="_blank"
218218
rel="noopener noreferrer"
219219
>
@@ -417,30 +417,20 @@ export default function HomePage() {
417417
Install create-markdown and start building in minutes.
418418
</p>
419419

420-
{/* Glassmorphic install command */}
421-
<div className="mt-10 inline-block rounded-2xl overflow-hidden">
422-
<div className="relative">
423-
{/* Gradient border */}
424-
<div className="absolute -inset-[1px] bg-primary rounded-2xl opacity-30" />
425-
426-
<div className="relative bg-background/80 dark:bg-card/80 backdrop-blur-xl border border-white/10 rounded-2xl px-8 py-4">
427-
<code className="font-mono text-sm sm:text-base text-primary font-medium">
428-
bun add create-markdown
429-
</code>
430-
</div>
431-
</div>
420+
{/* Install command */}
421+
<div className="mt-10 inline-flex items-center justify-center rounded-full px-8 py-4 bg-[#1e1e2e] border border-violet-500/20">
422+
<code className="font-mono text-sm sm:text-base text-violet-400 font-medium">
423+
bun add create-markdown
424+
</code>
432425
</div>
433426

434427
<div className="mt-10">
435428
<Link
436429
href="/docs"
437-
className="group relative inline-flex items-center justify-center rounded-xl px-8 py-4 text-sm font-medium overflow-hidden transition-all duration-300 hover:scale-105 bg-primary text-primary-foreground shadow-lg hover:shadow-xl"
430+
className="inline-flex items-center justify-center rounded-full px-8 py-4 font-mono text-sm font-medium bg-[#1e1e2e] hover:bg-[#2a2a3e] text-violet-400 border border-violet-500/20 hover:border-violet-500/40 transition-all duration-300"
438431
>
439-
<div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-primary/80 blur-xl" />
440-
<span className="relative flex items-center">
441-
Read the docs
442-
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
443-
</span>
432+
Read the docs
433+
<ArrowRight className="ml-2 h-4 w-4" />
444434
</Link>
445435
</div>
446436
</div>

‎packages/docs/components/command-menu.tsx‎

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -63,41 +63,36 @@ export function CommandMenu() {
6363
</button>
6464

6565
{open && (
66-
<div className="fixed inset-0 z-50">
67-
{/* Glassmorphic backdrop */}
66+
<div className="fixed inset-0 z-[100]">
67+
{/* Solid backdrop */}
6868
<div
69-
className="fixed inset-0 bg-background/60 backdrop-blur-md"
69+
className="fixed inset-0 bg-black/80 backdrop-blur-sm"
7070
onClick={() => setOpen(false)}
7171
/>
7272

73-
{/* Glassmorphic dialog */}
74-
<div className="fixed left-[50%] top-[20%] z-50 w-full max-w-lg translate-x-[-50%] p-4">
75-
{/* Gradient glow behind - Purple only */}
76-
<div className="absolute inset-0 -m-4 bg-primary/20 blur-3xl opacity-50" />
77-
73+
{/* Dialog */}
74+
<div className="fixed left-[50%] top-[20%] z-[101] w-full max-w-lg translate-x-[-50%] p-4">
7875
<Command className={cn(
7976
'relative rounded-2xl overflow-hidden',
80-
'bg-popover/90 dark:bg-popover/80 backdrop-blur-2xl',
81-
'border border-white/20 dark:border-white/10',
82-
'shadow-2xl shadow-black/20',
83-
'text-popover-foreground'
77+
'bg-zinc-900 border border-zinc-700',
78+
'shadow-2xl shadow-black/50'
8479
)}>
8580
{/* Search input */}
86-
<div className="flex items-center border-b border-border/50 px-4 bg-muted/30">
87-
<Search className="mr-3 h-4 w-4 shrink-0 text-muted-foreground" />
81+
<div className="flex items-center border-b border-zinc-700 px-4 bg-zinc-800">
82+
<Search className="mr-3 h-4 w-4 shrink-0 text-zinc-400" />
8883
<Command.Input
8984
placeholder="Search documentation..."
90-
className="flex h-12 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
85+
className="flex h-12 w-full bg-transparent py-3 text-sm text-zinc-100 outline-none placeholder:text-zinc-500 disabled:cursor-not-allowed disabled:opacity-50"
9186
/>
9287
</div>
9388

94-
<Command.List className="max-h-[320px] overflow-y-auto p-2">
95-
<Command.Empty className="py-8 text-center text-sm text-muted-foreground">
89+
<Command.List className="max-h-[320px] overflow-y-auto p-2 bg-zinc-900">
90+
<Command.Empty className="py-8 text-center text-sm text-zinc-500">
9691
No results found.
9792
</Command.Empty>
9893

9994
<Command.Group heading="Pages" className="px-2 py-2">
100-
<div className="text-xs font-medium text-muted-foreground/70 uppercase tracking-wider mb-2">
95+
<div className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
10196
Pages
10297
</div>
10398
{pages.map((page) => (
@@ -108,28 +103,27 @@ export function CommandMenu() {
108103
className={cn(
109104
'relative flex cursor-pointer select-none items-center rounded-lg px-3 py-2.5 text-sm outline-none',
110105
'transition-all duration-150',
111-
'aria-selected:bg-primary/10',
112-
'aria-selected:border-l-2 aria-selected:border-primary',
113-
'hover:bg-muted/50',
106+
'text-zinc-300',
107+
'aria-selected:bg-violet-600/20 aria-selected:text-white',
108+
'hover:bg-zinc-800',
114109
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
115110
)}
116111
>
117112
<div className={cn(
118113
'mr-3 flex h-8 w-8 items-center justify-center rounded-lg',
119-
'bg-muted/50 dark:bg-white/5',
120-
'border border-border/50 dark:border-white/10'
114+
'bg-zinc-800 border border-zinc-700'
121115
)}>
122-
<page.icon className="h-4 w-4 text-muted-foreground" />
116+
<page.icon className="h-4 w-4 text-zinc-400" />
123117
</div>
124118
<span className="flex-1 font-medium">{page.title}</span>
125-
<ArrowRight className="h-4 w-4 text-muted-foreground/50 group-aria-selected:text-foreground transition-transform group-aria-selected:translate-x-0.5" />
119+
<ArrowRight className="h-4 w-4 text-zinc-600" />
126120
</Command.Item>
127121
))}
128122
</Command.Group>
129123
</Command.List>
130124

131125
{/* Footer hint */}
132-
<div className="flex items-center justify-between border-t border-border/50 bg-muted/20 px-4 py-2 text-xs text-muted-foreground">
126+
<div className="flex items-center justify-between border-t border-zinc-700 bg-zinc-800 px-4 py-2 text-xs text-zinc-500">
133127
<span>Navigate with ↑↓</span>
134128
<span>Select with ↵</span>
135129
</div>

0 commit comments

Comments
 (0)