[PM-3804] Remove Server Flag Icons (#6207)

* remove flags from web component * remove selectedRegionImageName from web component * remove input * delete image files and update browser translation * update translation and popup width for destkop/browser * remove translations * revert width on dialog
2025-03-11 13:30:39 +01:00 · 2023-09-07 14:44:55 -07:00 · 2023-09-07 14:44:55 -07:00 · 5440e372f6
commit 5440e372f6
parent 8de65ea791
17 changed files with 10 additions and 199 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@ -2092,8 +2092,8 @@
  "serverVersion": {
    "message": "Server version"
  },
-  "selfHosted": {
-    "message": "Self-hosted"
+  "selfHostedServer": {
+    "message": "self-hosted"
  },
  "thirdParty": {
    "message": "Third-party"
--- a/apps/browser/src/popup/images/flag-eu.svg
+++ b/apps/browser/src/popup/images/flag-eu.svg
@ -1,28 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-eu" viewBox="0 0 640 480">
-  <defs>
-    <g id="eu-d">
-      <g id="eu-b">
-        <path id="eu-a" d="m0-1-.3 1 .5.1z"/>
-        <use xlink:href="#eu-a" transform="scale(-1 1)"/>
-      </g>
-      <g id="eu-c">
-        <use xlink:href="#eu-b" transform="rotate(72)"/>
-        <use xlink:href="#eu-b" transform="rotate(144)"/>
-      </g>
-      <use xlink:href="#eu-c" transform="scale(-1 1)"/>
-    </g>
-  </defs>
-  <path fill="#039" d="M0 0h640v480H0z"/>
-  <g fill="#fc0" transform="translate(320 242.3) scale(23.7037)">
-    <use xlink:href="#eu-d" width="100%" height="100%" y="-6"/>
-    <use xlink:href="#eu-d" width="100%" height="100%" y="6"/>
-    <g id="eu-e">
-      <use xlink:href="#eu-d" width="100%" height="100%" x="-6"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(-144 -2.3 -2.1)"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(144 -2.1 -2.3)"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -4.7 -2)"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -5 .5)"/>
-    </g>
-    <use xlink:href="#eu-e" width="100%" height="100%" transform="scale(-1 1)"/>
-  </g>
-</svg>
--- a/apps/browser/src/popup/images/flag-us.svg
+++ b/apps/browser/src/popup/images/flag-us.svg
@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
-  <path fill="#bd3d44" d="M0 0h640v480H0"/>
-  <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/>
-  <path fill="#192f5d" d="M0 0h364.8v258.5H0"/>
-  <marker id="us-a" markerHeight="30" markerWidth="30">
-    <path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/>
-  </marker>
-  <path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60L0 0"/>
-</svg>
--- a/apps/browser/src/popup/scss/environment.scss
+++ b/apps/browser/src/popup/scss/environment.scss
@ -90,19 +90,6 @@ html.browser_safari {
      background-color: themed("listItemBackgroundHoverColor") !important;
    }
  }
-
-  img {
-    margin-bottom: -2px;
-    height: 14px;
-  }
-
-  .img-us {
-    content: url("../images/flag-us.svg");
-  }
-
-  .img-eu {
-    content: url("../images/flag-eu.svg");
-  }
 }

 .environment-selector-padding {
--- a/apps/browser/src/popup/settings/about.component.html
+++ b/apps/browser/src/popup/settings/about.component.html
@ -33,7 +33,7 @@
            </ng-container>

            <p class="text-center" *ngIf="!serverConfig.server">
-              {{ "serverVersion" | i18n }} <small>({{ "selfHosted" | i18n }})</small>:
+              {{ "serverVersion" | i18n }} <small>({{ "selfHostedServer" | i18n }})</small>:
              {{ this.serverConfig?.version }}
              <span *ngIf="!serverConfig.isValid()">
                ({{ "lastSeenOn" | i18n : (serverConfig.utcDate | date : "mediumDate") }})
--- a/apps/desktop/src/images/flag-eu.svg
+++ b/apps/desktop/src/images/flag-eu.svg
@ -1,28 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-eu" viewBox="0 0 640 480">
-  <defs>
-    <g id="eu-d">
-      <g id="eu-b">
-        <path id="eu-a" d="m0-1-.3 1 .5.1z"/>
-        <use xlink:href="#eu-a" transform="scale(-1 1)"/>
-      </g>
-      <g id="eu-c">
-        <use xlink:href="#eu-b" transform="rotate(72)"/>
-        <use xlink:href="#eu-b" transform="rotate(144)"/>
-      </g>
-      <use xlink:href="#eu-c" transform="scale(-1 1)"/>
-    </g>
-  </defs>
-  <path fill="#039" d="M0 0h640v480H0z"/>
-  <g fill="#fc0" transform="translate(320 242.3) scale(23.7037)">
-    <use xlink:href="#eu-d" width="100%" height="100%" y="-6"/>
-    <use xlink:href="#eu-d" width="100%" height="100%" y="6"/>
-    <g id="eu-e">
-      <use xlink:href="#eu-d" width="100%" height="100%" x="-6"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(-144 -2.3 -2.1)"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(144 -2.1 -2.3)"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -4.7 -2)"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -5 .5)"/>
-    </g>
-    <use xlink:href="#eu-e" width="100%" height="100%" transform="scale(-1 1)"/>
-  </g>
-</svg>
--- a/apps/desktop/src/images/flag-us.svg
+++ b/apps/desktop/src/images/flag-us.svg
@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
-  <path fill="#bd3d44" d="M0 0h640v480H0"/>
-  <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/>
-  <path fill="#192f5d" d="M0 0h364.8v258.5H0"/>
-  <marker id="us-a" markerHeight="30" markerWidth="30">
-    <path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/>
-  </marker>
-  <path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60L0 0"/>
-</svg>
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@ -2286,8 +2286,8 @@
  "euDomain": {
    "message": "bitwarden.eu"
  },
