Fixed: disabled buttons in modeler toolbar appear to be 'under' the m…

…odeler content

src/management-system-v2/components/modeler-toolbar.module.scss

@@ -0,0 +1,5 @@
+.Toolbar {
+  :global(.ant-btn-default:disabled) {
+    background-color: rgba($color: #eee, $alpha: 1);
+  }
+}

src/management-system-v2/components/modeler-toolbar.tsx

@@ -8,6 +8,8 @@ import type CommandStack from 'diagram-js/lib/command/CommandStack';
 import { Tooltip, Button, Space, Select, SelectProps } from 'antd';
 import { Toolbar, ToolbarGroup } from './toolbar';
 
+import styles from './modeler-toolbar.module.scss';
+
 import Icon, {
   ExportOutlined,
   SettingOutlined,
@@ -149,7 +151,7 @@ const ModelerToolbar: React.FC<ModelerToolbarProps> = ({ onOpenXmlEditor, versio
 
   return (
     <>
-      <Toolbar>
+      <Toolbar className={styles.Toolbar}>
         <Space style={{ width: '100%', justifyContent: 'space-between' }} wrap>
           <ToolbarGroup>
             <Select

src/management-system-v2/components/toolbar.tsx

@@ -4,9 +4,16 @@ import React, { PropsWithChildren } from 'react';
 
 import { Space } from 'antd';
 
-export const Toolbar: React.FC<PropsWithChildren> = ({ children }) => {
+type ToolbarProps = {
+  className?: string;
+};
+
+export const Toolbar: React.FC<PropsWithChildren<ToolbarProps>> = ({ children, className }) => {
   return (
-    <div style={{ position: 'absolute', zIndex: 10, padding: '12px', width: '100%' }}>
+    <div
+      className={className}
+      style={{ position: 'absolute', zIndex: 10, padding: '12px', width: '100%' }}
+    >
       {children}
     </div>
   );