fix(Grid): add spacing between stripe and bottom bar

src/assets/variables.scss

@@ -17,7 +17,7 @@ $messages-list-max-width: calc($messages-avatar-width + $messages-text-max-width
 $messages-input-max-width: calc($messages-list-max-width - 100px);
 
 // background color of call container
-$color-call-background: rgba(34, 34, 34, 0.8);
+$color-call-background: rgba(0, 0, 0, 0.7);
 
 // transition
 $transition-duration-quick: var(--animation-quick, 100ms);

src/components/CallView/BottomBar.vue

@@ -265,9 +265,9 @@ useHotKey('f', toggleFullscreen)
 	align-items: center;
 	flex-direction: row;
 	gap: var(--default-grid-baseline);
+}
 
-	:deep(.button-vue) {
-		background-color: var(--color-primary-light);
-	}
+:deep(.button-vue--tertiary) {
+	background-color: var(--color-primary-light);
 }
 </style>

src/components/CallView/Grid/Grid.vue

@@ -100,6 +100,7 @@
 				<LocalVideo v-if="isStripe && !isRecording"
 					ref="localVideo"
 					class="video"
+					:class="{ 'local-video--highlighted': isLessThanTwoVideos }"
 					:is-stripe="true"
 					:show-controls="false"
 					:token="token"
