From 5c9202119bb6cf8cc5787fbb9768804594f4b7f3 Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Sat, 11 May 2024 21:12:14 +0700
Subject: [PATCH] Update style of the show/hide touch control button

---
 src/assets/css/game-bar.styl                 | 15 ++++++++++++---
 src/modules/game-bar/action-touch-control.ts |  5 ++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/game-bar.styl b/src/assets/css/game-bar.styl
index a75bace..ec46004 100644
--- a/src/assets/css/game-bar.styl
+++ b/src/assets/css/game-bar.styl
@@ -50,6 +50,7 @@
         button {
             width: 60px;
             height: 60px;
+            border-radius: 0;
 
             svg {
                 width: 28px;
@@ -66,6 +67,14 @@
                     transform: scale(0.75);
                 }
             }
+
+            &.bx-activated {
+                background-color: white;
+
+                svg {
+                    filter: invert(1);
+                }
+            }
         }
 
         /* Touch controller buttons */
@@ -75,16 +84,16 @@
             }
         }
 
-        /* Show disable button */
+        /* Show enabled button */
         div[data-enabled='true'] {
-            button:last-of-type {
+            button:first-of-type {
                 display: block;
             }
         }
 
         /* Show enable button */
         div[data-enabled='false'] {
-            button:first-of-type {
+            button:last-of-type {
                 display: block;
             }
         }
diff --git a/src/modules/game-bar/action-touch-control.ts b/src/modules/game-bar/action-touch-control.ts
index 03bb13c..69db89a 100644
--- a/src/modules/game-bar/action-touch-control.ts
+++ b/src/modules/game-bar/action-touch-control.ts
@@ -26,6 +26,7 @@ export class TouchControlAction extends BaseGameBarAction {
             icon: BxIcon.TOUCH_CONTROL_ENABLE,
             title: t('show-touch-controller'),
             onClick: onClick,
+            classes: ['bx-activated'],
         });
 
         const $btnDisable = createButton({
@@ -35,10 +36,12 @@ export class TouchControlAction extends BaseGameBarAction {
             onClick: onClick,
         });
 
-        this.$content = CE('div', {'data-enabled': 'true'},
+        this.$content = CE('div', {},
             $btnEnable,
             $btnDisable,
         );
+
+        this.reset();
     }
 
     render(): HTMLElement {