From 0651a57e30621b68f38abcfff2079c70a440d5e4 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 10 Dec 2024 13:20:44 +0100
Subject: [PATCH] fix(AdminSettings): allow to retry server checks

- rename icons
- add titles
- replace colors to NC palette

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../AdminSettings/RecordingServer.vue         | 32 ++++++++++------
 .../AdminSettings/SignalingServer.vue         | 38 ++++++++++++-------
 2 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/src/components/AdminSettings/RecordingServer.vue b/src/components/AdminSettings/RecordingServer.vue
index e43555075db3..976014bd9e63 100644
--- a/src/components/AdminSettings/RecordingServer.vue
+++ b/src/components/AdminSettings/RecordingServer.vue
@@ -23,26 +23,36 @@
 
 		<NcButton v-show="!loading"
 			type="tertiary"
+			:title="t('spreed', 'Delete this server')"
 			:aria-label="t('spreed', 'Delete this server')"
 			@click="removeServer">
 			<template #icon>
-				<Delete :size="20" />
+				<IconDelete :size="20" />
+			</template>
+		</NcButton>
+
+		<NcButton v-if="server"
+			type="tertiary"
+			:title="t('spreed', 'Test this server')"
+			:aria-label="t('spreed', 'Test this server')"
+			@click="checkServerVersion">
+			<template #icon>
+				<NcLoadingIcon v-if="!checked" :size="20" />
+				<IconAlertCircle v-else-if="errorMessage" :size="20" fill-color="var(--color-error)" />
+				<IconCheck v-else :size="20" fill-color="var(--color-success)" />
 			</template>
 		</NcButton>
 
 		<span v-if="server" class="test-connection">
-			<NcLoadingIcon v-if="!checked" :size="20" />
-			<AlertCircle v-else-if="errorMessage" :size="20" :fill-color="'#E9322D'" />
-			<Check v-else :size="20" :fill-color="'#46BA61'" />
 			{{ connectionState }}
 		</span>
 	</li>
 </template>
 
 <script>
-import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
-import Check from 'vue-material-design-icons/Check.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import IconAlertCircle from 'vue-material-design-icons/AlertCircle.vue'
+import IconCheck from 'vue-material-design-icons/Check.vue'
+import IconDelete from 'vue-material-design-icons/Delete.vue'
 
 import { t } from '@nextcloud/l10n'
 
@@ -57,9 +67,9 @@ export default {
 	name: 'RecordingServer',
 
 	components: {
-		AlertCircle,
-		Check,
-		Delete,
+		IconAlertCircle,
+		IconCheck,
+		IconDelete,
 		NcButton,
 		NcCheckboxRadioSwitch,
 		NcLoadingIcon,
@@ -190,6 +200,6 @@ export default {
 .test-connection {
 	display: inline-flex;
 	align-items: center;
-	gap: 8px;
+	margin-inline-start: var(--default-grid-baseline);
 }
 </style>
diff --git a/src/components/AdminSettings/SignalingServer.vue b/src/components/AdminSettings/SignalingServer.vue
index 417f49e35ce6..858c8ce00216 100644
--- a/src/components/AdminSettings/SignalingServer.vue
+++ b/src/components/AdminSettings/SignalingServer.vue
@@ -22,28 +22,38 @@
 
 		<NcButton v-show="!loading"
 			type="tertiary"
+			:title="t('spreed', 'Delete this server')"
 			:aria-label="t('spreed', 'Delete this server')"
 			@click="removeServer">
 			<template #icon>
-				<Delete :size="20" />
+				<IconDelete :size="20" />
+			</template>
+		</NcButton>
+
+		<NcButton v-if="server"
+			type="tertiary"
+			:title="t('spreed', 'Test this server')"
+			:aria-label="t('spreed', 'Test this server')"
+			@click="checkServerVersion">
+			<template #icon>
+				<NcLoadingIcon v-if="!checked" :size="20" />
+				<IconAlertCircle v-else-if="errorMessage" :size="20" fill-color="var(--color-error)" />
+				<IconAlertCircleOutline v-else-if="warningMessage" :size="20" fill-color="var(--color-warning)" />
+				<IconCheck v-else :size="20" fill-color="var(--color-success)" />
 			</template>
 		</NcButton>
 
 		<span v-if="server" class="test-connection">
-			<NcLoadingIcon v-if="!checked" :size="20" />
-			<AlertCircle v-else-if="errorMessage" :size="20" :fill-color="'#D91812'" />
-			<AlertCircleOutline v-else-if="warningMessage" :size="20" :fill-color="'#C28900'" />
-			<Check v-else :size="20" :fill-color="'#2D7B41'" />
 			{{ connectionState }}
 		</span>
 	</li>
 </template>
 
 <script>
-import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
-import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
-import Check from 'vue-material-design-icons/Check.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import IconAlertCircle from 'vue-material-design-icons/AlertCircle.vue'
+import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import IconCheck from 'vue-material-design-icons/Check.vue'
+import IconDelete from 'vue-material-design-icons/Delete.vue'
 
 import { t } from '@nextcloud/l10n'
 
@@ -58,10 +68,10 @@ export default {
 	name: 'SignalingServer',
 
 	components: {
-		AlertCircle,
-		AlertCircleOutline,
-		Check,
-		Delete,
+		IconAlertCircle,
+		IconAlertCircleOutline,
+		IconCheck,
+		IconDelete,
 		NcButton,
 		NcCheckboxRadioSwitch,
 		NcLoadingIcon,
@@ -207,6 +217,6 @@ export default {
 .test-connection {
 	display: inline-flex;
 	align-items: center;
-	gap: 8px;
+	margin-inline-start: var(--default-grid-baseline);
 }
 </style>