From 3aa1365acb0d85f5cf7ba148d168498a5c846570 Mon Sep 17 00:00:00 2001
From: "Daniel J. Geiger" <1852529+DanielJGeiger@users.noreply.github.com>
Date: Wed, 22 Nov 2023 11:19:34 -0600
Subject: [PATCH] fix: Distinguish subtype toggles from regular tools.

---
 src/components/Actions.tsx    |  3 +--
 src/components/LayerUI.tsx    |  2 ++
 src/components/MobileMenu.tsx |  2 ++
 src/components/Subtypes.tsx   | 21 +++++++++++++++------
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
index 0aabffaff..17b7db28a 100644
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -17,7 +17,7 @@ import { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
 import { capitalizeString, isTransparent } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
-import { SubtypeShapeActions, SubtypeToggles } from "./Subtypes";
+import { SubtypeShapeActions } from "./Subtypes";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
 import { hasBoundTextElement, isTextElement } from "../element/typeChecks";
@@ -342,7 +342,6 @@ export const ShapesSwitcher = ({
           </DropdownMenu.Item>
         </DropdownMenu.Content>
       </DropdownMenu>
-      <SubtypeToggles />
     </>
   );
 };
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index b32adcf30..09bb0ef4a 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -55,6 +55,7 @@ import "./Toolbar.scss";
 import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
+import { SubtypeToggles } from "./Subtypes";
 import { LaserPointerButton } from "./LaserTool/LaserPointerButton";
 
 interface LayerUIProps {
@@ -285,6 +286,7 @@ const LayerUI = ({
                           />
                         </Stack.Row>
                       </Island>
+                      <SubtypeToggles />
                       {isCollaborating && (
                         <Island
                           style={{
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 91d0c518c..0fc103c98 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -26,6 +26,7 @@ import { actionToggleStats } from "../actions";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
 import { useTunnels } from "../context/tunnels";
+import { SubtypeToggles } from "./Subtypes";
 
 type MobileMenuProps = {
   appState: UIAppState;
@@ -91,6 +92,7 @@ export const MobileMenu = ({
                     />
                   </Stack.Row>
                 </Island>
+                <SubtypeToggles />
                 {renderTopRightUI && renderTopRightUI(true, appState)}
                 <div className="mobile-misc-tools-container">
                   {!appState.viewModeEnabled && (
diff --git a/src/components/Subtypes.tsx b/src/components/Subtypes.tsx
index 2df6955b0..80e1fcc20 100644
--- a/src/components/Subtypes.tsx
+++ b/src/components/Subtypes.tsx
@@ -17,6 +17,7 @@ import {
   useExcalidrawSetAppState,
 } from "./App";
 import { ContextMenuItems } from "./ContextMenu";
+import { Island } from "./Island";
 
 export const SubtypeButton = (
   subtype: Subtype,
@@ -145,12 +146,20 @@ export const SubtypeToggles = () => {
 
   return (
     <>
-      {getSubtypeNames().map((subtype) =>
-        am.renderAction(
-          `custom.${subtype}`,
-          hasAlwaysEnabledActions(subtype) ? { onContextMenu } : {},
-        ),
-      )}
+      <Island
+        style={{
+          marginLeft: 8,
+          alignSelf: "center",
+          height: "fit-content",
+        }}
+      >
+        {getSubtypeNames().map((subtype) =>
+          am.renderAction(
+            `custom.${subtype}`,
+            hasAlwaysEnabledActions(subtype) ? { onContextMenu } : {},
+          ),
+        )}
+      </Island>
     </>
   );
 };