moex/moex-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): align dashboard card heading hierarchy

Browse Source 
BrokerDashboardCard previously rendered <Heading level={3} size="section">,
which produced an <h3> under the <h1> account name in BrokerAccountLayout,
skipping the <h2> level. Use level={2} so the semantic HTML is a proper
<h2> while keeping the compact "section" visual size.

Also extract the byte-identical toolbar wrapper (grid + chips + date filter
slot) shared by BrokerDashboardEventsCard and BrokerDashboardIncomeCard
into BrokerDashboardTableToolbar to remove duplicated sx config.
This commit is contained in:
Sergey Krylov 2026-06-27 13:21:15 +03:00
parent 0a1ae0552c
commit 21df354df6
4 changed files with 53 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardCard.tsx
View File

@ -40,7 +40,7 @@ export function BrokerDashboardCard({
mb: 1.5,
}}
>
<Heading level={3} size="section">
<Heading level={2} size="section">
{title}
</Heading>
{action}

22
apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardEventsCard.tsx
View File

@ -8,6 +8,7 @@ import { eventStatusLabel, eventTypeLabel } from '../lib/dashboardFormatters'
import { BrokerDashboardCard } from './BrokerDashboardCard'
import { BrokerDashboardDateFilter } from './BrokerDashboardDateFilter'
import { BrokerDashboardTableSkeleton } from './BrokerDashboardTableSkeleton'
import { BrokerDashboardTableToolbar } from './BrokerDashboardTableToolbar'
const EVENT_FILTERS: Array<{
type: DashboardEventType
@ -81,21 +82,8 @@ export function BrokerDashboardEventsCard({
title="События"
action={<Link to={`/broker/${encodeURIComponent(accountId)}/events`}>Все события</Link>}
filters={
<Box
sx={{
display: 'grid',
gridTemplateColumns: { xs: '1fr', md: 'minmax(0, 1fr) auto' },
gap: 1.25,
alignItems: 'center',
border: '1px solid',
borderColor: 'divider',
bgcolor: 'grey.50',
borderRadius: 2,
p: 1,
}}
>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, minWidth: 0 }}>
{EVENT_FILTERS.map((filter) => (
<BrokerDashboardTableToolbar
chips={EVENT_FILTERS.map((filter) => (
<Chip
key={filter.type}
label={filter.label}
@ -104,7 +92,7 @@ export function BrokerDashboardEventsCard({
onClick={() => onToggleType(filter.type)}
/>
))}
</Box>
>
<BrokerDashboardDateFilter
appliedLabel={appliedDateLabel}
preset={draftPreset}
@ -117,7 +105,7 @@ export function BrokerDashboardEventsCard({
onReset={onResetFilters}
onApply={onApplyFilters}
/>
</Box>
</BrokerDashboardTableToolbar>
}
>
{selectedTypes.length === 0 ? (

22
apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardIncomeCard.tsx
View File

@ -8,6 +8,7 @@ import { getDashboardIncomeRows, sumDashboardIncome } from '../lib/dashboardInco
import { BrokerDashboardCard } from './BrokerDashboardCard'
import { BrokerDashboardDateFilter } from './BrokerDashboardDateFilter'
import { BrokerDashboardTableSkeleton } from './BrokerDashboardTableSkeleton'
import { BrokerDashboardTableToolbar } from './BrokerDashboardTableToolbar'
const INCOME_FILTERS: Array<{
type: DashboardIncomeType
@ -73,21 +74,8 @@ export function BrokerDashboardIncomeCard({
title="Доходы"
action={<Link to={`/broker/${encodeURIComponent(accountId)}/operations`}>Все операции</Link>}
filters={
<Box
sx={{
display: 'grid',
gridTemplateColumns: { xs: '1fr', md: 'minmax(0, 1fr) auto' },
gap: 1.25,
alignItems: 'center',
border: '1px solid',
borderColor: 'divider',
bgcolor: 'grey.50',
borderRadius: 2,
p: 1,
}}
>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, minWidth: 0 }}>
{INCOME_FILTERS.map((filter) => (
<BrokerDashboardTableToolbar
chips={INCOME_FILTERS.map((filter) => (
<Chip
key={filter.type}
label={filter.label}
@ -96,7 +84,7 @@ export function BrokerDashboardIncomeCard({
onClick={() => onToggleType(filter.type)}
/>
))}
</Box>
>
<BrokerDashboardDateFilter
appliedLabel={appliedDateLabel}
preset={draftPreset}
@ -109,7 +97,7 @@ export function BrokerDashboardIncomeCard({
onReset={onResetFilters}
onApply={onApplyFilters}
/>
</Box>
</BrokerDashboardTableToolbar>
}
>
{selectedTypes.length === 0 ? (

28
apps/frontend/src/widgets/broker-dashboard/ui/BrokerDashboardTableToolbar.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Box } from '@mui/material'
import type { ReactNode } from 'react'
type BrokerDashboardTableToolbarProps = {
chips: ReactNode
children: ReactNode
}
export function BrokerDashboardTableToolbar({ chips, children }: BrokerDashboardTableToolbarProps) {
return (
<Box
sx={{
display: 'grid',
gridTemplateColumns: { xs: '1fr', md: 'minmax(0, 1fr) auto' },
gap: 1.25,
alignItems: 'center',
border: '1px solid',
borderColor: 'divider',
bgcolor: 'grey.50',
borderRadius: 2,
p: 1,
}}
>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, minWidth: 0 }}>{chips}</Box>
{children}
</Box>
)
}