Refactor: Modify fewer components.

src/components/ButtonSelect.tsx

@@ -23,17 +23,7 @@ export const ButtonSelect = <T extends Object>({
           onChange={() => onChange(option.value)}
           checked={value === option.value}
         />
-        <span
-          style={{
-            textAlign: "center",
-            fontSize: "0.6rem",
-            color: "var(--icon-fill-color)",
-            fontWeight: "bold",
-            opacity: value === option.value ? 1.0 : 0.6,
-          }}
-        >
         {option.text}
-        </span>
       </label>
     ))}
   </div>

src/components/Subtypes.tsx

@@ -1,7 +1,6 @@
 import { getShortcutKey, updateActiveTool } from "../utils";
 import { t } from "../i18n";
 import { Action } from "../actions/types";
-import { ToolButton } from "./ToolButton";
 import clsx from "clsx";
 import {
   Subtype,
@@ -74,17 +73,13 @@ export const SubtypeButton = (
     },
     keyTest,
     PanelComponent: ({ elements, appState, updateData, data }) => (
-      <ToolButton
-        type="icon"
-        icon={icon.call(this, { theme: appState.theme })}
-        selected={
+      <button
+        className={clsx("ToolIcon_type_button", "ToolIcon_type_button--show", {
+          ToolIcon: true,
+          "ToolIcon--selected":
             appState.activeSubtypes !== undefined &&
-          appState.activeSubtypes.includes(subtype)
-        }
-        className={clsx({
-          selected:
-            appState.activeSubtypes &&
             appState.activeSubtypes.includes(subtype),
+          "ToolIcon--plain": true,
         })}
         title={`${t(`toolBar.${subtype}`)}${title}`}
         aria-label={t(`toolBar.${subtype}`)}
@@ -105,8 +100,13 @@ export const SubtypeButton = (
               }
             : undefined
         }
-        size={data?.size || "medium"}
-      ></ToolButton>
+      >
+        {
+          <div className="ToolIcon__icon" aria-hidden="true">
+            {icon.call(this, { theme: appState.theme })}
+          </div>
+        }
+      </button>
     ),
   };
   if (key === "") {

src/components/ToolButton.tsx

@@ -43,7 +43,6 @@ type ToolButtonProps =
       type: "icon";
       children?: React.ReactNode;
       onClick?(): void;
-      onContextMenu?: React.MouseEventHandler;
     })
   | (ToolButtonBaseProps & {
       type: "radio";
@@ -121,7 +120,6 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
         aria-label={props["aria-label"]}
         type={type}
         onClick={onClick}
-        onContextMenu={props.type === "icon" ? props.onContextMenu : undefined}
         ref={innerRef}
         disabled={isLoading || props.isLoading}
       >

src/packages/extensions/ts/mathjax/implementation.tsx

@@ -35,7 +35,7 @@ import {
   getNonDeletedElements,
   redrawTextBoundingBox,
 } from "../../../../element";
-import { ButtonSelect } from "../../../../components/ButtonSelect";
+import { ButtonIconSelect } from "../../../../components/ButtonIconSelect";
 
 // Subtype imports
 import {
@@ -1433,22 +1433,20 @@ const createMathActions = () => {
         commitToHistory: true,
       };
     },
-    PanelComponent: ({ elements, appState, updateData }) => (
-      <fieldset>
-        <legend>{t("labels.changeMathOnly")}</legend>
-        <ButtonSelect
-          group="mathOnly"
-          options={[
-            {
-              value: false,
-              text: t("labels.mathOnlyFalse"),
-            },
-            {
-              value: true,
-              text: t("labels.mathOnlyTrue"),
-            },
-          ]}
-          value={getFormValue(
+    PanelComponent: ({ elements, appState, updateData }) => {
+      const textIcon = (text: string, selected: boolean) => {
+        const color = selected
+          ? "var(--button-color, var(--color-primary-darker))"
+          : "var(--button-color, var(--text-primary-color))";
+        return (
+          <div className="buttonList">
+            <span style={{ textAlign: "center", fontSize: "0.6rem", color }}>
+              {text.replace(" ", "\n")}
+            </span>
+          </div>
+        );
+      };
+      const value = getFormValue(
         elements,
         appState,
         (element) => {
@@ -1460,11 +1458,30 @@ const createMathActions = () => {
             : null;
         },
         getMathProps.getMathOnly(appState),
-          )}
+      );
+      return (
+        <fieldset>
+          <legend>{t("labels.changeMathOnly")}</legend>
+          <ButtonIconSelect
+            group="mathOnly"
+            options={[
+              {
+                value: false,
+                text: t("labels.mathOnlyFalse"),
+                icon: textIcon(t("labels.mathOnlyFalse"), value === false),
+              },
+              {
+                value: true,
+                text: t("labels.mathOnlyTrue"),
+                icon: textIcon(t("labels.mathOnlyTrue"), value === true),
+              },
+            ]}
+            value={value}
             onChange={(value) => updateData(value)}
           />
         </fieldset>
-    ),
+      );
+    },
     predicate: (...rest) =>
       rest[4] === undefined && enableActionChangeMathProps(rest[0], rest[1]),
     trackEvent: false,