Merge pull request #15721 from nextcloud/bugfix/noid/fix-used-color-variables

fix(ui): Fix state colors

src/components/AdminSettings/BotsSettings.vue

@@ -142,12 +142,12 @@ export default {
 		getStateIcon(state) {
 			switch (state) {
 				case BOT.STATE.NO_SETUP:
-					return { state_icon_component: IconLockOutline, state_icon_label: t('spreed', 'Locked for moderators'), state_icon_color: 'var(--color-warning-text)' }
+					return { state_icon_component: IconLockOutline, state_icon_label: t('spreed', 'Locked for moderators'), state_icon_color: 'var(--color-favorite)' }
 				case BOT.STATE.ENABLED:
-					return { state_icon_component: IconCheck, state_icon_label: t('spreed', 'Enabled'), state_icon_color: 'var(--color-success-text)' }
+					return { state_icon_component: IconCheck, state_icon_label: t('spreed', 'Enabled'), state_icon_color: 'var(--color-border-success)' }
 				case BOT.STATE.DISABLED:
 				default:
-					return { state_icon_component: IconCancel, state_icon_label: t('spreed', 'Disabled'), state_icon_color: 'var(--color-error-text)' }
+					return { state_icon_component: IconCancel, state_icon_label: t('spreed', 'Disabled'), state_icon_color: 'var(--color-border-error)' }
 			}
 		},
 	},

src/components/AdminSettings/RecordingServer.vue

@@ -32,8 +32,8 @@
 
 		<span v-if="server" class="test-connection">
 			<NcLoadingIcon v-if="!checked" :size="20" />
-			<IconAlertCircleOutline v-else-if="errorMessage" :size="20" fill-color="var(--color-error-text)" />
-			<IconCheck v-else :size="20" fill-color="var(--color-success-text)" />
+			<IconAlertCircleOutline v-else-if="errorMessage" :size="20" fill-color="var(--color-border-error)" />
+			<IconCheck v-else :size="20" fill-color="var(--color-border-success)" />
 			{{ connectionState }}
 		</span>
 

src/components/AdminSettings/SignalingServer.vue

@@ -31,9 +31,9 @@
 
 		<span v-if="server" class="test-connection">
 			<NcLoadingIcon v-if="!checked" :size="20" />
-			<IconAlertCircleOutline v-else-if="errorMessage" :size="20" fill-color="var(--color-error-text)" />
-			<IconAlertCircleOutline v-else-if="warningMessage" :size="20" fill-color="var(--color-warning-text)" />
-			<IconCheck v-else :size="20" fill-color="var(--color-success-text)" />
+			<IconAlertCircleOutline v-else-if="errorMessage" :size="20" fill-color="var(--color-border-error)" />
+			<IconAlertCircleOutline v-else-if="warningMessage" :size="20" fill-color="var(--color-favorite)" />
+			<IconCheck v-else :size="20" fill-color="var(--color-border-success)" />
 			{{ connectionState }}
 
 			<NcButton v-if="server && checked"

src/components/AdminSettings/StunServer.vue

@@ -23,7 +23,7 @@
 		<IconAlertCircleOutline v-show="!isValidServer"
 			class="stun-server__alert"
 			:title="t('spreed', 'The server address is invalid')"
-			fill-color="#E9322D" />
+			fill-color="var(--color-border-error)" />
 
 		<NcButton v-show="!loading"
 			variant="tertiary"

src/components/AdminSettings/TurnServer.vue

@@ -55,8 +55,8 @@
 			@click="testServer">
 			<template #icon>
 				<NcLoadingIcon v-if="testing" :size="20" />
-				<IconAlertCircleOutline v-else-if="testingError" fill-color="#E9322D" />
-				<IconCheck v-else-if="testingSuccess" fill-color="#46BA61" />
+				<IconAlertCircleOutline v-else-if="testingError" fill-color="var(--color-border-error)" />
+				<IconCheck v-else-if="testingSuccess" fill-color="var(--color-border-success)" />
 				<IconPulse v-else />
 			</template>
 		</NcButton>

src/components/AdminSettings/WebServerSetupChecks.vue

@@ -16,13 +16,12 @@
 				{{ t('spreed', 'Files required for virtual background can be loaded') }}
 				<NcButton variant="tertiary"
 					class="vue-button-inline"
-					:class="{ 'success-button': virtualBackgroundAvailable === true, 'error-button': virtualBackgroundAvailable === false }"
 					:title="virtualBackgroundAvailableTitle"
 					:aria-label="virtualBackgroundAvailableAriaLabel"
 					@click="checkVirtualBackground">
 					<template #icon>
-						<IconAlertCircleOutline v-if="virtualBackgroundAvailable === false" :size="20" />
-						<IconCheck v-else-if="virtualBackgroundAvailable === true" :size="20" />
+						<IconAlertCircleOutline v-if="virtualBackgroundAvailable === false" :size="20" fill-color="var(--color-border-error)" />
+						<IconCheck v-else-if="virtualBackgroundAvailable === true" :size="20" fill-color="var(--color-border-success)" />
 						<NcLoadingIcon v-else :size="20" />
 					</template>
 				</NcButton>
@@ -174,13 +173,5 @@ export default {
 <style lang="scss" scoped>
 .vue-button-inline {
 	display: inline-block !important;
-
-	&.success-button {
-		color: var(--color-success-text);
-	}
-
-	&.error-button {
-		color: var(--color-error-text);
-	}
 }
 </style>

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -612,7 +612,7 @@ export default {
 
 <style lang="scss" scoped>
 .critical > :deep(.action-button) {
-	color: var(--color-error-text);
+	color: var(--color-text-error);
 }
 
 .conversation {

src/components/PollViewer/PollViewer.vue

@@ -490,6 +490,6 @@ export default {
 }
 
 .critical :deep(.action-button) {
-	color: var(--color-error-text) !important;
+	color: var(--color-text-error) !important;
 }
 </style>

src/components/RightSidebar/Participants/Participant.vue

@@ -1046,7 +1046,7 @@ export default {
 	}
 
 	:deep(.list-item-content__actions > .critical) {
-		color: var(--color-error-text);
+		color: var(--color-text-error);
 	}
 }
 
@@ -1057,7 +1057,7 @@ export default {
 }
 
 .critical > :deep(.action-button) {
-	color: var(--color-error-text);
+	color: var(--color-text-error);
 }
 
 </style>