Mod improvements

src/css/states/main_menu.scss

@@ -199,10 +199,6 @@
                     transform: translateX(50%) rotate(-7deg) scale(1.1);
                 }
             }
-
-            @include DarkThemeOverride {
-                color: $colorBlueBright;
-            }
         }
     }
 
@@ -326,6 +322,7 @@
                     /* @load-async */
                     background-image: uiResource("icons/edit_key.png") !important;
                 }
+                @include DarkThemeInvert;
             }
         }
 
@@ -354,13 +351,14 @@
             box-sizing: border-box;
             @include PlainText;
             @include S(margin-bottom, 5px);
-            display: grid;
+            display: flex;
-            grid-template-columns: 1fr auto auto;
+            flex-direction: column;
-            @include S(grid-gap, 5px);
 
             .author,
             .version {
                 @include SuperSmallText;
+                align-self: end;
+                opacity: 0.4;
             }
             .name {
                 overflow: hidden;
@@ -457,19 +455,19 @@
 
         .newGameButton {
             @include IncreasedClickArea(0px);
-            @include S(margin-left, 15px);
+            @include S(margin-left, 10px);
         }
 
         .modsButton {
             @include IncreasedClickArea(0px);
-            @include S(margin-left, 15px);
+            @include S(margin-left, 10px);
 
-            @include S(width, 20px);
+            // @include S(width, 20px);
 
-            & {
+            // & {
-                /* @load-async */
+            //     /* @load-async */
-                background-image: uiResource("res/ui/icons/mods_white.png") !important;
+            //     background-image: uiResource("res/ui/icons/mods_white.png") !important;
-            }
+            // }
             background-position: center center;
             background-size: D(15px);
             background-color: $modsColor !important;
@@ -837,6 +835,23 @@
             }
         }
 
+        .modsOverview {
+            background: $darkModeControlsBackground;
+
+            .modsList {
+                border-color: darken($darkModeControlsBackground, 5);
+
+                .mod {
+                    background: darken($darkModeControlsBackground, 5);
+                    color: white;
+                }
+            }
+
+            .dlcHint {
+                color: $accentColorBright;
+            }
+        }
+
         .footer {
             > a,
             .sidelinks > a {

src/css/states/mods.scss

@@ -62,6 +62,11 @@
             @include S(margin-top, 100px);
             color: lighten($accentColorDark, 15);
 
+            button {
+                @include S(margin-top, 10px);
+                @include S(padding, 10px, 20px);
+            }
+
             &::before {
                 @include S(margin-bottom, 15px);
                 content: "";
@@ -94,6 +99,10 @@
             display: grid;
             grid-template-columns: 1fr D(100px) D(80px) D(50px);
 
+            @include DarkThemeOverride {
+                background: darken($darkModeControlsBackground, 5);
+            }
+
             .checkbox {
                 align-self: center;
                 justify-self: center;

src/js/core/config.js

@@ -28,6 +28,8 @@ export const THIRDPARTY_URLS = {
         25: "https://www.youtube.com/watch?v=7OCV1g40Iew&",
         26: "https://www.youtube.com/watch?v=gfm6dS1dCoY",
     },
+
+    modBrowser: "https://shapez.mod.io/?preview=f55f6304ca4873d9a25f3b575571b948",
 };
 
 // export const A_B_TESTING_LINK_TYPE = Math.random() > 0.95 ? "steam_1_pr" : "steam_2_npr";

src/js/states/main_menu.js

@@ -161,7 +161,10 @@ export class MainMenuState extends GameState {
                             ${MODS.mods
                                 .map(mod => {
                                     return `
-                                    <div class="mod">${mod.metadata.name} @ v${mod.metadata.version}</div>
+                                    <div class="mod">
+                                        <div class="name">${mod.metadata.name}</div>
+                                        <div class="author">by ${mod.metadata.author}</div>
+                                    </div>
                                 `;
                                 })
                                 .join("")}
@@ -413,7 +416,10 @@ export class MainMenuState extends GameState {
         }
 
         // Mods
-        this.trackClicks(makeButton(outerDiv, ["modsButton", "styledButton"], "&nbsp;"), this.onModsClicked);
+        this.trackClicks(
+            makeButton(outerDiv, ["modsButton", "styledButton"], T.mods.title),
+            this.onModsClicked
+        );
 
         buttonContainer.appendChild(outerDiv);
     }

src/js/states/mods.js

@@ -18,6 +18,11 @@ export class ModsState extends TextualGameState {
                 <h1><button class="backButton"></button> ${this.getStateHeaderTitle()}</h1>
 
                 <div class="actions">
+                   ${
+                       (G_IS_STANDALONE || G_IS_DEV) && MODS.mods.length > 0
+                           ? `<button class="styledButton browseMods">${T.mods.browseMods}</button>`
+                           : ""
+                   }
                    ${
                        G_IS_STANDALONE || G_IS_DEV
                            ? `<button class="styledButton openModsFolder">${T.mods.openFolder}</button>`
@@ -53,8 +58,9 @@ export class ModsState extends TextualGameState {
             return `
 
             <div class="modsStats noMods">
-
                 ${T.mods.modsInfo}
+
+                <button class="styledButton browseMods">${T.mods.browseMods}</button>
             </div>
 
             `;
@@ -100,6 +106,10 @@ export class ModsState extends TextualGameState {
         if (openModsFolder) {
             this.trackClicks(openModsFolder, this.openModsFolder);
         }
+        const browseMods = this.htmlElement.querySelector(".browseMods");
+        if (browseMods) {
+            this.trackClicks(browseMods, this.openBrowseMods);
+        }
 
         const checkboxes = this.htmlElement.querySelectorAll(".checkbox");
         Array.from(checkboxes).forEach(checkbox => {
@@ -119,6 +129,11 @@ export class ModsState extends TextualGameState {
         ipcRenderer.invoke("open-mods-folder");
     }
 
+    openBrowseMods() {
+        this.app.analytics.trackUiClick("mods_sbrowse_link");
+        this.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.modBrowser);
+    }
+
     onSteamLinkClicked() {
         this.app.analytics.trackUiClick("mods_steam_link");
         this.app.platformWrapper.openExternalLink(

translations/base-en.yaml

@@ -1098,6 +1098,7 @@ mods:
     version: Version
     openFolder: Open Mods Folder
     folderOnlyStandalone: Opening the mod folder is only possible when running the standalone.
+    browseMods: Browse Mods
 
     modsInfo: >-
         To install and manage mods, copy them to the mods folder within the game directory. You can also use the 'Open Mods Folder' button on the top right.