feat(header): move feedback button to left (#65)
Place the feedback trigger in the header's left action area on desktop and mobile so it stays visible next to navigation controls. Use a message-circle icon with a labeled button style, remove the old top-right header placement, and update the dialog copy to clarify that submissions go directly to developers for review. Co-authored-by: Avery Felts <averyfelts@Averys-MacBook-Air.local>
This commit is contained in:
parent
dc0cd40b13
commit
67412a0b00
@ -121,7 +121,7 @@ export function FeedbackWidget({ children }: { children?: React.ReactNode }) {
|
|||||||
<DialogHeader className="space-y-1.5">
|
<DialogHeader className="space-y-1.5">
|
||||||
<DialogTitle className="text-base sm:text-lg">Send Feedback</DialogTitle>
|
<DialogTitle className="text-base sm:text-lg">Send Feedback</DialogTitle>
|
||||||
<DialogDescription className="text-xs sm:text-sm">
|
<DialogDescription className="text-xs sm:text-sm">
|
||||||
Report a bug, request a feature, or ask a question.
|
Report a bug, request a feature, or ask a question. Feedback is sent directly to developers for review.
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<form onSubmit={handleSubmit} className="grid gap-3 sm:gap-4">
|
<form onSubmit={handleSubmit} className="grid gap-3 sm:gap-4">
|
||||||
|
|||||||
@ -5,6 +5,7 @@ import { useTheme } from "next-themes"
|
|||||||
import {
|
import {
|
||||||
IconLogout,
|
IconLogout,
|
||||||
IconMenu2,
|
IconMenu2,
|
||||||
|
IconMessageCircle,
|
||||||
IconMoon,
|
IconMoon,
|
||||||
IconSearch,
|
IconSearch,
|
||||||
IconSparkles,
|
IconSparkles,
|
||||||
@ -67,6 +68,7 @@ export function SiteHeader({
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
className="flex size-8 shrink-0 items-center justify-center rounded-full -ml-0.5 hover:bg-background/60"
|
className="flex size-8 shrink-0 items-center justify-center rounded-full -ml-0.5 hover:bg-background/60"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
@ -76,6 +78,19 @@ export function SiteHeader({
|
|||||||
>
|
>
|
||||||
<IconMenu2 className="size-5 text-muted-foreground" />
|
<IconMenu2 className="size-5 text-muted-foreground" />
|
||||||
</button>
|
</button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 gap-1 rounded-full border border-white/80 px-2 text-xs text-muted-foreground hover:bg-background/60 hover:text-foreground"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
openFeedback()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconMessageCircle className="size-3.5" />
|
||||||
|
Feedback
|
||||||
|
</Button>
|
||||||
<IconSearch className="size-4 text-muted-foreground shrink-0" />
|
<IconSearch className="size-4 text-muted-foreground shrink-0" />
|
||||||
<span className="text-muted-foreground text-sm flex-1">
|
<span className="text-muted-foreground text-sm flex-1">
|
||||||
Search...
|
Search...
|
||||||
@ -119,8 +134,17 @@ export function SiteHeader({
|
|||||||
|
|
||||||
{/* desktop header: three-column grid for true center search */}
|
{/* desktop header: three-column grid for true center search */}
|
||||||
<div className="hidden h-12 w-full grid-cols-[1fr_minmax(0,28rem)_1fr] items-center px-4 md:grid">
|
<div className="hidden h-12 w-full grid-cols-[1fr_minmax(0,28rem)_1fr] items-center px-4 md:grid">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center gap-1">
|
||||||
<SidebarTrigger className="-ml-1" />
|
<SidebarTrigger className="-ml-1" />
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 gap-1.5 rounded-full border border-white/80 px-2 text-xs text-muted-foreground/70 hover:text-foreground"
|
||||||
|
onClick={openFeedback}
|
||||||
|
>
|
||||||
|
<IconMessageCircle className="size-3.5" />
|
||||||
|
Feedback
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative justify-self-center w-full">
|
<div className="relative justify-self-center w-full">
|
||||||
@ -154,14 +178,6 @@ export function SiteHeader({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex shrink-0 items-center justify-end gap-0.5">
|
<div className="flex shrink-0 items-center justify-end gap-0.5">
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="text-muted-foreground/70 hover:text-foreground text-xs h-7 px-2"
|
|
||||||
onClick={openFeedback}
|
|
||||||
>
|
|
||||||
Feedback
|
|
||||||
</Button>
|
|
||||||
<NotificationsPopover />
|
<NotificationsPopover />
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user