[PM-3294][PM-3293] Update Region Selector Domains (#5949)

* update desktop domains

* update web domains

* remove old translations from desktop

* update translations on browser

* change 'Region' to 'Server' on web

* change labels

* remove 'region' translation

* adjust alignmend so 'Self-hosted' label lines up with others

* adjust width and layout of trial-initiation header to accomodate longer text

apps/browser/src/_locales/en/messages.json

@@ -2221,19 +2221,17 @@
       }
     }
   },
-  "region": {
+  "loggingInOn": {
-    "message": "Region"
+    "message": "Logging in on"
   },
   "opensInANewWindow": {
     "message": "Opens in a new window"
   },
-  "eu": {
+  "usDomain": {
-    "message": "EU",
+    "message": "bitwarden.com"
-    "description": "European Union"
   },
-  "us": {
+  "euDomain": {
-    "message": "US",
+    "message": "bitwarden.eu"
-    "description": "United States"
   },
   "accessDenied": {
     "message": "Access denied. You do not have permission to view this page."

apps/desktop/src/locales/en/messages.json

@@ -2252,16 +2252,14 @@
   "windowsBiometricUpdateWarningTitle": {
     "message": "Recommended Settings Update"
   },
-  "region": {
+  "loggingInOn": {
-    "message": "Region"
+    "message": "Logging in on"
   },
-  "eu": {
+  "usDomain": {
-    "message": "EU",
+    "message": "bitwarden.com"
-    "description": "European Union"
   },
-  "us": {
+  "euDomain": {
-    "message": "US",
+    "message": "bitwarden.eu"
-    "description": "United States"
   },
   "selfHosted": {
     "message": "Self-hosted"

apps/web/src/app/auth/trial-initiation/trial-initiation.component.html

@@ -58,13 +58,13 @@
       </div>
       <div class="tw-pt-44" *ngIf="useTrialStepper">
         <div class="tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background">
-          <div class="tw-flex tw-h-auto tw-w-full tw-rounded-t tw-bg-secondary-100">
+          <div class="tw-flex tw-h-auto tw-w-full tw-gap-5 tw-rounded-t tw-bg-secondary-100">
             <h2 class="tw-pb-4 tw-pl-4 tw-pt-5 tw-text-base tw-font-bold tw-uppercase">
               {{ "startYour7DayFreeTrialOfBitwardenFor" | i18n : org }}
             </h2>
             <environment-selector
               [hasFlags]="true"
-              class="tw-mr-4 tw-mt-6 tw-text-end"
+              class="tw-mr-4 tw-mt-6 tw-flex-shrink-0 tw-text-end"
             ></environment-selector>
           </div>
           <app-vertical-stepper #stepper linear (selectionChange)="stepSelectionChange($event)">

apps/web/src/app/components/environment-selector/environment-selector.component.html

@@ -11,7 +11,7 @@
         [style.visibility]="isUsServer ? 'visible' : 'hidden'"
       ></i>
       <img src="../../images/us_flag.png" alt="{{ 'usFlag' | i18n }}" class="pb-1 mr-1" />
-      {{ "us" | i18n }}
+      {{ "usDomain" | i18n }}
     </a>
     <a
       bitMenuItem
@@ -25,11 +25,11 @@
         [style.visibility]="isEuServer ? 'visible' : 'hidden'"
       ></i>
       <img src="../../images/eu_flag.png" alt="{{ 'euFlag' | i18n }}" class="pb-1 mr-1" />
-      {{ "eu" | i18n }}
+      {{ "euDomain" | i18n }}
     </a>
   </bit-menu>
-  <span *ngIf="hasFlags" class="!tw-inline-block !tw-w-52 !tw-min-w-52">
+  <span *ngIf="hasFlags" class="!tw-inline-block !tw-min-w-52">
-    <label>{{ "region" | i18n }}:</label>
+    <label>{{ "server" | i18n }}:</label>
     <a
       [routerLink]="[]"
       [bitMenuTriggerFor]="environmentOptions"
@@ -40,15 +40,15 @@
         alt="{{ 'selectedRegionFlag' | i18n }}"
         class="pb-1 mr-1 tw-ml-1"
       /><label class="tw-cursor-pointer !tw-font-normal"
-        >{{ isEuServer ? ("eu" | i18n) : ("us" | i18n) }}
+        >{{ 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">
-    {{ "region" | i18n }}:
+    {{ "server" | i18n }}:
     <a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
-      <b>{{ isEuServer ? ("eu" | i18n) : ("us" | i18n) }}</b
+      <b>{{ isEuServer ? ("euDomain" | i18n) : ("usDomain" | i18n) }}</b
       ><i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
     </a>
   </div>

apps/web/src/locales/en/messages.json

@@ -6811,16 +6811,11 @@
   "enforceOnLoginDesc": {
     "message": "Require existing members to change their passwords"
   },
-  "region": {
+  "usDomain": {
-    "message": "Region"
+    "message": "bitwarden.com"
   },
-  "eu": {
+  "euDomain": {
-    "message": "EU",
+    "message": "bitwarden.eu"
-    "description": "European Union"
-  },
-  "us": {
-    "message": "US",
-    "description": "United States"
   },
   "smProjectDeleteAccessRestricted": {
     "message": "You don't have permissions to delete this project",

libs/angular/src/auth/components/environment-selector.component.html

@@ -1,5 +1,5 @@
 <label class="environment-selector-btn">
-  {{ "region" | i18n }}:
+  {{ "loggingInOn" | i18n }}:
   <a
     (click)="toggle(null)"
     cdkOverlayOrigin
@@ -8,8 +8,12 @@
     aria-controls="cdk-overlay-container"
     [ngSwitch]="selectedEnvironment"
   >
-    <label *ngSwitchCase="ServerEnvironmentType.US" class="text-primary">{{ "us" | i18n }}</label>
+    <label *ngSwitchCase="ServerEnvironmentType.US" class="text-primary">{{
-    <label *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{ "eu" | i18n }}</label>
+      "usDomain" | i18n
+    }}</label>
+    <label *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{
+      "euDomain" | i18n
+    }}</label>
     <label *ngSwitchCase="ServerEnvironmentType.SelfHosted" class="text-primary">{{
       "selfHosted" | i18n
     }}</label>
@@ -41,7 +45,7 @@
           "
         ></i>
         <img class="img-us" alt="" />
-        <span>{{ "us" | i18n }}</span>
+        <span>{{ "usDomain" | i18n }}</span>
       </button>
       <br />
       <button
@@ -59,7 +63,7 @@
           "
         ></i>
         <img class="img-eu" alt="" />
-        <span>{{ "eu" | i18n }}</span>
+        <span>{{ "euDomain" | i18n }}</span>
       </button>
       <br *ngIf="euServerFlagEnabled" />
       <button
@@ -76,8 +80,8 @@
           "
         ></i>
         <i
-          class="bwi bwi-fw bwi-sm bwi-pencil-square"
+          class="bwi bwi-fw bwi-md bwi-pencil-square"
-          style="padding-bottom: 1px"
+          style="padding-bottom: 1px; margin-right: 5px"
           aria-hidden="true"
         ></i>
         <span>{{ "selfHosted" | i18n }}</span>