From 79d2f8f9ac29e11a22d09e67c5419de96a90201a Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Fri, 23 Aug 2024 15:40:56 +0200
Subject: [PATCH] feat: update probe details

---
 components/ProbeDetails.vue     | 44 +++++++++++++++++++++++++--------
 components/TokenDetails.vue     |  6 ++---
 presets/aura/chip/index.js      |  2 +-
 presets/aura/inputtext/index.js |  2 +-
 4 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/components/ProbeDetails.vue b/components/ProbeDetails.vue
index c109d75b..8af8af2d 100644
--- a/components/ProbeDetails.vue
+++ b/components/ProbeDetails.vue
@@ -32,16 +32,40 @@
 				class="w-full bg-transparent dark:bg-transparent"
 			/>
 		</div>
-		<label for="primary-ip" class="mt-3 block text-xs">Alternative IPs</label>
-		<AutoComplete
-			id="alternative-ips"
-			v-model="probe.altIps"
-			class="mt-1 bg-transparent dark:bg-transparent"
-			chip-icon="hidden"
-			multiple
-			disabled
-			:typeahead="false"
-		/>
+		<label for="alternative-ips" class="mt-3 block text-xs">Alternative IPs</label>
+		<div class="relative mt-1">
+			<i class="pi pi-lock absolute right-3 top-2.5 text-bluegray-500"/>
+			<AutoComplete
+				id="alternative-ips"
+				v-model="probe.altIps"
+				class="bg-transparent dark:bg-transparent"
+				chip-icon="hidden"
+				multiple
+				disabled
+				:typeahead="false"
+			/>
+		</div>
+		<label for="country" class="mt-3 block text-xs">Country</label>
+		<div class="relative mt-1">
+			<i class="pi pi-lock absolute right-3 top-2.5 text-bluegray-500"/>
+			<InputText
+				id="country"
+				v-model="probe.country"
+				disabled
+				class="w-full bg-transparent dark:bg-transparent"
+			/>
+		</div>
+		<label for="city" class="mt-3 block text-xs">City</label>
+		<div class="relative mt-1">
+			<InputText
+				id="city"
+				v-model="probe.city"
+				class="w-full bg-transparent dark:bg-transparent"
+			/>
+		</div>
+		<p class="mt-1 text-xs text-bluegray-400">
+			City where the probe is located. If you know that city is wrong it can be changed here: type in the valid city and click save.
+		</p>
 		<!-- <label for="primary-ip">Primary IP</label>
 		<InputText
 			id="primary-ip"
diff --git a/components/TokenDetails.vue b/components/TokenDetails.vue
index 63f99521..eea83eb2 100644
--- a/components/TokenDetails.vue
+++ b/components/TokenDetails.vue
@@ -9,7 +9,7 @@
 			@update:model-value="resetInvalid"
 		/>
 		<p v-if="isNameInvalid" class="pl-1 text-red-500">Name can't be empty</p>
-		<p class="mt-1 text-xs">A unique name for this token.</p>
+		<p class="mt-1 text-xs text-bluegray-400">A unique name for this token.</p>
 		<p class="mt-6">Expiration</p>
 		<div class="mt-2">
 			<Button
@@ -64,7 +64,7 @@
 				<TokenCalendar :value="expire && new Date(expire)" @change="changeDate"/>
 			</Popover>
 		</div>
-		<div class="text-xs">{{ expire ? `Token will expire ${formatDate(expire)}.` : 'Token will never expire.' }}</div>
+		<div class="text-xs text-bluegray-400">{{ expire ? `Token will expire ${formatDate(expire)}.` : 'Token will never expire.' }}</div>
 		<label for="origins" class="mt-6 block">Origins</label>
 		<AutoComplete
 			id="origins"
@@ -77,7 +77,7 @@
 			@update:model-value="updateOrigins"
 			@blur="onAutoCompleteBlur"
 		/>
-		<p class="mt-1 text-xs">
+		<p class="mt-1 text-xs text-bluegray-400">
 			A list of origins which are allowed to use the token. If empty, any origin is valid.
 			Examples of valid origins: "https://www.jsdelivr.com", "https://www.jsdelivr.com:10000".
 		</p>
diff --git a/presets/aura/chip/index.js b/presets/aura/chip/index.js
index 4cb1e56a..2de5ba98 100644
--- a/presets/aura/chip/index.js
+++ b/presets/aura/chip/index.js
@@ -11,7 +11,7 @@ export default {
 			'rounded-md',
 
 			// Colors
-			'text-surface-800 dark:text-surface-0',
+			'text-bluegray-900 dark:text-surface-0',
 			'border',
 		],
 	},
diff --git a/presets/aura/inputtext/index.js b/presets/aura/inputtext/index.js
index aedb97c2..b78dbdf5 100644
--- a/presets/aura/inputtext/index.js
+++ b/presets/aura/inputtext/index.js
@@ -26,7 +26,7 @@ export default {
 
 			// Colors
 			'placeholder:text-bluegray-400 dark:placeholder:text-surface-200',
-			{ 'text-surface-800 dark:text-surface-0 bg-surface-0 dark:bg-dark-900': !context.disabled },
+			{ 'text-bluegray-900 dark:text-surface-0 bg-surface-0 dark:bg-dark-900': !context.disabled },
 			'border',
 			{ 'border-surface-300 dark:border-dark-600': !props.invalid },