From a6bbb22152509aa6fadba7a62991a43d453ab788 Mon Sep 17 00:00:00 2001
From: dengr1065 <dengr1065@gmail.com>
Date: Wed, 22 Jul 2020 08:50:52 +0300
Subject: [PATCH] Finish new settings, add logo to about page

---
 src/css/states/about.scss    | 23 +++++++++++++++++++
 src/css/states/settings.scss | 44 +++++++++++++++++++++++++-----------
 src/js/states/about.js       | 17 +++++++++-----
 translations/base-en.yaml    |  4 ++--
 4 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/src/css/states/about.scss b/src/css/states/about.scss
index aeac1e38..052afe56 100644
--- a/src/css/states/about.scss
+++ b/src/css/states/about.scss
@@ -1,9 +1,32 @@
 #state_AboutState {
     > .container .content {
+        @include S(max-width, 600px);
         @include PlainText;
+        padding: 0;
+    }
+
+    .head {
+        background: rgba(0, 0, 0, 0.2);
+        @include S(padding, 10px);
+
+        img {
+            display: block;
+            margin: 0 auto;
+            @include S(max-width, 300px);
+        }
+    }
+
+    .text {
+        @include S(margin, 10px);
     }
 
     a {
         @include S(margin, 0, 3px);
     }
+
+    @include DarkThemeOverride {
+        .head {
+            background: rgba(22, 21, 21, 0.1);
+        }
+    }
 }
diff --git a/src/css/states/settings.scss b/src/css/states/settings.scss
index 6140e46a..cfa496ed 100644
--- a/src/css/states/settings.scss
+++ b/src/css/states/settings.scss
@@ -109,6 +109,10 @@
                 @include S(margin-top, 4px);
                 width: calc(100% - #{D(20px)});
                 text-align: start;
+
+                &::after {
+                    content: unset;
+                }
             }
 
             button.categoryButton {
@@ -139,24 +143,38 @@
     }
 
     @include DarkThemeOverride {
-        .content {
-            .setting {
-                background: darken($darkModeGameBackground, 10);
+        .container .content {
+            .sidebar {
+                button.categoryButton {
+                    background-color: #44444f;
 
-                .value.enum {
-                    // dirty but works
-                    filter: invert(0.85);
-                    color: #222;
-                }
-
-                .value.checkbox {
-                    background-color: #74767b;
-
-                    &.checked {
+                    &.active {
                         background-color: $colorBlueBright;
                     }
                 }
             }
+
+            .categoryContainer {
+                .category {
+                    .setting {
+                        background: darken($darkModeGameBackground, 10);
+
+                        .value.enum {
+                            // dirty but works
+                            filter: invert(0.78) sepia(40%) hue-rotate(190deg);
+                            color: #222;
+                        }
+
+                        .value.checkbox {
+                            background-color: #74767b;
+
+                            &.checked {
+                                background-color: $colorBlueBright;
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }
diff --git a/src/js/states/about.js b/src/js/states/about.js
index 900adc5a..db06d8de 100644
--- a/src/js/states/about.js
+++ b/src/js/states/about.js
@@ -1,9 +1,7 @@
 import { TextualGameState } from "../core/textual_game_state";
-import { SOUNDS } from "../platform/sound";
 import { T } from "../translations";
-import { KEYMAPPINGS, getStringForKeyCode } from "../game/key_action_mapper";
-import { Dialog } from "../core/modal_dialog_elements";
 import { THIRDPARTY_URLS } from "../core/config";
+import { cachebust } from "../core/cachebust";
 
 export class AboutState extends TextualGameState {
     constructor() {
@@ -15,9 +13,16 @@ export class AboutState extends TextualGameState {
     }
 
     getMainContentHTML() {
-        return T.about.body
-            .replace("<githublink>", THIRDPARTY_URLS.github)
-            .replace("<discordlink>", THIRDPARTY_URLS.discord);
+        return `
+            <div class="head">
+                <img src="${cachebust("res/logo.png")}" alt="shapez.io Logo">
+            </div>
+            <div class="text">
+            ${T.about.body
+                .replace("<githublink>", THIRDPARTY_URLS.github)
+                .replace("<discordlink>", THIRDPARTY_URLS.discord)}
+            </div>
+        `;
     }
 
     onEnter() {
diff --git a/translations/base-en.yaml b/translations/base-en.yaml
index 781e55a9..38196d52 100644
--- a/translations/base-en.yaml
+++ b/translations/base-en.yaml
@@ -856,13 +856,13 @@ about:
     body: >-
         This game is open source and developed by <a href="https://github.com/tobspr" target="_blank">Tobias Springer</a> (this is me).<br><br>
 
-        If you want to contribute, check out <a href="<githublink>" target="_blank">shapez.io on github</a>.<br><br>
+        If you want to contribute, check out <a href="<githublink>" target="_blank">shapez.io on GitHub</a>.<br><br>
 
         This game wouldn't have been possible without the great Discord community around my games - You should really join the <a href="<discordlink>" target="_blank">Discord server</a>!<br><br>
 
         The soundtrack was made by <a href="https://soundcloud.com/pettersumelius" target="_blank">Peppsen</a> - He's awesome.<br><br>
 
-        Finally, huge thanks to my best friend <a href="https://github.com/niklas-dahl" target="_blank">Niklas</a> - Without our factorio sessions, this game would never have existed.
+        Finally, huge thanks to my best friend <a href="https://github.com/niklas-dahl" target="_blank">Niklas</a> - Without our Factorio sessions, this game would never have existed.
 
 changelog:
     title: Changelog