[UI] New Icons + new Default Theme + CSS Variables Overhaul (#2384)

* feat: add new icons

* feat: updated card and frontend assets

* feat: add heroic icon to sidebar

* feat: add figma colors

* ui: update button colors

* feat: add new theme

* feat: better anti-cheat box

* feat: check for anticheat on macOS

* ui: updated colors variables

* ui: adjust anticheat box alignment

* fix: library item should be active on gamepage

* wip: fix some themes

* Revert "wip: fix some themes"

This reverts commit f9c9b7b.

* fix: setting icon

* ui: use fallback variables to fix the old themes

* ui: more style updates

* fix: anticheatbox width and margins

* ui: dm and other style fixes

* ui: updated settings icon and more fixes

* ui: add different icons to anticheat info

* ui: summary improvements

* ui: color updates

* ui: button states changes

* ui: update colors and set new default theme

* fix: sideload dialog image width

* fix: remove button title on not available game

* fix: add default theme to context provider

* ui: fix action icon colors

* ui: game list update

* chore: remove unused variables

* feat: add community themes to the list

* other: move default variables to colors.scss and update theme selector

* ui: more color fixes

* fix_ action icon colors

* fix: fix built-in themes

* fix: game submenu hover

* fix: marine colors

* ui: small fixes on nord light theme

Author: flavioislima

public/icon.icns

@@ -95,7 +95,8 @@
         "repairing": "Repairing"
     },
     "generic": {
-        "error": "Unknown error"
+        "error": "Unknown error",
+        "noDescription": "No description available"
     },
     "help": {
         "cloud_save_unsupported": "This game does not support cloud saves. This information is provided by the game developers. Some games do implement their own cloud save system"

public/icon.png

@@ -1,12 +1,12 @@
-import { heroicAnticheatDataPath, isLinux } from '../constants'
+import { heroicAnticheatDataPath, isWindows } from '../constants'
 import * as axios from 'axios'
 import { logInfo, LogPrefix, logWarning } from '../logger/logger'
 import { readFileSync, writeFileSync } from 'graceful-fs'
 import { AntiCheatInfo } from 'common/types'
 import { runOnceWhenOnline } from '../online_monitor'
 
 async function downloadAntiCheatData() {
-  if (!isLinux) return
+  if (isWindows) return
 
   runOnceWhenOnline(async () => {
     try {
@@ -25,7 +25,7 @@ async function downloadAntiCheatData() {
 }
 
 function gameAnticheatInfo(appNamespace: string): AntiCheatInfo | null {
-  if (!isLinux) return null
+  if (isWindows) return null
 
   const data = readFileSync(heroicAnticheatDataPath)
   const jsonData = JSON.parse(data.toString())

public/locales/en/gamepage.json

@@ -664,7 +664,7 @@ export class GOGLibrary {
       art_square: verticalCover,
       cloud_save_enabled: cloudSavesEnabledGames.includes(String(info.id)),
       extra: {
-        about: { description: description, longDescription: '' },
+        about: { description: description, shortDescription: '' },
         reqs: [],
         storeUrl: `https://gog.com${info.url}`
       },

public/win_icon.ico

@@ -240,7 +240,7 @@ class LegendaryGame extends Game {
         return {
           about: {
             description: res.sandbox.configuration[0].configs.shortDescription,
-            longDescription: ''
+            shortDescription: ''
           },
           reqs: requirements,
           storeUrl: `https://www.epicgames.com/store/product/${slug}`
@@ -275,7 +275,7 @@ class LegendaryGame extends Game {
       return {
         about: {
           description: '',
-          longDescription: ''
+          shortDescription: ''
         },
         reqs: [],
         storeUrl: ''
@@ -301,7 +301,7 @@ class LegendaryGame extends Game {
       return {
         about: {
           description: '',
-          longDescription: ''
+          shortDescription: ''
         },
         reqs: [],
         storeUrl: ''

src/backend/anticheat/utils.ts

@@ -469,7 +469,7 @@ export class LegendaryLibrary {
 
     const {
       description,
-      longDescription = '',
+      shortDescription = '',
       keyImages = [],
       title,
       developer,
@@ -552,7 +552,7 @@ export class LegendaryLibrary {
       extra: {
         about: {
           description,
-          longDescription
+          shortDescription
         },
         reqs: [],
         storeUrl: formatEpicStoreUrl(title)

src/backend/gog/library.ts

@@ -23,7 +23,7 @@ export type LaunchParams = {
 
 interface About {
   description: string
-  longDescription: string
+  shortDescription: string
 }
 
 export type Release = {
@@ -397,7 +397,7 @@ type AntiCheat =
   | 'Zakynthos'
 
 export interface AntiCheatInfo {
-  status: ''
+  status: 'Broken' | 'Denied' | 'Working' | 'Running' | 'Supported'
   anticheats: AntiCheat[]
   notes: string[]
   native: boolean

src/backend/legendary/games.ts

@@ -67,7 +67,7 @@ interface GameMetadataInner {
   keyImages: KeyImage[]
   lastModifiedDate: string
   mainGameItem?: GameMetadataInner
-  longDescription?: string
+  shortDescription?: string
   namespace: string
   releaseInfo: ReleaseInfo[]
   requiresSecureAccount?: boolean

src/backend/legendary/library.ts

@@ -0,0 +1,54 @@
+.anticheatInfo {
+  display: flex;
+  max-width: 560px;
+  padding: var(--space-md);
+  gap: 0.4rem;
+  border-radius: 20px;
+  background-color: var(--current-background);
+  margin-bottom: var(--space-lg);
+
+  .statusInfo {
+    flex-direction: column;
+    display: flex;
+    padding-left: var(--space-md);
+  }
+}
+
+.anticheatInfo h4 {
+  margin: 0 0 var(--space-md);
+}
+
+.anticheatInfo p {
+  margin: 0 0 var(--space-md);
+}
+
+.anticheatInfo.Denied {
+  border: 2px solid var(--anticheat-denied);
+  .statusIcon path {
+    fill: var(--anticheat-denied);
+  }
+}
+.anticheatInfo.Broken {
+  border: 2px solid var(--anticheat-broken);
+  .statusIcon path {
+    fill: var(--anticheat-broken);
+  }
+}
+.anticheatInfo.Running {
+  border: 2px solid var(--anticheat-running);
+  .statusIcon path {
+    fill: var(--anticheat-running);
+  }
+}
+.anticheatInfo.Supported {
+  border: 2px solid var(--anticheat-supported);
+  .statusIcon path {
+    fill: var(--anticheat-supported);
+  }
+}
+.anticheatInfo.Planned {
+  border: 2px solid var(--anticheat-planned);
+  .statusIcon path {
+    fill: var(--anticheat-planned);
+  }
+}