finalized look and changed locked building to same sprite

src/css/ingame_hud/buildings_toolbar.scss

@@ -49,52 +49,45 @@
         }
 
         .building {
+            .icon {
                 color: $accentColorDark;
                 display: flex;
-            flex-direction: column;
+                flex-direction: column-reverse;
                 position: relative;
                 align-items: center;
                 justify-content: center;
                 @include S(padding, 5px);
                 @include S(padding-bottom, 1px);
                 @include S(width, 35px);
-            @include S(height, 40px);
+                @include S(height, 37px);
+                @include S(border-radius, $globalBorderRadius);
 
                 background: center center / 70% no-repeat;
+            }
 
             &:not(.unlocked) {
+                .icon {
                     @include S(width, 20px);
                     opacity: 0.15;
-                background-image: none !important;
+                }
-
                 &.editor {
+                    .icon {
                         pointer-events: all;
                         cursor: pointer;
                         &:hover {
                             background-color: rgba(22, 30, 68, 0.1);
                         }
                     }
-
+                }
-                &::before {
+                &:not(.editor) {
-                    content: " ";
+                    .icon {
-
+                        background-image: uiResource("locked_building.png") !important;
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    left: 0;
-                    z-index: 4;
-                    & {
-                        /* @load-async */
-                        background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)}
-                            no-repeat;
                     }
                 }
             }
 
-            @include S(border-radius, $globalBorderRadius);
-
             &.unlocked {
+                .icon {
                     pointer-events: all;
                     transition: all 50ms ease-in-out;
                     transition-property: background-color, transform;
@@ -116,27 +109,31 @@
                             color: #111;
                         }
                     }
+                }
 
                 .puzzle-lock {
                     & {
                         /* @load-async */
-                        background: uiResource("locked_building.png") center center / #{D(15px)} #{D(15px)}
+                        background: uiResource("locked_building.png") center center / #{D(14px)} #{D(14px)}
                             no-repeat;
                     }
 
                     display: grid;
                     grid-auto-flow: column;
-                    @include S(margin-bottom, 58px);
+                    @include S(margin-top, 2px);
+                    @include S(margin-left, 16px);
+                    @include S(margin-bottom, 29px);
 
                     position: absolute;
+                    bottom: 20px;
                     transition: all 0.12s ease-in-out;
                     transition-property: opacity, transform;
 
                     cursor: pointer;
                     pointer-events: all;
 
-                    @include S(width, 15px);
+                    @include S(width, 14px);
-                    @include S(height, 15px);
+                    @include S(height, 14px);
 
                     &:hover {
                         opacity: 0.5;

src/css/resources.scss

@@ -5,9 +5,11 @@ $buildings: belt, cutter, miner, mixer, painter, rotater, balancer, stacker, tra
 @each $building in $buildings {
     [data-icon="building_icons/#{$building}.png"] {
         /* @load-async */
+        .icon {
             background-image: uiResource("res/ui/building_icons/#{$building}.png") !important;
         }
     }
+}
 
 $buildingsAndVariants: belt, balancer, underground_belt, underground_belt-tier2, miner, miner-chainable,
     cutter, cutter-quad, rotater, rotater-ccw, stacker, mixer, painter-double, painter-quad, trash, storage,

src/js/game/hud/parts/base_toolbar.js

@@ -1,7 +1,6 @@
 import { gMetaBuildingRegistry } from "../../../core/global_registries";
 import { STOP_PROPAGATION } from "../../../core/signal";
 import { makeDiv, safeModulo } from "../../../core/utils";
-import { MetaBeltBuilding } from "../../buildings/belt";
 import { MetaBlockBuilding } from "../../buildings/block";
 import { MetaConstantProducerBuilding } from "../../buildings/constant_producer";
 import { MetaGoalAcceptorBuilding } from "../../buildings/goal_acceptor";
@@ -114,11 +113,13 @@ export class HUDBaseToolbar extends BaseHUDPart {
             itemContainer.setAttribute("data-id", metaBuilding.getId());
             binding.add(() => this.selectBuildingForPlacement(metaBuilding));
 
-            this.trackClicks(itemContainer, () => this.selectBuildingForPlacement(metaBuilding), {
+            const icon = makeDiv(itemContainer, null, ["icon"]);
+
+            this.trackClicks(icon, () => this.selectBuildingForPlacement(metaBuilding), {
                 clickSound: null,
             });
 
-            //new stuff
+            //lock icon for puzzle editor
             if (this.root.gameMode.getIsEditor() && !this.inRequiredBuildings(metaBuilding)) {
                 const puzzleLock = makeDiv(itemContainer, null, ["puzzle-lock"]);
 
@@ -317,7 +318,6 @@ export class HUDBaseToolbar extends BaseHUDPart {
             gMetaBuildingRegistry.findByClass(MetaConstantProducerBuilding),
             gMetaBuildingRegistry.findByClass(MetaGoalAcceptorBuilding),
             gMetaBuildingRegistry.findByClass(MetaBlockBuilding),
-            gMetaBuildingRegistry.findByClass(MetaBeltBuilding),
         ];
         return requiredBuildings.includes(metaBuilding);
     }