Skip to content

Commit 6ecde7a

Browse files
fuma-namafuma-nama
committed
UI: improve consistency
1 parent e8a3ab7 commit 6ecde7a

File tree

8 files changed

+37
-61
lines changed

8 files changed

+37
-61
lines changed

‎packages/ui/src/components/layout/root-toggle.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export function RootToggle({
6161
<PopoverTrigger
6262
{...props}
6363
className={cn(
64-
'flex flex-row items-center gap-2 rounded-lg ps-2 pe-4 py-1.5 hover:bg-fd-accent/50 hover:text-fd-accent-foreground',
64+
'flex flex-row items-center gap-2.5 rounded-lg ps-2 pe-4 py-1.5 hover:bg-fd-accent/50 hover:text-fd-accent-foreground',
6565
props.className,
6666
)}
6767
>

‎packages/ui/src/components/layout/toc.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ export function TocPopoverTrigger({
189189
<CollapsibleTrigger
190190
{...props}
191191
className={cn(
192-
'inline-flex items-center text-sm gap-2 text-nowrap px-4 py-2 text-start md:px-6 md:py-3 focus-visible:outline-none',
192+
'inline-flex items-center text-sm gap-2 text-nowrap px-4 py-2.5 text-start md:px-6 focus-visible:outline-none',
193193
props.className,
194194
)}
195195
>

‎packages/ui/src/layouts/docs.tsx

+21-40
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
SidebarViewport,
1414
SidebarPageTree,
1515
} from '@/layouts/docs/sidebar';
16-
import { replaceOrDefault, type SharedNavProps } from '@/layouts/shared';
16+
import { replaceOrDefault } from '@/layouts/shared';
1717
import { type LinkItemType, BaseLinkItem } from '@/layouts/links';
1818
import { RootToggle } from '@/components/layout/root-toggle';
1919
import { type BaseLayoutProps, getLinks } from './shared';
@@ -132,11 +132,26 @@ export function DocsLayout({
132132
className={cn('md:ps-(--fd-layout-offset)', sidebar.className)}
133133
>
134134
<SidebarHeader>
135-
<SidebarHeaderItems
136-
{...nav}
137-
links={links}
138-
sidebarCollapsible={collapsible}
139-
/>
135+
<div className="flex flex-row pt-1 max-md:hidden">
136+
<Link
137+
href={nav.url ?? '/'}
138+
className="inline-flex text-[15px] items-center gap-2.5 font-medium"
139+
>
140+
{nav.title}
141+
</Link>
142+
{nav.children}
143+
{collapsible && (
144+
<SidebarCollapseTrigger
145+
className={cn(
146+
buttonVariants({
147+
color: 'ghost',
148+
size: 'icon-sm',
149+
}),
150+
'ms-auto mb-auto text-fd-muted-foreground max-md:hidden',
151+
)}
152+
/>
153+
)}
154+
</div>
140155
{sidebarBanner}
141156
{tabs.length > 0 ? (
142157
<RootToggle options={tabs} className="-mx-2" />
@@ -179,40 +194,6 @@ export function DocsLayout({
179194
);
180195
}
181196

182-
function SidebarHeaderItems({
183-
links,
184-
sidebarCollapsible,
185-
...props
186-
}: SharedNavProps & { links: LinkItemType[]; sidebarCollapsible: boolean }) {
187-
const isEmpty = !props.title && !props.children && links.length === 0;
188-
if (isEmpty) return null;
189-
190-
return (
191-
<div className="flex flex-row items-center max-md:hidden">
192-
{props.title ? (
193-
<Link
194-
href={props.url ?? '/'}
195-
className="inline-flex text-[15px] items-center gap-2.5 py-1 font-medium"
196-
>
197-
{props.title}
198-
</Link>
199-
) : null}
200-
{props.children}
201-
{sidebarCollapsible && (
202-
<SidebarCollapseTrigger
203-
className={cn(
204-
buttonVariants({
205-
color: 'ghost',
206-
size: 'icon-sm',
207-
}),
208-
'ms-auto text-fd-muted-foreground max-md:hidden',
209-
)}
210-
/>
211-
)}
212-
</div>
213-
);
214-
}
215-
216197
function SidebarFooterItems({
217198
i18n,
218199
disableThemeSwitch,

‎packages/ui/src/layouts/docs/sidebar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ export function Sidebar({
168168
<div
169169
{...inner}
170170
className={cn(
171-
'flex size-full max-w-full flex-col pt-2 md:ms-auto md:w-(--fd-sidebar-width) md:border-e',
171+
'flex size-full max-w-full flex-col pt-2 md:ms-auto md:w-(--fd-sidebar-width) md:border-e md:pt-4',
172172
inner?.className,
173173
)}
174174
>

‎packages/ui/src/layouts/notebook.client.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function Navbar(props: HTMLAttributes<HTMLElement>) {
2020
id="nd-subnav"
2121
{...props}
2222
className={cn(
23-
'fixed inset-x-0 top-(--fd-banner-height) z-10 h-14 pe-(--fd-layout-offset) backdrop-blur-lg transition-colors',
23+
'fixed inset-x-0 top-(--fd-banner-height) z-10 pe-(--fd-layout-offset) backdrop-blur-lg transition-colors',
2424
(!isTransparent || open) && 'bg-fd-background/80',
2525
props.className,
2626
)}
@@ -88,7 +88,7 @@ export function LayoutTab(item: Option) {
8888
return (
8989
<Link
9090
className={cn(
91-
'inline-flex items-center py-2.5 border-b-2 border-transparent gap-2 text-fd-muted-foreground text-sm text-nowrap',
91+
'inline-flex items-center py-2.5 border-b border-transparent gap-2 text-fd-muted-foreground text-sm text-nowrap',
9292
selected && 'text-fd-foreground font-medium border-fd-primary',
9393
)}
9494
href={item.url}
@@ -111,7 +111,7 @@ export function SidebarLayoutTab({
111111
<Link
112112
{...props}
113113
className={cn(
114-
'flex flex-row items-center px-2 py-1.5 gap-2.5 text-fd-muted-foreground [&_svg]:!size-4.5',
114+
'flex flex-row items-center px-2 -mx-2 py-1.5 gap-2.5 text-fd-muted-foreground [&_svg]:!size-4.5',
115115
selected
116116
? 'text-fd-primary font-medium'
117117
: 'hover:text-fd-accent-foreground',

‎packages/ui/src/layouts/notebook.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,10 @@ export function DocsLayout({
117117
>
118118
<SidebarHeader>
119119
{navMode === 'auto' && (
120-
<div className="flex flex-row items-center justify-between min-h-14 -my-2 max-md:hidden">
120+
<div className="flex flex-row justify-between -mt-0.5 max-md:hidden">
121121
<Link
122122
href={nav.url ?? '/'}
123-
className="inline-flex items-center gap-2.5 py-1 font-medium"
123+
className="inline-flex items-center gap-2.5 font-medium"
124124
>
125125
{nav.title}
126126
</Link>
@@ -130,7 +130,7 @@ export function DocsLayout({
130130
color: 'ghost',
131131
size: 'icon-sm',
132132
}),
133-
'text-fd-muted-foreground',
133+
'text-fd-muted-foreground mb-auto',
134134
)}
135135
/>
136136
</div>
@@ -208,7 +208,6 @@ function DocsNavbar({
208208

209209
return (
210210
<Navbar
211-
className={cn('flex flex-col h-14', tabs.length > 0 && 'lg:h-26')}
212211
style={
213212
navMode === 'top'
214213
? {
@@ -219,7 +218,7 @@ function DocsNavbar({
219218
>
220219
<div
221220
className={cn(
222-
'flex flex-row border-b border-fd-foreground/10 px-4 flex-1',
221+
'flex flex-row border-b border-fd-foreground/10 px-4 h-14',
223222
navMode === 'auto' && 'md:px-6',
224223
)}
225224
>
@@ -311,7 +310,7 @@ function DocsNavbar({
311310
</div>
312311
</div>
313312
{tabs.length > 0 ? (
314-
<LayoutTabs className="px-6 border-b border-fd-foreground/10 max-lg:hidden">
313+
<LayoutTabs className="px-6 border-b border-fd-foreground/10 h-10 max-lg:hidden">
315314
{tabs.map((tab) => (
316315
<LayoutTab key={tab.url} {...tab} />
317316
))}

‎packages/ui/src/page.client.tsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,7 @@ export function TocPopoverHeader(props: HTMLAttributes<HTMLDivElement>) {
5151

5252
return (
5353
<div
54-
className={cn(
55-
'sticky overflow-visible z-10 h-8',
56-
tocNav,
57-
props.className,
58-
)}
54+
className={cn('sticky overflow-visible z-10', tocNav, props.className)}
5955
style={{
6056
top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
6157
}}
@@ -137,7 +133,7 @@ export interface FooterProps {
137133
}
138134

139135
const itemVariants = cva(
140-
'flex w-full flex-col gap-2 rounded-lg border bg-fd-card p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground',
136+
'flex w-full flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground',
141137
);
142138

143139
const itemLabel = cva(
@@ -196,7 +192,7 @@ export function Footer({ items }: FooterProps) {
196192
<ChevronLeft className="-ms-1 size-4 shrink-0 rtl:rotate-180" />
197193
<p>{text.previousPage}</p>
198194
</div>
199-
<p className="font-medium">{previous.name}</p>
195+
<p className="font-medium md:text-[15px]">{previous.name}</p>
200196
</Link>
201197
) : null}
202198
{next ? (
@@ -208,7 +204,7 @@ export function Footer({ items }: FooterProps) {
208204
<ChevronRight className="-me-1 size-4 shrink-0 rtl:rotate-180" />
209205
<p>{text.nextPage}</p>
210206
</div>
211-
<p className="font-medium">{next.name}</p>
207+
<p className="font-medium md:text-[15px]">{next.name}</p>
212208
</Link>
213209
) : null}
214210
</div>

‎packages/ui/src/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export function DocsPage({
155155
>
156156
{replaceOrDefault(
157157
{ enabled: tocPopoverEnabled, component: tocPopoverReplace },
158-
<TocPopoverHeader>
158+
<TocPopoverHeader className="h-10">
159159
<TocPopoverTrigger className="w-full" items={toc} />
160160
<TocPopoverContent>
161161
{tocPopoverOptions.header}

0 commit comments

Comments
 (0)