Update ui design

res_built/atlas/atlas0_10.json

@@ -1399,6 +1399,6 @@
 	"format": "RGBA8888",
 	"size": {"w":690,"h":128},
 	"scale": "0.1",
-	"smartupdate": "$TexturePacker:SmartUpdate:bf30498b7e1d76f2f7b9d1274acdd7cd:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
+	"smartupdate": "$TexturePacker:SmartUpdate:64fccb50e5cbc78c707e6728e5ddc881:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
 }
 }

res_built/atlas/atlas0_100.json

@@ -1399,6 +1399,6 @@
 	"format": "RGBA8888",
 	"size": {"w":2048,"h":2708},
 	"scale": "1",
-	"smartupdate": "$TexturePacker:SmartUpdate:bf30498b7e1d76f2f7b9d1274acdd7cd:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
+	"smartupdate": "$TexturePacker:SmartUpdate:64fccb50e5cbc78c707e6728e5ddc881:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
 }
 }

res_built/atlas/atlas0_25.json

@@ -1399,6 +1399,6 @@
 	"format": "RGBA8888",
 	"size": {"w":490,"h":837},
 	"scale": "0.25",
-	"smartupdate": "$TexturePacker:SmartUpdate:bf30498b7e1d76f2f7b9d1274acdd7cd:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
+	"smartupdate": "$TexturePacker:SmartUpdate:64fccb50e5cbc78c707e6728e5ddc881:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
 }
 }

res_built/atlas/atlas0_50.json

@@ -1399,6 +1399,6 @@
 	"format": "RGBA8888",
 	"size": {"w":1522,"h":949},
 	"scale": "0.5",
-	"smartupdate": "$TexturePacker:SmartUpdate:bf30498b7e1d76f2f7b9d1274acdd7cd:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
+	"smartupdate": "$TexturePacker:SmartUpdate:64fccb50e5cbc78c707e6728e5ddc881:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
 }
 }

res_built/atlas/atlas0_75.json

@@ -1399,6 +1399,6 @@
 	"format": "RGBA8888",
 	"size": {"w":1759,"h":1834},
 	"scale": "0.75",
-	"smartupdate": "$TexturePacker:SmartUpdate:bf30498b7e1d76f2f7b9d1274acdd7cd:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
+	"smartupdate": "$TexturePacker:SmartUpdate:64fccb50e5cbc78c707e6728e5ddc881:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
 }
 }

res_raw/atlas.tps

@@ -449,6 +449,7 @@
             <key type="filename">sprites/blueprints/miner-chainable.png</key>
             <key type="filename">sprites/blueprints/miner.png</key>
             <key type="filename">sprites/blueprints/rotater-ccw.png</key>
+            <key type="filename">sprites/blueprints/rotater-fl.png</key>
             <key type="filename">sprites/blueprints/rotater.png</key>
             <key type="filename">sprites/blueprints/splitter-compact-inverse.png</key>
             <key type="filename">sprites/blueprints/splitter-compact.png</key>
@@ -459,6 +460,7 @@
             <key type="filename">sprites/blueprints/underground_belt_exit.png</key>
             <key type="filename">sprites/buildings/miner-chainable.png</key>
             <key type="filename">sprites/buildings/rotater-ccw.png</key>
+            <key type="filename">sprites/buildings/rotater-fl.png</key>
             <key type="filename">sprites/buildings/splitter-compact-inverse.png</key>
             <key type="filename">sprites/buildings/splitter-compact.png</key>
             <key type="filename">sprites/buildings/underground_belt_entry-tier2.png</key>

src/css/states/about.scss

@@ -3,16 +3,16 @@
         @include S(max-width, 600px);
         @include PlainText;
         padding: 0;
+        background: transparent;
     }
 
     .head {
-        background: rgba(0, 0, 0, 0.2);
-        @include S(padding, 10px);
+        @include S(padding, 20px);
 
         img {
             display: block;
             margin: 0 auto;
-            @include S(max-width, 300px);
+            @include S(max-width, 200px);
         }
     }
 
