Theme colors will only show in dev mode

definitions/index.d.ts

@@ -4,7 +4,7 @@
 declare type Environment = "production" | "development" | "test";
 declare const ELECTRON_ENV: "renderer" | "main";
 
-// Gloval variables set by webpack
+// Global variables set by webpack
 declare const ENV: Environment;
 
 

src/@batch-flask/ui/form/form-field/form-field.scss

@@ -8,7 +8,7 @@ bl-form-field {
         sup.required {
             line-height: 1em;
             .fa-asterisk {
-                color: var(--color-danger);
+                color: $danger-color;
                 font-size: 8px;
             }
         }

src/app/components/account/details/programmatic-usage/programming-sample/programming-sample.scss

@@ -16,6 +16,6 @@ bl-programming-sample {
     }
 
     bl-tp-cell {
-        border: 1px solid var(--color-input-border);
+        border: 1px solid $input-border-color;
     }
 }

src/app/components/layout/main-navigation/profile-button/profile-button.component.spec.ts

@@ -130,15 +130,15 @@ describe("ProfileButtonComponent", () => {
         fixture.detectChanges();
         expect(contextMenuServiceSpy.openMenu).toHaveBeenCalledOnce();
         const items = contextMenuServiceSpy.lastMenu.items;
-        expect(items.length).toBe(14);
+        expect(items.length).toBe(13);
     });
 
     describe("Clicking on the profile", () => {
         it("It shows a context menu", () => {
             click(clickableEl);
             expect(contextMenuServiceSpy.openMenu).toHaveBeenCalled();
             const items = contextMenuServiceSpy.lastMenu.items;
-            expect(items.length).toEqual(14);
+            expect(items.length).toEqual(13);
 
             let i = 0;
             const expectMenuItem= (menuItemType, label?) => {
@@ -155,13 +155,12 @@ describe("ProfileButtonComponent", () => {
             expectMenuItem(ContextMenuItem, "profile-button.authentication");
             expectMenuItem(ContextMenuItem, "profile-button.keybindings");
             expectMenuItem(MultiContextMenuItem, "Language (Preview)");
+            expectMenuItem(MultiContextMenuItem, "Developer");
             expectMenuItem(ContextMenuItem, "profile-button.thirdPartyNotices");
             expectMenuItem(ContextMenuItem, "profile-button.viewLogs");
             expectMenuItem(ContextMenuItem, "profile-button.report");
             expectMenuItem(ContextMenuItem, "profile-button.about");
             expectMenuItem(ContextMenuSeparator);
-            expectMenuItem(ContextMenuItem, "profile-button.viewTheme");
-            expectMenuItem(ContextMenuSeparator);
             expectMenuItem(ContextMenuItem, "profile-button.logout");
         });
 

src/app/components/layout/main-navigation/profile-button/profile-button.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, isDevMode, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 import { I18nService, Locale, LocaleService, TranslatedLocales } from "@batch-flask/core";
 import {
@@ -112,14 +112,19 @@ export class ProfileButtonComponent implements OnDestroy, OnInit {
             new ContextMenuItem({ label: this.i18n.t("profile-button.report"), click: () => this._openGithubIssues() }),
             new ContextMenuItem({ label: this.i18n.t("profile-button.about"), click: () => this._showAboutPage() }),
             new ContextMenuSeparator(),
-            new ContextMenuItem({
-                label: this.i18n.t("profile-button.viewTheme"),
-                click: () => this._gotoThemeColors(),
-            }),
-            new ContextMenuSeparator(),
             new ContextMenuItem({ label: this.i18n.t("profile-button.logout"), click: () => this._logout() }),
         ];
 
+        if (isDevMode()) {
+            const devMenuItem = new MultiContextMenuItem({
+                label: "Developer",
+                subitems: [
+                    new ContextMenuItem({ label: this.i18n.t("profile-button.viewTheme"), click: () => this._gotoThemeColors() })
+                ],
+            });
+            items.splice(5, 0, devMenuItem);
+        }
+
         items.unshift(this._getAutoUpdateMenuItem());
         this.contextMenuService.openMenu(new ContextMenu(items));
     }

src/app/components/pool/action/scale/autoscale-formula-picker/autoscale-formula-picker.scss

@@ -25,8 +25,8 @@
     .formula-list {
         height: 100%;
         overflow: auto;
-        border-top: 1px solid #d5d5d5;
-        border-bottom: 1px solid #d5d5d5;
+        border-top: 1px solid $input-disabled-border-color;
+        border-bottom: 1px solid $input-disabled-border-color;
 
         > .formula {
             display: flex;
@@ -41,7 +41,7 @@
             }
 
             &:not(:last-child) {
-                border-bottom: 1px solid #d5d5d5;
+                border-bottom: 1px solid $input-disabled-border-color;
             }
 
             &:hover {

src/app/components/tenant-picker/tenant-card.scss

@@ -33,7 +33,7 @@ be-tenant-card {
         }
 
         background: $card-background;
-        border: 1px solid #ccc;
+        border: 1px solid $border-color;
         border-radius: $tenant-card-padding;
 
         &.home-tenant, &.home-tenant .main-tile {

src/app/styles/base/forms.scss

@@ -70,7 +70,7 @@ fieldset {
     display: flex;
     flex-flow: row nowrap;
     padding: 0;
-    border: 1px solid #aaa;
+    border: 1px solid $border-color;
     background-color: $main-background;
     margin-top: 16px;