Adjust CSS to better match mocks

src/server_manager/messages/en.json

@@ -186,7 +186,7 @@
   "per-key-data-limit-dialog-set-custom": "Set a custom data limit",
   "per-key-data-limit-dialog-title": "Data Limit - {keyName}",
   "region-description": "This is where your internet experience will come from.",
-  "region-lowest-cost": "Lowest Cost",
+  "region-lowest-cost": "Best Value",
   "region-setup": "Set up Outline",
   "region-title": "Select the location of your server.",
   "remove": "Remove",

src/server_manager/messages/master_messages.json

@@ -890,7 +890,7 @@
     "description": "This string appears within the server creation flow, as a sub-header of the server selection view. Lets the user know about the implications of selecting a server location."
   },
   "region_lowest_cost": {
-    "message": "Lowest Cost",
+    "message": "Best Value",
     "description": "Appears within the server creation flow, indicating that a server option costs less than the other options."
   },
   "region_setup": {

src/server_manager/web_app/ui_components/outline-region-picker-step.ts

@@ -48,10 +48,10 @@ export class OutlineRegionPicker extends LitElement {
         background-color: rgba(255, 255, 255, 0.08);
         box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
         border-radius: 4px;
-        border: 1px solid var(--primary-green);
+        border: 2px solid var(--primary-green);
       }
       input[type="radio"] + label.city-button:hover {
-        border: 1px solid var(--primary-green);
+        border: 2px solid var(--primary-green);
       }
       input[type="radio"] + label.city-button {
         display: inline-block;
@@ -61,8 +61,7 @@ export class OutlineRegionPicker extends LitElement {
         position: relative;
         margin: 4px;
         text-align: center;
-        border: 1px solid;
-        border-color: rgba(0, 0, 0, 0);
+        border: 2px solid rgba(0, 0, 0, 0);
         cursor: pointer;
         transition: 0.5s;
         background: var(--background-contrast-color);
@@ -76,11 +75,12 @@ export class OutlineRegionPicker extends LitElement {
       .geo-name {
         color: var(--light-gray);
         font-size: 16px;
+        line-height: 19px;
       }
       .country-name {
         color: var(--medium-gray);
         font-size: 12px;
-        line-height: 24px;
+        line-height: 19px;
         text-transform: uppercase;
       }
       paper-button {
@@ -112,27 +112,28 @@ export class OutlineRegionPicker extends LitElement {
         border-radius: inherit;
         background: linear-gradient(to right, rgba(20, 20, 20, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
       }
+      .low-cost-label {
+        background-color: var(--primary-green);
+        color: #374248;
+        position: absolute;
+        top: 117px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        display: flex;
+        align-items: center;
+        min-height: 20px;
+        border-radius: 10px;
+        padding: 0px 10px 0px 10px;
+        font-size: 12px;
+        line-height: 14px;
+      }
       .card-content {
         display: flex;
         flex-flow: wrap;
         padding-top: 24px;
       }
-      .card-header {
-        height: 24px;
-        display: flex;
-        justify-content: space-between;
-      }
-      .tag {
-        font-weight: 500;
-        letter-spacing: 0.05em;
-        font-size: 12px;
-        text-transform: uppercase;
-        color: var(--primary-green);
-        margin-top: 8px;
-        white-space: nowrap;
-      }
       label.city-button {
-        padding: 0 8px 8px 8px;
+        padding: 28px 8px 11px 8px;
       }
     `];
   }
@@ -152,17 +153,15 @@ export class OutlineRegionPicker extends LitElement {
           return html`
           <input type="radio" id="card-${index}" name="city" value="${index}" ?disabled="${!option.available}" .checked="${this.selectedIndex === index}" @change="${this._locationSelected}">
           <label for="card-${index}" class="city-button">
-            <div class="card-header">
-              <div class="tag">
-                ${option.markedLowCost ? this.localize('region-lowest-cost') : ''}
-              </div>
-            </div>
             <div class="flag-overlay">
               <img class="flag" src="${this._flagImage(option)}">
             </div>
             <div class="geo-name">${getShortName(option.cloudLocation, this.localize)}</div>
             <div class="country-name">${option.cloudLocation.location?.countryIsRedundant() ? '' :
                 localizeCountry(option.cloudLocation.location, this.language)}</div>
+            ${option.markedLowCost ?
+                html`<div class="low-cost-label">${this.localize('region-lowest-cost')}</div>`
+                : ''}
           </label>`;
         })}
       </div>