Fix cross-browser CSS-mask CORS failures for OpenFrontLogo and SoldierIcon (#3792)

## Description:

Cross-origin CSS-mask icons were failing on Chrome and Safari because
mask: url(...) triggers a CORS-mode fetch (unlike plain <img>), and
stale browser caches without ACAO break per-user. Instead change the
svgs with the appropriate colors so we don't need to mask them

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

src/client/components/DesktopNavBar.ts

@@ -54,16 +54,11 @@ export class DesktopNavBar extends LitElement {
       >
         <div class="flex flex-col items-center justify-center">
           <div class="h-8">
-            <span
-              class="block h-full aspect-[1364/259] bg-malibu-blue"
-              style="-webkit-mask: url(${assetUrl(
-                "images/OpenFrontLogo.svg",
-              )}) no-repeat center / contain; mask: url(${assetUrl(
-                "images/OpenFrontLogo.svg",
-              )}) no-repeat center / contain;"
-              role="img"
-              aria-label="OpenFront"
-            ></span>
+            <img
+              class="block h-full aspect-[1364/259]"
+              src=${assetUrl("images/OpenFrontLogo.svg")}
+              alt="OpenFront"
+            />
           </div>
           <div
             id="game-version"