@@ -968,6 +969,12 @@ export default {
 	position: relative;
 	bottom: 0;
 	inset-inline-start: 0;
+
+	&:has(.stripe-wrapper) {
+		margin-top: var(--grid-gap);
+		bottom: var(--grid-gap);
+		padding-inline: var(--grid-gap);
+	}
 }
 
 .grid {
@@ -1099,8 +1106,8 @@ export default {
 
 .stripe--collapse {
 	position: absolute !important;
-	top: calc(-1 * (var(--default-clickable-area) + var(--navigation-position) / 2));
-	inset-inline-end: calc(var(--navigation-position) / 2) ;
+	top: calc(-1 * var(--default-clickable-area));
+	inset-inline-end: var(--navigation-position);
 }
 
 .stripe--collapse,
@@ -1124,4 +1131,8 @@ export default {
 	}
 }
 
+.local-video--highlighted {
+	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
 </style>

src/components/CallView/shared/LocalAudioControlButton.vue

@@ -323,7 +323,7 @@ export default {
 .local-audio-control-wrapper {
 	display: flex;
 	align-items: center;
-	gap: calc(var(--default-grid-baseline) / 2);
+	gap: 1px;
 }
 
 // Overwriting NcActionButton styles

src/components/CallView/shared/LocalVideoControlButton.vue

@@ -240,7 +240,7 @@ export default {
 .local-video-control-wrapper {
 	display: flex;
 	align-items: center;
-	gap: calc(var(--default-grid-baseline) / 2);
+	gap: 1px;
 }
 
 // Overwriting NcActionButton styles

src/components/CallView/shared/PresenterOverlay.vue

@@ -184,8 +184,8 @@ export default {
 .presenter-overlay--collapsed {
 	position: absolute !important;
 	opacity: .7;
-	bottom: 48px;
-	inset-inline-end: 0;
+	bottom: calc(var(--default-clickable-area) + var(--default-grid-baseline));
+	inset-inline-end: var(--grid-gap);
 
 	#call-container:hover & {
 		background-color: rgba(0, 0, 0, 0.1) !important;

src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue

@@ -23,7 +23,7 @@
 				:reference-limit="0" />
 
 			<!-- Additional controls -->
-			<CallButton v-if="showJoinCallButton" />
+			<CallButton v-if="showJoinCallButton" class="call-button" />
 			<ConversationActionsShortcut v-else-if="showConversationActionsShortcut"
 				:token="message.token"
 				:object-type="conversation.objectType"
@@ -587,6 +587,10 @@ export default {
 	}
 }
 
+.call-button {
+	margin: 0 auto;
+}
+
 :deep(.rich-text--wrapper) {
 	direction: inherit;
 }

src/components/TopBar/CallButton.vue

@@ -4,87 +4,82 @@
 -->
 
 <template>
-	<div>
-		<NcButton v-if="showStartCallButton"
-			id="call_button"
-			:title="startCallTitle"
-			:aria-label="startCallLabel"
-			:disabled="startCallButtonDisabled || loading || isJoiningCall"
-			:variant="hasCall ? 'success' : 'primary'"
-			@click="handleClick">
+	<NcButton v-if="showStartCallButton"
+		:title="startCallTitle"
+		:aria-label="startCallLabel"
+		:disabled="startCallButtonDisabled || loading || isJoiningCall"
+		:variant="hasCall ? 'success' : 'primary'"
+		@click="handleClick">
+		<template #icon>
+			<NcLoadingIcon v-if="isJoiningCall || loading" :size="20" />
+			<IconPhoneDialOutline v-else-if="isPhoneRoom" :size="20" />
+			<IconPhoneOutline v-else-if="silentCall" :size="20" />
+			<IconPhone v-else :size="20" />
+		</template>
+		<template v-if="showButtonText" #default>
+			{{ startCallLabel }}
+		</template>
+	</NcButton>
+
+	<NcButton v-else-if="showLeaveCallButton && canEndForAll && isPhoneRoom"
+		:aria-label="endCallLabel"
+		variant="error"
+		:disabled="loading"
+		@click="leaveCall(true)">
+		<template #icon>
+			<NcLoadingIcon v-if="loading" :size="20" />
+			<IconPhoneHangupOutline v-else :size="20" />
+		</template>
+		<template v-if="showButtonText" #default>
+			{{ endCallLabel }}
+		</template>
+	</NcButton>
+	<NcButton v-else-if="showLeaveCallButton && !canEndForAll && !isBreakoutRoom"
+		:aria-label="leaveCallLabel"
+		:variant="isScreensharing ? 'tertiary' : 'error'"
+		:disabled="loading"
+		@click="leaveCall(false)">
+		<template #icon>
+			<NcLoadingIcon v-if="loading" :size="20" />
+			<IconPhoneHangupOutline v-else :size="20" />
+		</template>
+		<template v-if="showButtonText" #default>
+			{{ leaveCallLabel }}
+		</template>
+	</NcButton>
+	<NcActions v-else-if="showLeaveCallButton && (canEndForAll || isBreakoutRoom)"
+		class="leave-call-actions--split"
+		:disabled="loading"
+		force-name
+		placement="top-end"
+		:aria-label="leaveCallActionsLabel"
+		:inline="1"
+		:variant="leaveCallButtonVariant">
+		<template #icon>
+			<IconChevronUp :size="20" />
+		</template>
+		<NcActionButton v-if="isBreakoutRoom"
+			@click="switchToParentRoom">
 			<template #icon>
-				<NcLoadingIcon v-if="isJoiningCall || loading" :size="20" />
-				<IconPhoneDialOutline v-else-if="isPhoneRoom" :size="20" />
-				<IconPhoneOutline v-else-if="silentCall" :size="20" />
-				<IconPhone v-else :size="20" />
+				<IconArrowLeft class="bidirectional-icon" :size="20" />
 			</template>
-			<template v-if="showButtonText" #default>
-				{{ startCallLabel }}
-			</template>
-		</NcButton>
-
-		<NcButton v-else-if="showLeaveCallButton && canEndForAll && isPhoneRoom"
-			id="call_button"
-			:aria-label="endCallLabel"
-			variant="error"
-			:disabled="loading"
-			@click="leaveCall(true)">
-			<template #icon>
-				<NcLoadingIcon v-if="loading" :size="20" />
-				<IconPhoneHangupOutline v-else :size="20" />
-			</template>
-			<template v-if="showButtonText" #default>
-				{{ endCallLabel }}
-			</template>
-		</NcButton>
-		<NcButton v-else-if="showLeaveCallButton && !canEndForAll && !isBreakoutRoom"
-			id="call_button"
-			:aria-label="leaveCallLabel"
-			:variant="isScreensharing ? 'tertiary' : 'error'"
-			:disabled="loading"
+			{{ backToMainRoomLabel }}
+		</NcActionButton>
+		<NcActionButton class="leave-call-button--split"
 			@click="leaveCall(false)">
 			<template #icon>
 				<NcLoadingIcon v-if="loading" :size="20" />
 				<IconPhoneHangupOutline v-else :size="20" />
 			</template>
-			<template v-if="showButtonText" #default>
-				{{ leaveCallLabel }}
-			</template>
-		</NcButton>
-		<NcActions v-else-if="showLeaveCallButton && (canEndForAll || isBreakoutRoom)"
-			class="leave-call-actions--split"
-			:disabled="loading"
-			force-name
-			placement="top-end"
-			:aria-label="leaveCallActionsLabel"
-			:inline="1"
-			:variant="leaveCallButtonVariant">
+			{{ leaveCallLabel }}
+		</NcActionButton>
+		<NcActionButton v-if="canEndForAll" @click="leaveCall(true)">
 			<template #icon>
-				<IconChevronUp :size="20" />
+				<IconPhoneOffOutline :size="20" />
 			</template>
-			<NcActionButton v-if="isBreakoutRoom"
-				@click="switchToParentRoom">
-				<template #icon>
-					<IconArrowLeft class="bidirectional-icon" :size="20" />
-				</template>
-				{{ backToMainRoomLabel }}
-			</NcActionButton>
-			<NcActionButton class="leave-call-button--split"
-				@click="leaveCall(false)">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<IconPhoneHangupOutline v-else :size="20" />
-				</template>
-				{{ leaveCallLabel }}
-			</NcActionButton>
-			<NcActionButton v-if="canEndForAll" @click="leaveCall(true)">
-				<template #icon>
-					<IconPhoneOffOutline :size="20" />
-				</template>
-				{{ t('spreed', 'End call for everyone') }}
-			</NcActionButton>
-		</NcActions>
-	</div>
+			{{ t('spreed', 'End call for everyone') }}
+		</NcActionButton>
+	</NcActions>
 </template>
 
 <script>
@@ -483,12 +478,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#call_button {
-	margin: 0 auto;
-}
-
 .leave-call-actions--split {
-	gap: calc(var(--default-grid-baseline) / 2);
+	gap: 1px;
 }
 
 .leave-call-actions--split :deep(.action-item--single) {

src/components/TopBar/TopBarMediaControls.vue

@@ -459,7 +459,7 @@ export default {
 .buttons-bar {
 	display: flex;
 	align-items: center;
-	gap: 3px;
+	gap: var(--default-grid-baseline);
 }
 
 .buttons-bar #screensharing-menu button {