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>
+        {option.text}
       </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={
-          appState.activeSubtypes !== undefined &&
-          appState.activeSubtypes.includes(subtype)
-        }
-        className={clsx({
-          selected:
-            appState.activeSubtypes &&
+      <button
+        className={clsx("ToolIcon_type_button", "ToolIcon_type_button--show", {
+          ToolIcon: true,
+          "ToolIcon--selected":
+            appState.activeSubtypes !== undefined &&
             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}
       >