Wrap menu in a filled fieldset

This commit is contained in:
Ryan Palmer
2024-09-04 15:21:12 +10:00
parent bd15401e7f
commit 9a11d1d086

View File

@ -13,6 +13,7 @@ import {
Text,
Checkbox,
Card,
Fieldset,
} from "@mantine/core";
import { IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignRight } from "@tabler/icons-react";
import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
@ -81,7 +82,8 @@ export function TableOfContentsMenu({ editor }: EditorMenuProps) {
}}
shouldShow={shouldShow}
>
<Group gap={0}>
<Fieldset variant="filled" p="xs">
<Group gap="xs">
<Tooltip position="top" label="Divider type">
<Select
w={100}
@ -103,13 +105,6 @@ export function TableOfContentsMenu({ editor }: EditorMenuProps) {
/>
</Tooltip>
<Tooltip position="top" label="Show page icons">
<Card
p="xs"
m={0}
onClick={() => setPageIcons(!editor.getAttributes("tableOfContents").icons)}
style={{ cursor: "pointer" }}
withBorder
>
<Group gap="xs">
<Text size="sm">Page Icons</Text>
<Checkbox
@ -117,9 +112,9 @@ export function TableOfContentsMenu({ editor }: EditorMenuProps) {
onChange={(event) => setPageIcons(event.currentTarget.checked)}
/>
</Group>
</Card>
</Tooltip>
</Group>
</Fieldset>
</BaseBubbleMenu>
);
}