From 4c228d5f5125166fada918ba245ecbcaa54d440b Mon Sep 17 00:00:00 2001
From: Henry Heino <personalizedrefrigerator@gmail.com>
Date: Fri, 3 Jan 2025 02:12:31 -0800
Subject: [PATCH] change: Use IconProvider to create the selection overflow
 menu icon

---
 packages/js-draw/src/tools/SelectionTool/Selection.ts  |  1 +
 .../src/tools/SelectionTool/SelectionMenuShortcut.ts   |  4 +++-
 .../js-draw/src/tools/SelectionTool/SelectionTool.scss | 10 +++++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/js-draw/src/tools/SelectionTool/Selection.ts b/packages/js-draw/src/tools/SelectionTool/Selection.ts
index c31596ba..bcf80831 100644
--- a/packages/js-draw/src/tools/SelectionTool/Selection.ts
+++ b/packages/js-draw/src/tools/SelectionTool/Selection.ts
@@ -115,6 +115,7 @@ export default class Selection {
 		const menuToggleButton = new SelectionMenuShortcut(
 			this,
 			this.editor.viewport,
+			this.editor.icons.makeOverflowIcon(),
 			showContextMenu,
 			this.editor.localization,
 		);
diff --git a/packages/js-draw/src/tools/SelectionTool/SelectionMenuShortcut.ts b/packages/js-draw/src/tools/SelectionTool/SelectionMenuShortcut.ts
index 247a25ed..08956afa 100644
--- a/packages/js-draw/src/tools/SelectionTool/SelectionMenuShortcut.ts
+++ b/packages/js-draw/src/tools/SelectionTool/SelectionMenuShortcut.ts
@@ -22,6 +22,7 @@ export default class SelectionMenuShortcut implements SelectionBoxChild {
 	public constructor(
 		private readonly parent: Selection,
 		private readonly viewport: Viewport,
+		private readonly icon: Element,
 		showContextMenu: OnShowContextMenu,
 		private localization: ToolLocalization,
 	) {
@@ -40,7 +41,8 @@ export default class SelectionMenuShortcut implements SelectionBoxChild {
 
 	private initUI() {
 		const button = document.createElement('button');
-		button.textContent = '...';
+		this.icon.classList.add('icon');
+		button.replaceChildren(this.icon);
 		button.ariaLabel = this.localization.selectionMenu__show;
 		button.title = button.ariaLabel;
 
diff --git a/packages/js-draw/src/tools/SelectionTool/SelectionTool.scss b/packages/js-draw/src/tools/SelectionTool/SelectionTool.scss
index 336867ae..5762a54e 100644
--- a/packages/js-draw/src/tools/SelectionTool/SelectionTool.scss
+++ b/packages/js-draw/src/tools/SelectionTool/SelectionTool.scss
@@ -85,6 +85,10 @@
 	> button {
 		max-height: var(--vertical-offset);
 		background-color: var(--background-color-1);
+
+		width: 24px;
+		height: 24px;
+		padding: 6px;
 		font-size: 14px;
 		user-select: none;
 		-webkit-user-select: none;
@@ -92,7 +96,6 @@
 		color: var(--foreground-color-1);
 		border: 0.5px solid var(--foreground-color-1);
 		border-radius: 3px;
-		padding: 3px;
 		opacity: 0.8;
 
 		&:hover,
@@ -104,6 +107,11 @@
 		}
 
 		transition: 0.2s ease opacity;
+
+		> .icon {
+			width: 100%;
+			height: 100%;
+		}
 	}
 }