fix(NcIconSvgWrapper): fix colors and positioning

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/CallView/shared/VideoBottomBar.vue

@@ -39,8 +39,8 @@
 					:disabled="isAudioButtonDisabled"
 					@click.stop="forceMute">
 					<template #icon>
-						<Microphone v-if="model.attributes.audioAvailable" :size="20" fill-color="#ffffff" />
-						<MicrophoneOff v-else :size="20" fill-color="#ffffff" />
+						<IconMicrophoneOutline v-if="model.attributes.audioAvailable" :size="20" />
+						<NcIconSvgWrapper v-else :svg="IconMicrophoneOffOutline" :size="20" />
 					</template>
 				</NcButton>
 
@@ -51,8 +51,8 @@
 					variant="tertiary-no-background"
 					@click.stop="toggleVideo">
 					<template #icon>
-						<VideoIcon v-if="isRemoteVideoEnabled" :size="20" fill-color="#ffffff" />
-						<VideoOff v-else :size="20" fill-color="#ffffff" />
+						<IconVideoOutline v-if="isRemoteVideoEnabled" :size="20" />
+						<IconVideoOffOutline v-else :size="20" />
 					</template>
 				</NcButton>
 
@@ -64,13 +64,13 @@
 					variant="tertiary-no-background"
 					@click.stop="switchToScreen">
 					<template #icon>
-						<IconMonitor :size="20" fill-color="#ffffff" />
+						<IconMonitor :size="20" />
 					</template>
 				</NcButton>
 
 				<div v-if="connectionStateFailedNoRestart"
 					class="status-indicator iceFailedIndicator">
-					<IconAlertCircleOutline :size="20" fill-color="#ffffff" />
+					<IconAlertCircleOutline :size="20" />
 				</div>
 			</TransitionWrapper>
 
@@ -88,14 +88,15 @@
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
-import Microphone from 'vue-material-design-icons/Microphone.vue'
-import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
+import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
 import IconMonitor from 'vue-material-design-icons/Monitor.vue'
-import VideoIcon from 'vue-material-design-icons/Video.vue'
-import VideoOff from 'vue-material-design-icons/VideoOff.vue'
+import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
+import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
+import IconMicrophoneOffOutline from '../../../../img/material-icons/microphone-off-outline.svg?raw'
 import { PARTICIPANT } from '../../../constants.ts'
 import { useActorStore } from '../../../stores/actor.ts'
 import { useCallViewStore } from '../../../stores/callView.ts'
@@ -107,13 +108,13 @@ export default {
 	components: {
 		IconAlertCircleOutline,
 		IconHandBackLeftOutline,
-		Microphone,
-		MicrophoneOff,
+		IconMicrophoneOutline,
 		IconMonitor,
+		IconVideoOutline,
+		IconVideoOffOutline,
 		NcButton,
+		NcIconSvgWrapper,
 		TransitionWrapper,
-		VideoIcon,
-		VideoOff,
 	},
 
 	inheritAttrs: false,
@@ -182,6 +183,7 @@ export default {
 
 	setup() {
 		return {
+			IconMicrophoneOffOutline,
 			callViewStore: useCallViewStore(),
 			actorStore: useActorStore(),
 		}
@@ -386,6 +388,13 @@ export default {
 	opacity: .8 !important;
 }
 
+.audioIndicator,
+.videoIndicator,
+.screenSharingIndicator,
+.iceFailedIndicator {
+	color: #ffffff !important;
+}
+
 .audioIndicator[disabled],
 .videoIndicator {
 	opacity: .7;
@@ -397,5 +406,4 @@ export default {
 		opacity: 1;
 	}
 }
-
 </style>

src/components/UIShared/VolumeIndicator.vue

@@ -14,7 +14,7 @@
 				inline
 				:svg="IconMicrophoneOffOutline"
 				:size="size"
-				:fill-color="primaryColor" />
+				:style="{ color: primaryColor }" />
 		</span>
 
 		<span v-if="audioPreviewAvailable"
@@ -26,7 +26,7 @@
 				inline
 				:svg="IconMicrophoneOffOutline"
 				:size="size"
-				:fill-color="overlayMutedColor" />
+				:style="{ color: overlayMutedColor }" />
 		</span>
 	</span>
 </template>
@@ -168,6 +168,7 @@ export default {
 }
 
 .volume-indicator-overlay {
+	display: inline-flex;
 	bottom: 0;
 	pointer-events: none;