From 5e9bf8841caa4512664e9a4943794f4e0274035c Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Fri, 12 Jul 2024 19:05:52 +0200
Subject: [PATCH] [mirotalksfu] - fix typo

---
 public/css/Room.css        |  6 ++---
 public/css/Root.css        |  2 +-
 public/js/Room.js          | 55 ++++++++++----------------------------
 public/js/Transcription.js |  2 +-
 4 files changed, 19 insertions(+), 46 deletions(-)

diff --git a/public/css/Room.css b/public/css/Room.css
index d3fb6dda..b18d0e76 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -720,7 +720,7 @@ th {
     width: var(--transcription-width);
     min-height: var(--transcription-height);
     min-width: var(--transcription-width);
-    background: var(--transcription-bg);
+    background: var(--trx-bg);
     border: var(--border);
     border-radius: 10px;
     box-shadow: var(--box-shadow);
@@ -734,7 +734,7 @@ th {
     display: flex;
     flex-flow: column wrap;
     justify-content: space-between;
-    background: var(--transcription-bg);
+    background: var(--trx-bg);
 }
 
 /*--------------------------------------------------------------
@@ -768,7 +768,7 @@ th {
     flex: 1;
     overflow-y: auto;
     padding: 10px;
-    background: var(--transcription-bg);
+    background: var(--trx-bg);
     max-width: 100%;
 }
 
diff --git a/public/css/Root.css b/public/css/Root.css
index 66643c8c..ac14b195 100644
--- a/public/css/Root.css
+++ b/public/css/Root.css
@@ -38,7 +38,7 @@
 
     --transcription-height: 680px;
     --transcription-width: 420px;
-    --transcription-bg: radial-gradient(#393939, #000000);
+    --trx-bg: radial-gradient(#393939, #000000);
 
     --vmi-wh: 15vw;
     /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
diff --git a/public/js/Room.js b/public/js/Room.js
index cbd149a7..a708462c 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -3929,7 +3929,7 @@ function setCustomTheme() {
     const color = themeCustom.color;
     swalBackground = `radial-gradient(${color}, ${color})`;
     document.documentElement.style.setProperty('--body-bg', `radial-gradient(${color}, ${color})`);
-    document.documentElement.style.setProperty('--transcription-bg', `radial-gradient(${color}, ${color})`);
+    document.documentElement.style.setProperty('--trx-bg', `radial-gradient(${color}, ${color})`);
     document.documentElement.style.setProperty('--msger-bg', `radial-gradient(${color}, ${color})`);
     document.documentElement.style.setProperty('--left-msg-bg', `${color}`);
     document.documentElement.style.setProperty('--right-msg-bg', `${color}`);
@@ -3950,10 +3950,7 @@ function setTheme() {
         case 'dark':
             swalBackground = 'linear-gradient(135deg, #000000, #434343)';
             document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #000000, #434343)');
-            document.documentElement.style.setProperty(
-                '--transcription-bg',
-                'linear-gradient(135deg, #000000, #434343)',
-            );
+            document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #000000, #434343)');
             document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #000000, #434343)');
             document.documentElement.style.setProperty('--left-msg-bg', '#1a1a1a');
             document.documentElement.style.setProperty('--right-msg-bg', '#2e2e2e');
@@ -3968,10 +3965,7 @@ function setTheme() {
         case 'grey':
             swalBackground = 'linear-gradient(135deg, #1a1a1a, #4f4f4f)';
             document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)');
-            document.documentElement.style.setProperty(
-                '--transcription-bg',
-                'linear-gradient(135deg, #1a1a1a, #4f4f4f)',
-            );
+            document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)');
             document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)');
             document.documentElement.style.setProperty('--left-msg-bg', '#2c2c2c');
             document.documentElement.style.setProperty('--right-msg-bg', '#3f3f3f');
@@ -3986,10 +3980,7 @@ function setTheme() {
         case 'green':
             swalBackground = 'linear-gradient(135deg, #002a22, #004d40)';
             document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #002a22, #004d40)');
-            document.documentElement.style.setProperty(
-                '--transcription-bg',
-                'linear-gradient(135deg, #002a22, #004d40)',
-            );
+            document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #002a22, #004d40)');
             document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #002a22, #004d40)');
             document.documentElement.style.setProperty('--left-msg-bg', '#001d1a');
             document.documentElement.style.setProperty('--right-msg-bg', '#003d2e');
@@ -4004,10 +3995,7 @@ function setTheme() {
         case 'blue':
             swalBackground = 'linear-gradient(135deg, #00274d, #004d80)';
             document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #00274d, #004d80)');
-            document.documentElement.style.setProperty(
-                '--transcription-bg',
-                'linear-gradient(135deg, #00274d, #004d80)',
-            );
+            document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #00274d, #004d80)');
             document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #00274d, #004d80)');
             document.documentElement.style.setProperty('--left-msg-bg', '#001f3f');
             document.documentElement.style.setProperty('--right-msg-bg', '#003366');
@@ -4022,10 +4010,7 @@ function setTheme() {
         case 'red':
             swalBackground = 'linear-gradient(135deg, #2a0d0d, #4d1a1a)';
             document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)');
-            document.documentElement.style.setProperty(
-                '--transcription-bg',
-                'linear-gradient(135deg, #2a0d0d, #4d1a1a)',
-            );
+            document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)');
             document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)');
             document.documentElement.style.setProperty('--left-msg-bg', '#2b0f0f');
             document.documentElement.style.setProperty('--right-msg-bg', '#4d1a1a');
@@ -4040,10 +4025,7 @@ function setTheme() {
         case 'purple':
             swalBackground = 'linear-gradient(135deg, #2a001d, #4d004a)';
             document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #2a001d, #4d004a)');
-            document.documentElement.style.setProperty(
-                '--transcription-bg',
-                'linear-gradient(135deg, #2a001d, #4d004a)',
-            );
+            document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #2a001d, #4d004a)');
             document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #2a001d, #4d004a)');
             document.documentElement.style.setProperty('--left-msg-bg', '#1b0014');
             document.documentElement.style.setProperty('--right-msg-bg', '#3e002a');
@@ -4056,12 +4038,9 @@ function setTheme() {
             selectTheme.selectedIndex = 5;
             break;
         case 'orange':
-            swalBackground = 'linear-gradient(135deg, #3d1a00, #ff8c00)'; // Darker gradient
+            swalBackground = 'linear-gradient(135deg, #3d1a00, #ff8c00)';
             document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
-            document.documentElement.style.setProperty(
-                '--transcription-bg',
-                'linear-gradient(135deg, #3d1a00, #ff8c00)',
-            );
+            document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
             document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
             document.documentElement.style.setProperty('--left-msg-bg', '#2c0f00');
             document.documentElement.style.setProperty('--right-msg-bg', '#ff8c00');
@@ -4069,17 +4048,14 @@ function setTheme() {
             document.documentElement.style.setProperty('--tab-btn-active', '#ff8c00');
             document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
             document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
-            document.documentElement.style.setProperty('--btns-bg-color', 'rgba(61, 26, 0, 0.7)'); // Darker button color
+            document.documentElement.style.setProperty('--btns-bg-color', 'rgba(61, 26, 0, 0.7)');
             document.body.style.background = 'linear-gradient(135deg, #3d1a00, #ff8c00)';
             selectTheme.selectedIndex = 6;
             break;
         case 'pink':
             swalBackground = 'linear-gradient(135deg, #4d001d, #ff66b2)';
             document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)');
-            document.documentElement.style.setProperty(
-                '--transcription-bg',
-                'linear-gradient(135deg, #4d001d, #ff66b2)',
-            );
+            document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)');
             document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)');
             document.documentElement.style.setProperty('--left-msg-bg', '#3e0016');
             document.documentElement.style.setProperty('--right-msg-bg', '#ff66b2');
@@ -4092,12 +4068,9 @@ function setTheme() {
             selectTheme.selectedIndex = 7;
             break;
         case 'yellow':
-            swalBackground = 'linear-gradient(135deg, #4d3b00, #ffc107)'; // Darker gradient
+            swalBackground = 'linear-gradient(135deg, #4d3b00, #ffc107)';
             document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)');
-            document.documentElement.style.setProperty(
-                '--transcription-bg',
-                'linear-gradient(135deg, #4d3b00, #ffc107)',
-            );
+            document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)');
             document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)');
             document.documentElement.style.setProperty('--left-msg-bg', '#3b2d00');
             document.documentElement.style.setProperty('--right-msg-bg', '#ffc107');
@@ -4105,7 +4078,7 @@ function setTheme() {
             document.documentElement.style.setProperty('--tab-btn-active', '#ffc107');
             document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)');
             document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)');
-            document.documentElement.style.setProperty('--btns-bg-color', 'rgba(77, 59, 0, 0.7)'); // Darker button color
+            document.documentElement.style.setProperty('--btns-bg-color', 'rgba(77, 59, 0, 0.7)');
             document.body.style.background = 'linear-gradient(135deg, #4d3b00, #ffc107)';
             selectTheme.selectedIndex = 8;
             break;
diff --git a/public/js/Transcription.js b/public/js/Transcription.js
index e4b6387e..410da595 100644
--- a/public/js/Transcription.js
+++ b/public/js/Transcription.js
@@ -250,7 +250,7 @@ class Transcription {
     toggleBg() {
         this.isBgTransparent = !this.isBgTransparent;
         this.isBgTransparent
-            ? document.documentElement.style.setProperty('--transcription-bg', 'rgba(0, 0, 0, 0.100)')
+            ? document.documentElement.style.setProperty('--trx-bg', 'rgba(0, 0, 0, 0.100)')
             : setTheme();
     }