@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.04044ed9e96d

package/src/canvas/comments-overflow-menu.tsx

@@ -1,9 +1,11 @@
 import {
+	TldrawUiButton,
 	TldrawUiDropdownMenuContent,
 	TldrawUiDropdownMenuGroup,
 	TldrawUiDropdownMenuItem,
 	TldrawUiDropdownMenuRoot,
 	TldrawUiDropdownMenuTrigger,
+	TldrawUiIcon,
 	useEditor,
 	useTranslation,
 	useValue,
@@ -24,25 +26,31 @@ export function CommentsOverflowMenu() {
 	return (
 		<TldrawUiDropdownMenuRoot id="comments-overflow">
 			<TldrawUiDropdownMenuTrigger>
-				<button
-					type="button"
-					className="cmt-header-btn"
+				<TldrawUiButton
+					type="icon"
+					tooltip={msg('comments.more-options')}
 					title={msg('comments.more-options')}
-					aria-label={msg('comments.more-options')}
+					className="tlui-cmt-header-btn"
 				>
-					<MoreIcon />
-				</button>
+					<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
+				</TldrawUiButton>
 			</TldrawUiDropdownMenuTrigger>
-			<TldrawUiDropdownMenuContent side="bottom" align="end">
+			<TldrawUiDropdownMenuContent
+				className="tlui-cmt-menu"
+				side="bottom"
+				align="end"
+				alignOffset={0}
+				sideOffset={4}
+			>
 				<TldrawUiDropdownMenuGroup>
 					<TldrawUiDropdownMenuItem>
 						<button
 							type="button"
-							className="cmt-menu-item"
+							className="tlui-cmt-menu-item"
 							onClick={() => toggleCommentsHidden(editor)}
 						>
 							<span>{hidden ? msg('comments.show') : msg('comments.hide')}</span>
-							<span className="cmt-menu-item__shortcut">{HIDE_SHORTCUT}</span>
+							<span className="tlui-cmt-menu-item__shortcut">{HIDE_SHORTCUT}</span>
 						</button>
 					</TldrawUiDropdownMenuItem>
 				</TldrawUiDropdownMenuGroup>
@@ -50,13 +58,3 @@ export function CommentsOverflowMenu() {
 		</TldrawUiDropdownMenuRoot>
 	)
 }
-
-function MoreIcon() {
-	return (
-		<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-			<circle cx="3" cy="8" r="1.4" />
-			<circle cx="8" cy="8" r="1.4" />
-			<circle cx="13" cy="8" r="1.4" />
-		</svg>
-	)
-}