-  "selfHosted": {
-    "message": "Self-hosted"
+  "selfHostedServer": {
+    "message": "self-hosted"
  },
  "accessDenied": {
    "message": "Access denied. You do not have permission to view this page."
--- a/apps/desktop/src/scss/environment.scss
+++ b/apps/desktop/src/scss/environment.scss
@ -83,17 +83,4 @@
      background-color: themed("listItemBackgroundHoverColor") !important;
    }
  }
-
-  img {
-    margin-bottom: -2px;
-    height: 14px;
-  }
-
-  .img-us {
-    content: url("../images/flag-us.svg");
-  }
-
-  .img-eu {
-    content: url("../images/flag-eu.svg");
-  }
 }
--- a/apps/web/src/app/auth/trial-initiation/trial-initiation.component.html
+++ b/apps/web/src/app/auth/trial-initiation/trial-initiation.component.html
@ -63,7 +63,6 @@
              {{ "startYour7DayFreeTrialOfBitwardenFor" | i18n : org }}
            </h2>
            <environment-selector
-              [hasFlags]="true"
              class="tw-mr-4 tw-mt-6 tw-flex-shrink-0 tw-text-end"
            ></environment-selector>
          </div>
--- a/apps/web/src/app/components/environment-selector/environment-selector.component.html
+++ b/apps/web/src/app/components/environment-selector/environment-selector.component.html
@ -12,11 +12,6 @@
        aria-hidden="true"
        [style.visibility]="isUsServer ? 'visible' : 'hidden'"
      ></i>
-      <img
-        src="../../images/flag-us.svg"
-        alt="{{ 'usFlag' | i18n }}"
-        class="tw-mr-1 tw-w-6 tw-pb-1"
-      />
      {{ "usDomain" | i18n }}
    </a>
    <a
@ -32,32 +27,10 @@
        aria-hidden="true"
        [style.visibility]="isEuServer ? 'visible' : 'hidden'"
      ></i>
-      <img
-        src="../../images/flag-eu.svg"
-        alt="{{ 'euFlag' | i18n }}"
-        class="tw-mr-1 tw-w-6 tw-pb-1"
-      />
      {{ "euDomain" | i18n }}
    </a>
  </bit-menu>
-  <span *ngIf="hasFlags" class="!tw-inline-block !tw-min-w-52">
-    <label>{{ "server" | i18n }}:</label>
-    <a
-      [routerLink]="[]"
-      [bitMenuTriggerFor]="environmentOptions"
-      class="tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-2"
-    >
-      <img
-        [src]="'../../images/' + selectedRegionImageName + '.svg'"
-        alt="{{ 'selectedRegionFlag' | i18n }}"
-        class="tw-mx-1 tw-pb-1"
-      /><label class="tw-cursor-pointer !tw-font-normal"
-        >{{ isEuServer ? ("euDomain" | i18n) : ("usDomain" | i18n) }}
-        <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i
-      ></label>
-    </a>
-  </span>
-  <div *ngIf="!hasFlags">
+  <div>
    {{ "server" | i18n }}:
    <a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
      <b>{{ isEuServer ? ("euDomain" | i18n) : ("usDomain" | i18n) }}</b
--- a/apps/web/src/app/components/environment-selector/environment-selector.component.ts
+++ b/apps/web/src/app/components/environment-selector/environment-selector.component.ts
@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";

 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
@ -18,12 +18,10 @@ export class EnvironmentSelectorComponent implements OnInit {
    private router: Router
  ) {}

-  @Input() hasFlags: boolean;
  isEuServer: boolean;
  isUsServer: boolean;
  showRegionSelector = false;
  euServerFlagEnabled: boolean;
