From d7e3503861481288ce6c83c216fecc1b9db58924 Mon Sep 17 00:00:00 2001
From: Danny McGee <dannymcgee@gmail.com>
Date: Thu, 16 Nov 2023 12:55:43 -0500
Subject: [PATCH] Misc UI tweak

---
 studio-frontend/src/app/app.element.scss | 5 +++++
 studio-frontend/src/app/app.element.ts   | 2 ++
 2 files changed, 7 insertions(+)

diff --git a/studio-frontend/src/app/app.element.scss b/studio-frontend/src/app/app.element.scss
index 0895210..174dc71 100644
--- a/studio-frontend/src/app/app.element.scss
+++ b/studio-frontend/src/app/app.element.scss
@@ -102,6 +102,11 @@
 	}
 }
 
+sts-button.active {
+	background: #7A2C34E3;
+	color: #FFF;
+}
+
 // Hierarchy (TODO: Probably move this)
 .hierarchy {
 	overflow: auto;
diff --git a/studio-frontend/src/app/app.element.ts b/studio-frontend/src/app/app.element.ts
index 67b2bf5..b38685b 100644
--- a/studio-frontend/src/app/app.element.ts
+++ b/studio-frontend/src/app/app.element.ts
@@ -13,6 +13,7 @@ import {
 import { match } from "@storyteller/utility";
 import { LitElement, html, unsafeCSS } from "lit";
 import { customElement, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 
 import "./button.element";
 import "./help.element";
@@ -217,6 +218,7 @@ export class AppElement extends LitElement {
 					Save Scene
 				</sts-button>
 				<sts-button
+					class=${classMap({ active: this.showHelp })}
 					icon="circle-info"
 					@click=${this.toggleHelp}
 				>