Merge pull request #6978 from nextcloud/feat/6927/button-for-device-checker

6927: updated button for device checker

1 files changed, 23 insertions, 39 deletions

diff --git a/src/components/DeviceChecker/DeviceChecker.vue b/src/components/DeviceChecker/DeviceChecker.vue
index 436364166..f65533ee1 100644
--- a/src/components/DeviceChecker/DeviceChecker.vue
+++ b/src/components/DeviceChecker/DeviceChecker.vue
@@ -60,12 +60,12 @@
 			-->
 			<div class="device-checker__call-preferences">
 				<!-- Audio toggle -->
-				<button v-tooltip="audioButtonTooltip"
-					class="device-toggle"
+				<Button v-tooltip="audioButtonTooltip"
+					type="tertiary"
 					:aria-label="audioButtonTooltip"
 					:disabled="!audioPreviewAvailable"
 					@click="toggleAudio">
-					<span class="device-toggle__icon">
+					<template #icon>
 						<Microphone v-if="audioOn"
 							title=""
 							decorative
@@ -74,8 +74,8 @@
 							title=""
 							decorative
 							:size="20" />
-					</span>
-				</button>
+					</template>
+				</Button>
 				<VolumeIndicator class="indicator"
 					:audio-preview-available="audioPreviewAvailable"
 					:current-volume="currentVolume"
@@ -83,12 +83,12 @@
 					:disabled="!audioOn" />
 
 				<!-- Video toggle -->
-				<button v-tooltip="videoButtonTooltip"
-					class="device-toggle"
+				<Button v-tooltip="videoButtonTooltip"
+					type="tertiary"
 					:aria-label="videoButtonTooltip"
 					:disabled="!videoPreviewAvailable"
 					@click="toggleVideo">
-					<span class="device-toggle__icon">
+					<template #icon>
 						<Video v-if="videoOn"
 							title=""
 							decorative
@@ -97,43 +97,42 @@
 							title=""
 							decorative
 							:size="20" />
-					</span>
-				</button>
+					</template>
+				</Button>
 
 				<!-- Blur toggle -->
-				<button v-if="videoPreviewAvailable && blurPreviewAvailable"
+				<Button v-if="videoPreviewAvailable && blurPreviewAvailable"
 					v-tooltip="blurButtonTooltip"
-					class="device-toggle"
+					type="tertiary"
 					:aria-label="blurButtonTooltip"
 					:disabled="!blurPreviewAvailable"
 					@click="toggleBlur">
-					<span class="device-toggle__icon">
+					<template #icon>
 						<Blur v-if="blurOn"
-							slot="icon"
 							:size="20"
 							decorative
 							title="" />
 						<BlurOff v-else
-							slot="icon"
 							:size="20"
 							decorative
 							title="" />
-					</span>
-				</button>
+					</template>
+				</Button>
 			</div>
 
 			<!-- Device selection -->
 			<div class="device-checker__device-selection">
-				<button v-if="!showDeviceSelection"
+				<Button v-if="!showDeviceSelection"
+					type="tertiary"
 					class="select-devices"
 					@click="showDeviceSelection = true">
-					<span class="select-devices__icon">
+					<template #icon>
 						<Cog title=""
 							decorative
 							:size="20" />
-					</span>
-					<span> {{ t('spreed', 'Choose devices') }}</span>
-				</button>
+					</template>
+					{{ t('spreed', 'Choose devices') }}
+				</Button>
 				<template v-if="showDeviceSelection">
 					<MediaDevicesSelector kind="audioinput"
 						:devices="devices"
@@ -176,7 +175,7 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
 import BrowserStorage from '../../services/BrowserStorage'
 import VolumeIndicator from '../VolumeIndicator/VolumeIndicator.vue'
-
+import Button from '@nextcloud/vue/dist/Components/Button'
 export default {
 	name: 'DeviceChecker',
 
@@ -195,6 +194,7 @@ export default {
 		CallButton,
 		CheckboxRadioSwitch,
 		VolumeIndicator,
+		Button,
 	},
 
 	mixins: [devices],
@@ -414,23 +414,7 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: none;
-	border: none;
-	padding: 0;
 	margin: auto;
-	&__icon {
-		margin-right: 4px;
-	}
-	opacity: 0.8;
-	&:hover,
-	&:focus {
-		opacity: 1;
-	}
-}
-
-.device-toggle {
-	background: none;
-	border: none;
 }
 
 .call-button {