@@ -23,10 +23,4 @@
     a {
         @include S(margin, 0, 3px);
     }
-
-    @include DarkThemeOverride {
-        .head {
-            background: rgba(22, 21, 21, 0.1);
-        }
-    }
 }

src/css/states/main_menu.scss

@@ -55,7 +55,7 @@
         opacity: 0;
         display: none;
         transform: translate(50%, 50%);
-        filter: blur(10px);
+        // filter: blur(10px);
 
         $opacity: 0.2;
         &.loaded {
@@ -178,6 +178,10 @@
                     transform: translateX(50%) rotate(-7deg) scale(1.1);
                 }
             }
+
+            @include DarkThemeOverride {
+                color: $colorBlueBright;
+            }
         }
     }
 

src/css/states/settings.scss

@@ -1,6 +1,6 @@
 #state_SettingsState {
-    $colorCategoryButton: #393747;
-    $colorCategoryButtonSelected: #5c5872;
+    $colorCategoryButton: #eee;
+    $colorCategoryButtonSelected: #5f748b;
 
     .container .content {
         display: flex;
@@ -115,16 +115,23 @@
                 }
             }
 
-            button.categoryButton {
+            button.categoryButton,
+            button.about {
                 background-color: $colorCategoryButton;
+                color: #777a7f;
 
                 &.active {
                     background-color: $colorCategoryButtonSelected;
+                    color: #fff;
+
+                    &:hover {
+                        opacity: 1;
+                    }
                 }
-            }
 
-            button.about {
-                background-color: $colorGreenBright;
+                &.pressed {
+                    transform: none !important;
+                }
             }
 
             .versionbar {
@@ -145,8 +152,9 @@
     @include DarkThemeOverride {
         .container .content {
             .sidebar {
-                button.categoryButton {
-                    background-color: #44444f;
+                button.categoryButton,
+                button.about {
+                    background-color: #3f3f47;
 
                     &.active {
                         background-color: $colorBlueBright;

src/js/changelog.js

@@ -4,6 +4,7 @@ export const CHANGELOG = [
         date: "unreleased",
         entries: [
             "WIRES",
+            "Reworked menu UI design (by dengr1605)",
             "Allow holding ALT in belt planner to reverse direction (by jakobhellermann)",
             "Clear cursor when trying to pipette the same building twice (by hexy)",
             "Added keybinding to close menus (by isaisstillalive / Sandwichs-del)",

src/js/profile/application_settings.js

@@ -252,7 +252,7 @@ export const allApplicationSettings = [
         changeCb: (app, id) => {},
     }),
 
-    new BoolSetting("alwaysMultiplace", enumCategories.userInterface, (app, value) => {}),
+    new BoolSetting("alwaysMultiplace", enumCategories.advanced, (app, value) => {}),
     new BoolSetting("enableTunnelSmartplace", enumCategories.advanced, (app, value) => {}),
     new BoolSetting("vignette", enumCategories.userInterface, (app, value) => {}),
     new BoolSetting("compactBuildingInfo", enumCategories.userInterface, (app, value) => {}),

src/js/states/settings.js

@@ -18,13 +18,16 @@ export class SettingsState extends TextualGameState {
         <div class="sidebar">
             ${this.getCategoryButtonsHtml()}
 
-            <div class="other">
-                ${
-                    this.app.platformWrapper.getSupportsKeyboard()
-                        ? `<button class="styledButton editKeybindings">${T.keybindings.title}</button>`
-                        : ""
-                }
+            ${
+                this.app.platformWrapper.getSupportsKeyboard()
+                    ? `
+            <button class="styledButton categoryButton editKeybindings">
+            ${T.keybindings.title}
+            </button>`
+                    : ""
+            }
 
+            <div class="other">
                 <button class="styledButton about">${T.about.title}</button>
 
                 <div class="versionbar">