fix: update recording icon

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

img/material-icons/screen-record-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M158-242q-37-50-57.5-110.5T80-480q0-67 20-127t57-110l58 57q-26 38-40.5 83.5T160-480q0 51 14.5 97t40.5 84l-57 57ZM480-80q-67 0-127-20t-110-57l57-58q38 26 83.5 40.5T480-160q51 0 96.5-14.5T660-215l57 58q-50 37-110 57T480-80Zm322-162-57-57q26-38 40.5-84t14.5-97q0-51-14.5-96.5T745-660l58-57q37 50 57 110t20 127q0 67-20.5 127.5T802-242ZM299-745l-57-57q50-37 110.5-57.5T480-880q68 0 128 20.5T718-802l-57 57q-38-26-84-40.5T480-800q-51 0-97 14.5T299-745Zm181 465q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280Z"/></svg>

src/components/TopBar/CallTime.vue

@@ -16,9 +16,11 @@
 				variant="tertiary"
 				@click="showPopover = !showPopover">
 				<template v-if="isRecording || isStartingRecording" #icon>
-					<IconRecordCircleOutline
+					<NcIconSvgWrapper
-						:size="20"
+						class="call-time__recording-icon"
-						:fill-color="isRecording ? 'var(--color-border-error)' : 'var(--color-loading-light)'" />
+						:class="{ 'call-time__recording-icon--start': isStartingRecording }"
+						:svg="IconScreenRecordOutline"
+						:size="20" />
 				</template>
 				<span class="call-time__text">
 					<span class="call-time__placeholder">{{ placeholderCallTime }}</span>
@@ -60,10 +62,11 @@
 <script>
 import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcPopover from '@nextcloud/vue/components/NcPopover'
-import IconRecordCircleOutline from 'vue-material-design-icons/RecordCircleOutline.vue'
 import IconStop from 'vue-material-design-icons/Stop.vue'
+import IconScreenRecordOutline from '../../../img/material-icons/screen-record-outline.svg?raw'
 import { useDocumentVisibility } from '../../composables/useDocumentVisibility.ts'
 import { useGetToken } from '../../composables/useGetToken.ts'
 import { CALL } from '../../constants.ts'
@@ -76,9 +79,9 @@ export default {
 
 	components: {
 		NcButton,
+		NcIconSvgWrapper,
 		NcLoadingIcon,
 		NcPopover,
-		IconRecordCircleOutline,
 		IconStop,
 	},
 
@@ -94,6 +97,7 @@ export default {
 
 	setup() {
 		return {
+			IconScreenRecordOutline,
 			isDocumentVisible: useDocumentVisibility(),
 			token: useGetToken(),
 		}
@@ -241,6 +245,15 @@ export default {
 		height: 0;
 		overflow: hidden;
 	}
+
+	&__recording-icon {
+		animation: pulse 2s infinite;
+		color: var(--color-element-error, var(--color-error));
+
+		&--start {
+			color: var(--color-loading-light);
+		}
+	}
 }
 
 :deep(.button-vue) {
@@ -253,4 +266,16 @@ export default {
 	}
 }
 
+@keyframes pulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.7;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
 </style>

src/components/TopBar/TopBarMenu.vue

@@ -33,7 +33,9 @@
 						close-after-click
 						@click="startRecording">
 						<template #icon>
-							<IconRecordCircleOutline :size="20" />
+							<NcIconSvgWrapper
+								:svg="IconScreenRecordOutline"
+								:size="20" />
 						</template>
 						{{ t('spreed', 'Start recording') }}
 					</NcActionButton>
@@ -149,11 +151,11 @@ import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import IconFileOutline from 'vue-material-design-icons/FileOutline.vue'
 import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
 import IconFullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
-import IconRecordCircleOutline from 'vue-material-design-icons/RecordCircleOutline.vue'
 import IconStop from 'vue-material-design-icons/Stop.vue'
 import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import IconFileDownload from '../../../img/material-icons/file-download.svg?raw'
 import IconMicrophoneOffOutline from '../../../img/material-icons/microphone-off-outline.svg?raw'
+import IconScreenRecordOutline from '../../../img/material-icons/screen-record-outline.svg?raw'
 import {
 	toggleFullscreen,
 	useDocumentFullscreen,
@@ -182,7 +184,6 @@ export default {
 		IconFileOutline,
 		IconFullscreen,
 		IconFullscreenExit,
-		IconRecordCircleOutline,
 		IconStop,
 		IconVideoOutline,
 	},
@@ -216,6 +217,7 @@ export default {
 		return {
 			IconFileDownload,
 			IconMicrophoneOffOutline,
+			IconScreenRecordOutline,
 			isFullscreen: !props.isSidebar ? useDocumentFullscreen() : undefined,
 			isInCall: useIsInCall(),
 			toggleFullscreen,