-  selectedRegionImageName: string;
  routeAndParams: string;

  async ngOnInit() {
@ -33,16 +31,7 @@ export class EnvironmentSelectorComponent implements OnInit {
    const domain = Utils.getDomain(window.location.href);
    this.isEuServer = domain.includes(RegionDomain.EU);
    this.isUsServer = domain.includes(RegionDomain.US) || domain.includes(RegionDomain.USQA);
-    this.selectedRegionImageName = this.getRegionImage();
    this.showRegionSelector = !this.platformUtilsService.isSelfHost();
    this.routeAndParams = `/#${this.router.url}`;
  }
-
-  getRegionImage(): string {
-    if (this.isEuServer) {
-      return "flag-eu";
-    } else {
-      return "flag-us";
-    }
-  }
 }
--- a/apps/web/src/app/layouts/frontend-layout.component.html
+++ b/apps/web/src/app/layouts/frontend-layout.component.html
@ -1,6 +1,6 @@
 <router-outlet></router-outlet>
 <div class="container my-5 text-muted text-center">
-  <environment-selector [hasFlags]="false"></environment-selector>
+  <environment-selector></environment-selector>
  &copy; {{ year }} Bitwarden Inc. <br />
  {{ "versionNumber" | i18n : version }}
 </div>
--- a/apps/web/src/images/flag-eu.svg
+++ b/apps/web/src/images/flag-eu.svg
@ -1,28 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-eu" viewBox="0 0 640 480">
-  <defs>
-    <g id="eu-d">
-      <g id="eu-b">
-        <path id="eu-a" d="m0-1-.3 1 .5.1z"/>
-        <use xlink:href="#eu-a" transform="scale(-1 1)"/>
-      </g>
-      <g id="eu-c">
-        <use xlink:href="#eu-b" transform="rotate(72)"/>
-        <use xlink:href="#eu-b" transform="rotate(144)"/>
-      </g>
-      <use xlink:href="#eu-c" transform="scale(-1 1)"/>
-    </g>
-  </defs>
-  <path fill="#039" d="M0 0h640v480H0z"/>
-  <g fill="#fc0" transform="translate(320 242.3) scale(23.7037)">
-    <use xlink:href="#eu-d" width="100%" height="100%" y="-6"/>
-    <use xlink:href="#eu-d" width="100%" height="100%" y="6"/>
-    <g id="eu-e">
-      <use xlink:href="#eu-d" width="100%" height="100%" x="-6"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(-144 -2.3 -2.1)"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(144 -2.1 -2.3)"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -4.7 -2)"/>
-      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -5 .5)"/>
-    </g>
-    <use xlink:href="#eu-e" width="100%" height="100%" transform="scale(-1 1)"/>
-  </g>
-</svg>
--- a/apps/web/src/images/flag-us.svg
+++ b/apps/web/src/images/flag-us.svg
@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
-  <path fill="#bd3d44" d="M0 0h640v480H0"/>
-  <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/>
-  <path fill="#192f5d" d="M0 0h364.8v258.5H0"/>
-  <marker id="us-a" markerHeight="30" markerWidth="30">
-    <path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/>
-  </marker>
-  <path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60L0 0"/>
-</svg>
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@ -7019,12 +7019,6 @@
  "next": {
    "message": "Next"
  },
-  "usFlag": {
-    "message": "US flag"
-  },
-  "euFlag": {
-    "message": "EU flag"
-  },
  "selectedRegionFlag": {
    "message": "Selected region flag"
  },
--- a/libs/angular/src/auth/components/environment-selector.component.html
+++ b/libs/angular/src/auth/components/environment-selector.component.html
@ -15,7 +15,7 @@
      "euDomain" | i18n
    }}</label>
    <label *ngSwitchCase="ServerEnvironmentType.SelfHosted" class="text-primary">{{
-      "selfHosted" | i18n
+      "selfHostedServer" | i18n
    }}</label>
    <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
  </a>
@ -44,7 +44,6 @@
            selectedEnvironment === ServerEnvironmentType.US ? 'visible' : 'hidden'
          "
        ></i>
-        <img class="img-us" alt="" />
        <span>{{ "usDomain" | i18n }}</span>
      </button>
      <br />
@ -62,7 +61,6 @@
            selectedEnvironment === ServerEnvironmentType.EU ? 'visible' : 'hidden'
          "
        ></i>
-        <img class="img-eu" alt="" />
        <span>{{ "euDomain" | i18n }}</span>
      </button>
      <br *ngIf="euServerFlagEnabled" />
@ -79,12 +77,7 @@
            selectedEnvironment === ServerEnvironmentType.SelfHosted ? 'visible' : 'hidden'
          "
        ></i>
-        <i
-          class="bwi bwi-fw bwi-md bwi-pencil-square"
-          style="padding-bottom: 1px"
-          aria-hidden="true"
-        ></i>
-        <span>{{ "selfHosted" | i18n }}</span>
+        <span>{{ "selfHostedServer" | i18n }}</span>
      </button>
    </div>
  </div>