diff --git a/src/server_manager/messages/en.json b/src/server_manager/messages/en.json
index b188587d..923c5fb3 100644
--- a/src/server_manager/messages/en.json
+++ b/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",
diff --git a/src/server_manager/messages/master_messages.json b/src/server_manager/messages/master_messages.json
index d0102478..13eb4222 100644
--- a/src/server_manager/messages/master_messages.json
+++ b/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": {
diff --git a/src/server_manager/web_app/ui_components/outline-region-picker-step.ts b/src/server_manager/web_app/ui_components/outline-region-picker-step.ts
index c548cb7d..c9926298 100644
--- a/src/server_manager/web_app/ui_components/outline-region-picker-step.ts
+++ b/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`
`;
})}