feat: Update style of wld element (#388)

manifest.json

@@ -3,7 +3,7 @@
   "description": "Shows Win/Lose/Draw and average accuracy for players on chess.com",
   "author": "thieleju",
   "manifest_version": 3,
-  "version": "2.6.1",
+  "version": "2.7.0",
   "permissions": ["activeTab", "scripting", "storage"],
   "action": {
     "default_locale": "en",
@@ -24,10 +24,11 @@
       "matches": [
         "https://*.chess.com/play/online*",
         "https://*.chess.com/play/online/*",
+        "https://*.chess.com/play/arena/*",
         "https://*.chess.com/game/daily/*",
         "https://*.chess.com/game/live/*",
-        "https://*.chess.com/live/game/*",
         "https://*.chess.com/game/*",
+        "https://*.chess.com/live/game/*",
         "https://*.chess.com/analysis/game/live/*"
       ],
       "js": ["src/scripts/insights.ts"]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chess-com-insights",
   "private": true,
-  "version": "2.6.1",
+  "version": "2.7.0",
   "type": "module",
   "repository": {
     "type": "git",

settings.json

@@ -27,7 +27,7 @@
     "show_accuracy": true,
     "show_stats": true,
     "popup_darkmode": true,
-    "color_highlighting": false
+    "color_highlighting": true
   },
   "validGameModes": ["blitz", "rapid", "bullet", "daily"],
   "validTimeIntervals": [

src/modules/SettingsManager.ts

@@ -78,7 +78,7 @@ export class SettingsManager {
       !isBoolean(settings.show_accuracy),
       !isBoolean(settings.hide_own_stats),
       !Array.isArray(settings.game_modes) ||
-      !settings.game_modes.every(isValidGameMode),
+        !settings.game_modes.every(isValidGameMode),
       !isValidTimeInterval(settings.time_interval),
       !isBoolean(settings.color_highlighting)
     ]

src/modules/UiUpdater.ts

@@ -71,7 +71,12 @@ export class UiUpdater {
         `<span style="color: ${this.color_loses}">${stats.wld.loses}</span>/` +
         `<span style="color: ${this.color_draws}">${stats.wld.draws}</span>` +
         `</strong>`
-    } else str = `${stats.wld.wins}/${stats.wld.loses}/${stats.wld.draws}`
+    } else {
+      str =
+        `<strong>` +
+        `${stats.wld.wins}/${stats.wld.loses}/${stats.wld.draws}` +
+        `</strong>`
+    }
 
     if (stats.accuracy.avg !== 0 && showAccuracy)
       str += ` (${stats.accuracy.avg}%)`
@@ -208,6 +213,7 @@ export class UiUpdater {
   createInfoElement(className: string, id: string): HTMLElement {
     const infoEl = this.uiWindow.getDocument().createElement("div")
     infoEl.classList.add("user-tagline-rating", className)
+    infoEl.style.color = "var(--color-gray-600)"
     infoEl.id = id
     infoEl.style.marginLeft = "10px"
     return infoEl