feat(ui): improve colors contrast in dark mode

src/App.vue

@@ -35,7 +35,7 @@
 					>
 						<v-list-item-action>
 							<v-badge
-								color="red"
+								color="error"
 								:value="item.badge"
 								:content="item.badge"
 								dot
@@ -139,7 +139,7 @@
 							dark
 							medium
 							style="cursor: default"
-							:color="statusColor || 'orange'"
+							:color="statusColor || 'warning'"
 							v-on="on"
 							>swap_horizontal_circle</v-icon
 						>
@@ -187,7 +187,7 @@
 							class="mr-3"
 							:content="updateAvailable"
 							:value="updateAvailable"
-							color="red"
+							color="error"
 							overlap
 						>
 							<v-btn small icon @click="showUpdateDialog">
@@ -572,13 +572,13 @@ export default {
 				case InclusionState.Excluding:
 					toReturn.message = 'Exclusion is active'
 					toReturn.icon = 'cancel'
-					toReturn.color = 'red'
+					toReturn.color = 'error'
 					break
 				case InclusionState.Busy:
 					toReturn.message =
 						'Waiting for inclusion/exclusion to complete...'
 					toReturn.icon = 'hourglass_bottom'
-					toReturn.color = 'yellow'
+					toReturn.color = 'warning'
 					break
 				case InclusionState.SmartStart:
 					toReturn.message = 'SmartStart inclusion is active'
@@ -799,8 +799,8 @@ export default {
 			options = options || {}
 
 			const levelMap = {
-				warning: 'orange',
-				alert: 'red',
+				warning: 'warning',
+				alert: 'error',
 			}
 
 			options.color = options.color || levelMap[level] || 'primary'
@@ -811,8 +811,8 @@ export default {
 			options = options || {}
 
 			const levelMap = {
-				warning: 'orange',
-				alert: 'red',
+				warning: 'warning',
+				alert: 'error',
 			}
 
 			options.color = options.color || levelMap[level] || 'primary'
@@ -1111,7 +1111,7 @@ export default {
 			})
 
 			this.socket.on('connect', () => {
-				this.updateStatus('Connected', 'green')
+				this.updateStatus('Connected', 'success')
 				log.info('Socket connected')
 				this.socket.emit(
 					socketActions.init,
@@ -1133,15 +1133,15 @@ export default {
 
 			this.socket.on('disconnect', () => {
 				log.info('Socket disconnected')
-				this.updateStatus('Disconnected', 'red')
+				this.updateStatus('Disconnected', 'error')
 			})
 
 			this.socket.on('error', (err) => {
 				log.info('Socket error', err)
 			})
 
 			this.socket.on('reconnecting', () => {
-				this.updateStatus('Reconnecting', 'yellow')
+				this.updateStatus('Reconnecting', 'warning')
 			})
 
 			if (log.enabledFor(logger.DEBUG)) {

src/components/ValueId.vue

@@ -225,7 +225,7 @@
 						:color="
 							value.newValue === true && !value.list
 								? 'white'
-								: 'green'
+								: 'success'
 						"
 						dark
 						@click="updateValue(value, true)"
@@ -235,7 +235,7 @@
 							:color="
 								value.newValue === true && !value.list
 									? 'white'
-									: 'green'
+									: 'success'
 							"
 							style="rotate: 90deg"
 							>horizontal_rule</v-icon
@@ -255,7 +255,7 @@
 						:color="
 							value.newValue === false && !value.list
 								? 'white'
-								: 'red'
+								: 'error'
 						"
 						@click="updateValue(value, false)"
 						dark
@@ -265,7 +265,7 @@
 							:color="
 								value.newValue === false && !value.list
 									? 'white'
-									: 'red'
+									: 'error'
 							"
 							>radio_button_unchecked</v-icon
 						>

src/components/custom/StatisticsArrows.vue

@@ -4,12 +4,12 @@
 			<center v-on="on">
 				<blink-icon
 					icon="north"
-					:activeColor="node.errorTransmit ? 'error' : 'green'"
+					:activeColor="node.errorTransmit ? 'error' : 'success'"
 					:active="now - node.lastTransmit < 200"
 				/>
 				<blink-icon
 					icon="south"
-					:activeColor="node.errorReceive ? 'error' : 'green'"
+					:activeColor="node.errorReceive ? 'error' : 'success'"
 					:active="now - node.lastReceive < 200"
 				/>
 				<div class="text-caption">

src/components/custom/StatisticsCard.vue

@@ -97,17 +97,21 @@ export default {
 					divider: true,
 					stats: {
 						...this.createStat('CAN', 'CAN'),
-						...this.createStat('NAK', 'NAK', 'red'),
-						...this.createStat('timeoutACK', 'Timeout ACK', 'red'),
+						...this.createStat('NAK', 'NAK', 'error'),
+						...this.createStat(
+							'timeoutACK',
+							'Timeout ACK',
+							'error',
+						),
 						...this.createStat(
 							'timeoutResponse',
 							'Timeout Response',
-							'red',
+							'error',
 						),
 						...this.createStat(
 							'timeoutCallback',
 							'Timeout Callback',
-							'red',
+							'error',
 						),
 					},
 					cols: 6,
@@ -121,12 +125,12 @@ export default {
 						...this.createStat(
 							'commandsDroppedTX',
 							'Dropped TX',
-							'red',
+							'error',
 						),
 						...this.createStat(
 							'commandsDroppedRX',
 							'Dropped RX',
-							'red',
+							'error',
 						),
 					},
 					cols: 3,
@@ -143,12 +147,12 @@ export default {
 						...this.createStat(
 							'messagesDroppedTX',
 							'Dropped TX',
-							'red',
+							'error',
 						),
 						...this.createStat(
 							'messagesDroppedRX',
 							'Dropped RX',
-							'red',
+							'error',
 						),
 					},
 					cols: 3,

src/components/dialogs/DialogLinkReliability.vue

@@ -82,7 +82,7 @@
 							v-if="running"
 							:indeterminate="this.infinite"
 							:value="this.infinite ? null : this.progress"
-							color="green darken-1"
+							color="success"
 						></v-progress-linear>
 						<v-list dense>
 							<v-list-item>

src/components/dialogs/DialogNodesManager.vue

@@ -60,7 +60,7 @@
 											<template v-slot:label>
 												<div class="option">
 													<v-icon
-														color="green accent-4"
+														color="success"
 														small
 														>add_circle</v-icon
 													>
@@ -97,9 +97,7 @@
 										>
 											<template v-slot:label>
 												<div class="option">
-													<v-icon
-														color="red accent-4"
-														small
+													<v-icon color="error" small
 														>remove_circle</v-icon
 													>
 													<strong>Exclusion</strong>
@@ -219,7 +217,7 @@
 											<template v-slot:label>
 												<div class="option">
 													<v-icon
-														color="green accent-4"
+														color="success"
 														small
 														>add_circle</v-icon
 													>
@@ -392,7 +390,7 @@
 											<template v-slot:label>
 												<div class="option">
 													<v-icon
-														color="green accent-4"
+														color="success"
 														small
 														>enhanced_encryption</v-icon
 													>

src/components/nodes-table/AssociationGroups.vue

@@ -10,14 +10,14 @@
 				<template v-slot:top>
 					<v-btn
 						text
-						color="green"
+						color="success"
 						@click="dialogAssociation = true"
 						class="mb-2"
 						>Add</v-btn
 					>
 					<v-btn
 						text
-						color="red"
+						color="error"
 						@click="removeAllAssociations"
 						class="mb-2"
 						>Remove All</v-btn
@@ -57,7 +57,7 @@
 					}}
 				</template>
 				<template v-slot:[`item.actions`]="{ item }">
-					<v-icon small color="red" @click="removeAssociation(item)"
+					<v-icon small color="error" @click="removeAssociation(item)"
 						>delete</v-icon
 					>
 				</template>

src/components/nodes-table/ExpandedNode.vue

@@ -54,7 +54,7 @@
 					</v-btn>
 					<v-btn
 						dark
-						color="green"
+						color="success"
 						depressed
 						@click="advancedShowDialog = true"
 					>
@@ -425,7 +425,7 @@ export default {
 								},
 							],
 							icon: 'update',
-							color: 'red',
+							color: 'error',
 							desc: 'Perform a firmware update OTW (Over The Wire)',
 						},
 					]
@@ -443,6 +443,7 @@ export default {
 								},
 							],
 							icon: 'update',
+							color: 'error',
 							desc: 'Start/Stop a firmware update',
 						},
 						{
@@ -480,6 +481,7 @@ export default {
 									action: 'replaceFailedNode',
 								},
 							],
+							color: 'error',
 							icon: 'dangerous',
 							desc: 'Manage nodes that are dead and/or marked as failed with the controller',
 						},
@@ -499,6 +501,7 @@ export default {
 						},
 					],
 					icon: 'healing',
+					color: 'warning',
 					desc: 'Discover and assign new routes from node to the controller and other nodes.',
 				})
 			}
@@ -509,6 +512,7 @@ export default {
 						{
 							name: 'Clear',
 							action: 'removeAllAssociations',
+							color: 'error',
 							args: {
 								confirm:
 									"This action will remove all associations of this node. This will also clear lifeline association with controller node, the node won't report state changes until that is set up again",
@@ -589,6 +593,7 @@ export default {
 						},
 					],
 					icon: 'link_off',
+					color: 'error',
 					desc: 'Clear all node associations / Remove node from all associations',
 				},
 				...CCActions,