fix: miscellaneous UI fixits (#41)

core/css.js

@@ -383,10 +383,6 @@ const styles = `
       stroke: #c6c6c6;
   }
 
-  .blocklyFlyoutButton .blocklyText {
-    fill: var(--colour-textFieldText);
-  }
-
   .blocklyFlyoutButtonShadow {
     fill: transparent;
   }
@@ -416,6 +412,14 @@ const styles = `
     font-weight: bold;
   }
 
+  .zelos-renderer.scratch-theme .blocklyText {
+    font-weight: 500;
+  }
+
+  .zelos-renderer.scratch-theme .blocklyFlyoutButton .blocklyText {
+    fill: var(--colour-textFieldText);
+  }
+
   /*
     Don't allow users to select text.  It gets annoying when trying to
     drag a block and selected text moves instead.
@@ -749,7 +753,7 @@ const styles = `
     outline: none;
   }
 
-  .blocklyTreeRow {
+  .blocklyToolboxDiv .blocklyTreeRow {
     line-height: 22px;
     margin: 0;
     padding: 0.375rem 0px;
@@ -933,6 +937,12 @@ const styles = `
     overflow-y: auto;
     overflow-x: hidden;
     z-index: 20000;  /* Arbitrary, but some apps depend on it... */
+    box-sizing: content-box;
+    box-shadow: none;
+  }
+
+  .blocklyWidgetDiv .blocklyMenu.blocklyFocused {
+    box-shadow: none;
   }
 
   .blocklyDropDownDiv .goog-menu {
@@ -972,7 +982,6 @@ const styles = `
    * #noflip to .goog-menuitem.
    */
   .blocklyWidgetDiv .goog-menuitem {
-    color: #000;
     font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
     list-style: none;
     margin: 0;
@@ -1021,7 +1030,6 @@ const styles = `
 
   .blocklyWidgetDiv .goog-menuitem-content ,
   .blocklyDropDownDiv .goog-menuitem-content {
-    color: #000;
     font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
   }
 

src/index.js

@@ -25,6 +25,8 @@ import {
   ContinuousMetrics,
 } from '@blockly/continuous-toolbox';
 
+import './scratch_continuous_category.js';
+
 export * from 'blockly';
 export * from './categories.js';
 export * from './procedures.js';
@@ -45,5 +47,7 @@ export function inject(container, options) {
 }
 
 Blockly.Scrollbar.scrollbarThickness = Blockly.Touch.TOUCH_ENABLED ? 14 : 11;
+Blockly.FlyoutButton.TEXT_MARGIN_X = 40;
+Blockly.FlyoutButton.TEXT_MARGIN_Y = 10;
 Blockly.ContextMenuRegistry.registry.unregister('blockDisable');
 Blockly.ContextMenuRegistry.registry.unregister('blockInline');

src/scratch_continuous_category.js

@@ -0,0 +1,23 @@
+import * as Blockly from 'blockly/core';
+import {ContinuousCategory} from '@blockly/continuous-toolbox';
+
+class ScratchContinuousCategory extends ContinuousCategory {
+  createIconDom_() {
+    const icon = super.createIconDom_();
+    icon.style.border = `1px solid ${this.toolboxItemDef_['secondaryColour']}`;
+    return icon;
+  }
+
+  setSelected(isSelected) {
+    super.setSelected(isSelected);
+    // Prevent hardcoding the background color to grey.
+    this.rowDiv_.style.backgroundColor = '';
+  }
+}
+
+Blockly.registry.register(
+  Blockly.registry.Type.TOOLBOX_ITEM,
+  Blockly.ToolboxCategory.registrationName,
+  ScratchContinuousCategory,
+  true,
+);