Update ui design

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;
 
-            button.about {
-                background-color: $colorGreenBright;
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+
+                &.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">