feat: adjustment TYPOGRAPHY SCALES

This commit is contained in:
Firman Ramdhani
2026-07-31 07:29:48 +07:00
parent 93ec37f361
commit 8ae2772f78
2 changed files with 6 additions and 7 deletions
@@ -8,8 +8,8 @@ export interface PageActionsProps {
/** Array of configured page-level actions. */ /** Array of configured page-level actions. */
actions?: PageActionProps[]; actions?: PageActionProps[];
customButtonProps?: (action: PageActionProps) => ButtonProps; customButtonProps?: (action: PageActionProps) => ButtonProps;
gapActionDesktop?:MantineSpacing; gapActionDesktop?: MantineSpacing;
gapActionMobile?:MantineSpacing gapActionMobile?: MantineSpacing;
} }
/** /**
@@ -17,7 +17,7 @@ export interface PageActionsProps {
* Automatically adapts layout based on screen size. * Automatically adapts layout based on screen size.
*/ */
export const PageActions = memo(function PageActions(props: PageActionsProps) { export const PageActions = memo(function PageActions(props: PageActionsProps) {
const { actions = [], customButtonProps, gapActionDesktop='xs', gapActionMobile='sm' }=props; const { actions = [], customButtonProps, gapActionDesktop = 'xs', gapActionMobile = 'sm' } = props;
if (!actions || actions?.length === 0) { if (!actions || actions?.length === 0) {
return null; return null;
} }
@@ -36,7 +36,7 @@ export const PageActions = memo(function PageActions(props: PageActionsProps) {
return ( return (
<Box style={{ display: 'inline-flex' }}> <Box style={{ display: 'inline-flex' }}>
{/* --- DESKTOP VIEW --- */} {/* --- DESKTOP VIEW --- */}
<Group gap={gapActionDesktop} wrap="nowrap" visibleFrom="md"> <Group gap={gapActionDesktop} wrap="nowrap" visibleFrom="md">
{actions.map((action, index) => { {actions.map((action, index) => {
if (action.type === 'divider') { if (action.type === 'divider') {
return <Divider key={`divider-${index}`} orientation="vertical" mr="sm" ml="sm" />; return <Divider key={`divider-${index}`} orientation="vertical" mr="sm" ml="sm" />;
@@ -149,7 +149,7 @@ export const PageActions = memo(function PageActions(props: PageActionsProps) {
<MoreVertical size={16} /> <MoreVertical size={16} />
</ActionIcon> </ActionIcon>
</Menu.Target> </Menu.Target>
<Menu.Dropdown px={'xl'} w={180}> <Menu.Dropdown px={'sm'} miw={180}>
{actions.map((action, index) => { {actions.map((action, index) => {
if (action.type === 'divider') { if (action.type === 'divider') {
return <Menu.Divider key={`mobile-divider-${index}`} mt="sm" mb="sm" />; return <Menu.Divider key={`mobile-divider-${index}`} mt="sm" mb="sm" />;
@@ -680,11 +680,10 @@ export function EnterpriseDetailPageProvider<E extends BaseEntity = BaseEntity>(
style: style:
action.key === ModuleAction.CREATE action.key === ModuleAction.CREATE
? { ? {
fontSize: 12,
boxShadow: boxShadow:
'0 4px 14px 0 color-mix(in srgb, var(--mantine-primary-color-filled) 40%, transparent)', '0 4px 14px 0 color-mix(in srgb, var(--mantine-primary-color-filled) 40%, transparent)',
} }
: { fontSize: 12 }, : {},
}; };
}} }}
actions={detailData ? pageActions : []} actions={detailData ? pageActions : []}