fix: change icons to outline

src/PublicShareSidebarTrigger.vue

@@ -9,7 +9,7 @@
 		:aria-label="ariaLabel"
 		@click="emit('click')">
 		<template #icon>
-			<MessageText :size="20" />
+			<IconMessageTextOutline :size="20" />
 		</template>
 	</NcHeaderButton>
 </template>
@@ -20,7 +20,7 @@ import type { UnwrapNestedRefs } from 'vue'
 import { t } from '@nextcloud/l10n'
 import { computed } from 'vue'
 import NcHeaderButton from '@nextcloud/vue/components/NcHeaderButton'
-import MessageText from 'vue-material-design-icons/MessageText.vue'
+import IconMessageTextOutline from 'vue-material-design-icons/MessageTextOutline.vue'
 
 const props = defineProps<{
 	sidebarState: UnwrapNestedRefs<{ isOpen: boolean }>

src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue

@@ -34,7 +34,7 @@
 				variant="error"
 				@click="toggleShowDialog">
 				<template #icon>
-					<Delete :size="20" />
+					<IconDeleteOutline :size="20" />
 				</template>
 				{{ deleteButtonLabel }}
 			</NcButton>
@@ -97,7 +97,7 @@ import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
+import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
 import Reload from 'vue-material-design-icons/Reload.vue'
 import BreakoutRoomItem from '../RightSidebar/BreakoutRooms/BreakoutRoomItem.vue'
@@ -117,7 +117,7 @@ export default {
 		SelectableParticipant,
 		NcButton,
 		IconArrowLeft,
-		Delete,
+		IconDeleteOutline,
 		NcDialog,
 	},
 

src/components/CalendarEventsDialog.vue

@@ -23,12 +23,11 @@ import NcPopover from '@nextcloud/vue/components/NcPopover'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import IconAccountPlus from 'vue-material-design-icons/AccountPlus.vue'
-import IconAccountSearch from 'vue-material-design-icons/AccountSearch.vue'
-import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
+import IconAccountPlusOutline from 'vue-material-design-icons/AccountPlusOutline.vue'
+import IconAccountSearchOutline from 'vue-material-design-icons/AccountSearchOutline.vue'
+import IconCalendarBlankOutline from 'vue-material-design-icons/CalendarBlankOutline.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
-import IconReload from 'vue-material-design-icons/Reload.vue'
 import SelectableParticipant from './BreakoutRoomsEditor/SelectableParticipant.vue'
 import CalendarEventSmall from './UIShared/CalendarEventSmall.vue'
 import ContactSelectionBubble from './UIShared/ContactSelectionBubble.vue'
@@ -321,7 +320,7 @@ async function submitNewMeeting() {
 					:title="t('spreed', 'Upcoming meetings')"
 					:aria-label="t('spreed', 'Upcoming meetings')">
 					<template #icon>
-						<IconCalendarBlank :size="20" />
+						<IconCalendarBlankOutline :size="20" />
 					</template>
 					<template v-if="upcomingEvents[0] && !isMobile" #default>
 						<span class="upcoming-meeting__header">
@@ -346,7 +345,7 @@ async function submitNewMeeting() {
 				<NcEmptyContent v-else class="calendar-events__empty-content">
 					<template #icon>
 						<NcLoadingIcon v-if="loading" />
-						<IconCalendarBlank v-else />
+						<IconCalendarBlankOutline v-else />
 					</template>
 
 					<template #description>
@@ -425,7 +424,7 @@ async function submitNewMeeting() {
 					</NcCheckboxRadioSwitch>
 					<NcButton v-if="!isOneToOneConversation && !selectAll" variant="tertiary" @click="isSelectorOpen = true">
 						<template #icon>
-							<IconAccountPlus :size="20" />
+							<IconAccountPlusOutline :size="20" />
 						</template>
 						{{ t('spreed', 'Add attendees') }}
 					</NcButton>
@@ -483,7 +482,7 @@ async function submitNewMeeting() {
 					:name="!participantsInitialised ? t('spreed', 'Loading …') : t('spreed', 'No results')">
 					<template #icon>
 						<NcLoadingIcon v-if="!participantsInitialised" />
-						<IconAccountSearch v-else />
+						<IconAccountSearchOutline v-else />
 					</template>
 				</NcEmptyContent>
 				<template #actions>

src/components/CallView/BottomBar.vue

@@ -11,9 +11,10 @@ import { useStore } from 'vuex'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
 import IconFullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
+import IconHandBackLeft from 'vue-material-design-icons/HandBackLeft.vue' // Filled for better indication
 import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
-import IconViewGallery from 'vue-material-design-icons/ViewGallery.vue'
-import IconViewGrid from 'vue-material-design-icons/ViewGrid.vue'
+import IconViewGalleryOutline from 'vue-material-design-icons/ViewGalleryOutline.vue'
+import IconViewGridOutline from 'vue-material-design-icons/ViewGridOutline.vue'
 import CallButton from '../TopBar/CallButton.vue'
 import ReactionMenu from '../TopBar/ReactionMenu.vue'
 import TopBarMediaControls from '../TopBar/TopBarMediaControls.vue'
@@ -176,8 +177,8 @@ useHotKey('r', toggleHandRaised)
 				:title="changeViewLabel"
 				@click="changeView">
 				<template #icon>
-					<IconViewGrid v-if="!isGrid" :size="20" />
-					<IconViewGallery v-else :size="20" />
+					<IconViewGridOutline v-if="!isGrid" :size="20" />
+					<IconViewGalleryOutline v-else :size="20" />
 				</template>
 			</NcButton>
 		</div>
@@ -204,12 +205,13 @@ useHotKey('r', toggleHandRaised)
 				<!-- The following icon is much bigger than all the others
 					so we reduce its size -->
 				<template #icon>
-					<IconHandBackLeftOutline :size="16" />
+					<IconHandBackLeft v-if="isHandRaised" :size="16" />
+					<IconHandBackLeftOutline v-else :size="16" />
 				</template>
 			</NcButton>
 		</div>
 
-		<CallButton shrink-on-mobile
+		<CallButton
 			:hide-text="isSidebar"
 			:is-screensharing="!!localMediaModel.attributes.localScreen" />
 	</div>

src/components/CallView/CallFailedDialog.vue

@@ -9,7 +9,7 @@ import { computed } from 'vue'
 import { useStore } from 'vuex'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcModal from '@nextcloud/vue/components/NcModal'
-import IconAlertOctagon from 'vue-material-design-icons/AlertOctagon.vue'
+import IconAlertOctagonOutline from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import { messagePleaseTryToReload } from '../../utils/talkDesktopUtils.ts'
 
 const props = defineProps({
@@ -60,7 +60,7 @@ function clearConnectionFailedError() {
 		<NcEmptyContent :name="t('spreed', 'Connection failed')"
 			:description="message">
 			<template #icon>
-				<IconAlertOctagon />
+				<IconAlertOctagonOutline />
 			</template>
 		</NcEmptyContent>
 	</NcModal>

src/components/CallView/shared/EmptyCallView.vue

@@ -29,9 +29,9 @@
 import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import IconAccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+import IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'
 import IconLink from 'vue-material-design-icons/Link.vue'
-import IconPhone from 'vue-material-design-icons/Phone.vue'
+import IconPhoneOutline from 'vue-material-design-icons/PhoneOutline.vue'
 import { useGetToken } from '../../../composables/useGetToken.ts'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.ts'
 import { copyConversationLinkToClipboard } from '../../../utils/handleUrl.ts'
@@ -43,9 +43,9 @@ export default {
 	components: {
 		NcButton,
 		NcLoadingIcon,
-		IconAccountMultiple,
+		IconAccountMultipleOutline,
 		IconLink,
-		IconPhone,
+		IconPhoneOutline,
 	},
 
 	props: {
@@ -127,9 +127,9 @@ export default {
 			if (this.isConnecting) {
 				return NcLoadingIcon
 			} else if (this.isPhoneConversation) {
-				return IconPhone
+				return IconPhoneOutline
 			} else {
-				return this.isPublicConversation ? IconLink : IconAccountMultiple
+				return this.isPublicConversation ? IconLink : IconAccountMultipleOutline
 			}
 		},
 

src/components/CallView/shared/LocalVideo.vue

@@ -24,7 +24,7 @@
 				:class="fitVideo ? 'video--fit' : 'video--fill'"
 				class="video"
 				@playing="updateVideoAspectRatio" />
-			<AccountOff v-if="isPresenterOverlay && mouseover"
+			<IconAccountOffOutline v-if="isPresenterOverlay && mouseover"
 				class="presenter-icon__hide"
 				:aria-label="t('spreed', 'Hide presenter video')"
 				:title="t('spreed', 'Hide presenter video')"
@@ -65,7 +65,7 @@ import { t } from '@nextcloud/l10n'
 import { inject, ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-import AccountOff from 'vue-material-design-icons/AccountOff.vue'
+import IconAccountOffOutline from 'vue-material-design-icons/AccountOffOutline.vue'
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import VideoBackground from './VideoBackground.vue'
 import { AVATAR } from '../../../constants.ts'
@@ -81,7 +81,7 @@ export default {
 
 	components: {
 		AvatarWrapper,
-		AccountOff,
+		IconAccountOffOutline,
 		NcButton,
 		VideoBackground,
 		NcLoadingIcon,

src/components/CallView/shared/LocalVideoControlButton.vue

@@ -15,7 +15,7 @@
 			:disabled="!isVideoAllowed"
 			@click.stop="toggleVideo">
 			<template #icon>
-				<IconVideoOutline v-if="showVideoOn" :size="20" />
+				<IconVideo v-if="showVideoOn" :size="20" />
 				<IconVideoOffOutline v-else :size="20" />
 			</template>
 		</NcButton>
@@ -50,8 +50,8 @@ import NcActionCaption from '@nextcloud/vue/components/NcActionCaption'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import IconChevronUp from 'vue-material-design-icons/ChevronUp.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
 import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
-import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import { useDevices } from '../../../composables/useDevices.js'
 import { PARTICIPANT } from '../../../constants.ts'
 import BrowserStorage from '../../../services/BrowserStorage.js'
@@ -65,7 +65,7 @@ export default {
 		NcActionCaption,
 		NcButton,
 		IconChevronUp,
-		IconVideoOutline,
+		IconVideo,
 		IconVideoOffOutline,
 	},
 

src/components/CallView/shared/VideoBottomBar.spec.js

@@ -9,10 +9,10 @@ import { cloneDeep } from 'lodash'
 import { createPinia, setActivePinia } from 'pinia'
 import { createStore } from 'vuex'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
-import VideoIcon from 'vue-material-design-icons/Video.vue'
-import VideoOff from 'vue-material-design-icons/VideoOff.vue'
+import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
+import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
+import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import VideoBottomBar from './VideoBottomBar.vue'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.ts'
 import storeConfig from '../../../store/storeConfig.js'
@@ -214,10 +214,10 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const iceFailedIndicator = wrapper.findComponent(AlertCircle)
+					const iceFailedIndicator = wrapper.findComponent(IconAlertCircleOutline)
 					expect(iceFailedIndicator.exists()).toBeFalsy()
 
-					const raiseHandIndicator = wrapper.findComponent(HandBackLeft)
+					const raiseHandIndicator = wrapper.findComponent(IconHandBackLeftOutline)
 					expect(raiseHandIndicator.exists()).toBeTruthy()
 
 					const indicators = wrapper.findAllComponents(NcButton)
@@ -236,10 +236,10 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const iceFailedIndicator = wrapper.findComponent(AlertCircle)
+					const iceFailedIndicator = wrapper.findComponent(IconAlertCircleOutline)
 					expect(iceFailedIndicator.exists()).toBeTruthy()
 
-					const raiseHandIndicator = wrapper.findComponent(HandBackLeft)
+					const raiseHandIndicator = wrapper.findComponent(IconHandBackLeftOutline)
 					expect(raiseHandIndicator.exists()).toBeFalsy()
 
 					const indicators = wrapper.findAllComponents(NcButton)
@@ -258,7 +258,7 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const raiseHandIndicator = wrapper.findComponent(HandBackLeft)
+					const raiseHandIndicator = wrapper.findComponent(IconHandBackLeftOutline)
 					expect(raiseHandIndicator.exists()).toBeFalsy()
 				})
 
@@ -271,7 +271,7 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const raiseHandIndicator = wrapper.findComponent(HandBackLeft)
+					const raiseHandIndicator = wrapper.findComponent(IconHandBackLeftOutline)
 					expect(raiseHandIndicator.exists()).toBeTruthy()
 				})
 			})
@@ -420,7 +420,7 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const videoOnIcon = wrapper.findComponent(VideoIcon)
+					const videoOnIcon = wrapper.findComponent(IconVideoOutline)
 					expect(videoOnIcon.exists()).toBeTruthy()
 				})
 
@@ -437,7 +437,7 @@ describe('VideoBottomBar.vue', () => {
 						props: componentProps,
 					})
 
-					const videoOffIcon = wrapper.findComponent(VideoOff)
+					const videoOffIcon = wrapper.findComponent(IconVideoOffOutline)
 					expect(videoOffIcon.exists()).toBeTruthy()
 				})