Merge pull request #79 from ut-code/change-blockly-toolbox-styles

ツールボックスのスタイルを調整

Author: chelproc

packages/web/src/main.tsx

@@ -1,3 +1,4 @@
+import { createTheme, ThemeProvider } from "@mui/material";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
@@ -15,8 +16,16 @@ const router = createBrowserRouter([
   },
 ]);
 
+const theme = createTheme({
+  components: {
+    MuiAppBar: { defaultProps: { elevation: 0, variant: "outlined" } },
+  },
+});
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <ThemeProvider theme={theme}>
+      <RouterProvider router={router} />
+    </ThemeProvider>
   </React.StrictMode>
 );

packages/web/src/options.ts

@@ -317,6 +317,7 @@ const options: any = {
   zoom: {
     controls: true,
   },
+  renderer: "thrasos",
 };
 
 export default options;

packages/web/src/style.css

@@ -1,49 +1,74 @@
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
 }
 
 body {
   margin: 0px;
 }
 
-/* ut-code/school-festival/src/grobal.css */
-html {
+:root {
+  --divider-color: #ddd;
   overflow: hidden;
 }
-  
-  html, body, #root {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .blocklyPath {
-    stroke: #444444 !important;
-  }
-  .blocklySelected .blocklyPath {
-    stroke-width: inherit !important;
-    stroke: #000000 !important;
-  }
-  .blocklyText {
-    fill: #222 !important;
-  }
-  .blocklySelected .blocklyText {
-    fill: #000 !important;
-  }
-  .blocklyFieldRect {
-    fill: #fff !important;
-    fill-opacity: 1 !important;
-  }
-  .blocklyDropDownDiv {
-    border: 1px solid #aaa;
-  }
-  .blocklyDropDownDiv .blocklyDropDownArrow {
-    border-top: 1px solid #aaa;
-    border-left: 1px solid #aaa;
-  }
-  .blocklyFlyout {
-    border-right: 1px solid #ddd;
-    background-color: #fff;
-  }
-  .blocklyFlyoutBackground {
-    fill: transparent;
-  }
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+.blocklyPath {
+  stroke: #444 !important;
+}
+.blocklySelected .blocklyPath {
+  stroke-width: inherit !important;
+  stroke: #000 !important;
+}
+.blocklyText {
+  fill: #222 !important;
+}
+.blocklySelected .blocklyText {
+  fill: #000 !important;
+}
+.blocklyFieldRect {
+  fill: #fff !important;
+  fill-opacity: 1 !important;
+}
+.blocklyDropDownDiv {
+  border: 1px solid var(--divider-color);
+}
+.blocklyDropDownDiv .blocklyDropDownArrow {
+  border-top: 1px solid var(--divider-color);
+  border-left: 1px solid var(--divider-color);
+}
+.blocklyToolboxDiv {
+  background-color: #fff;
+  border-right: 1px solid var(--divider-color);
+  width: 120px;
+}
+.blocklyTreeRow {
+  margin: 0;
+  padding: 8px 12px !important;
+}
+.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+  background-color: #eee;
+}
+.blocklyTreeRow.blocklyTreeSelected {
+  background-color: #ddd !important;
+}
+.blocklyTreeSelected .blocklyTreeLabel {
+  color: inherit;
+}
+.blocklyFlyout {
+  border-right: 1px solid #ddd;
+  background-color: #fff;
+}
+.blocklyTreeIcon {
+  display: none !important;
+}
+.blocklyFlyoutBackground {
+  fill: transparent;
+}