From 212cdf0f4523542e960d7f4197ca4f25f7732a21 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 30 Jul 2024 14:00:31 +0200
Subject: [PATCH 1/6] fix(PublicShareAuthSidebar): fix and refactor styles for
 video verification sidebar

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/PublicShareAuthSidebar.vue | 110 ++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 58 deletions(-)

diff --git a/src/PublicShareAuthSidebar.vue b/src/PublicShareAuthSidebar.vue
index 158e32223b6..176d8bc8445 100644
--- a/src/PublicShareAuthSidebar.vue
+++ b/src/PublicShareAuthSidebar.vue
@@ -204,16 +204,24 @@ export default {
 }
 </script>
 
+<style lang="css">
+#talk-sidebar,
+#talk-sidebar *,
+#talk-sidebar *::before,
+#talk-sidebar *::after {
+	box-sizing: border-box;
+}
+</style>
+
 <style lang="scss" scoped>
 @import './assets/variables';
 
-/* Properties based on the app-sidebar */
+/* Styles based on the NcAppSidebar */
 #talk-sidebar {
 	position: relative;
 	flex-shrink: 0;
-	width: 27vw;
-	min-width: 300px;
-	max-width: 500px;
+	width: clamp(300px, 27vw, 500px);
+	height: 100%;
 
 	background: var(--color-main-background);
 	border-left: 1px solid var(--color-border);
@@ -228,71 +236,57 @@ export default {
 
 	/* Unset conflicting rules from guest.css for the sidebar. */
 	text-align: left;
-}
 
-#talk-sidebar > .emptycontent {
-	/* Remove default margin-top as it is unneeded when showing only the empty
-	 * content in a flex sidebar. */
-	margin-top: 0;
-}
+	& > .emptycontent {
+		/* Remove default margin-top as it is unneeded when showing only the empty
+		 * content in a flex sidebar. */
+		margin-top: 0;
+	}
 
-#talk-sidebar #call-container {
-	position: relative;
-
-	flex-grow: 1;
+	& #call-container {
+		position: relative;
 
-	/* Prevent shadows of videos from leaking on other elements. */
-	overflow: hidden;
+		flex-grow: 1;
 
-	/* Distribute available height between call container and chat view. */
-	height: 50%;
+		/* Prevent shadows of videos from leaking on other elements. */
+		overflow: hidden;
 
-	/* Ensure that the background will be black also in voice only calls. */
-	background-color: $color-call-background;
-}
+		/* Distribute available height between call container and chat view. */
+		height: 40%;
 
-#talk-sidebar #call-container :deep(.videoContainer) {
-	/* The video container has some small padding to prevent the video from
-	 * reaching the edges, but it also uses "width: 100%", so the padding should
-	 * be included in the full width of the element. */
-	box-sizing: border-box;
-}
+		/* Ensure that the background will be black also in voice only calls. */
+		background-color: $color-call-background;
 
-#talk-sidebar #call-container :deep(.videoContainer.promoted video) {
-	/* Base the size of the video on its width instead of on its height;
-	 * otherwise the video could appear in full height but cropped on the sides
-	 * due to the space available in the sidebar being typically larger in
-	 * vertical than in horizontal. */
-	width: 100%;
-	height: auto;
-}
-
-#talk-sidebar #call-container :deep(.nameIndicator) {
-	/* The name indicator has some small padding to prevent the name from
-	 * reaching the edges, but it also uses "width: 100%", so the padding should
-	 * be included in the full width of the element. */
-	box-sizing: border-box;
-}
+		:deep(.videoContainer.promoted video) {
+			/* Base the size of the video on its width instead of on its height;
+			 * otherwise the video could appear in full height but cropped on the sides
+			 * due to the space available in the sidebar being typically larger in
+			 * vertical than in horizontal. */
+			width: 100%;
+			height: auto;
+		}
+	}
 
-#talk-sidebar .chatView {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	position: relative;
+	& .chatView {
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		position: relative;
 
-	flex-grow: 1;
+		flex-grow: 1;
 
-	/* Distribute available height between call container and chat view. */
-	height: 50%;
-}
+		/* Distribute available height between call container and chat view. */
+		height: 60%;
+	}
 
-#talk-sidebar :deep(.wrapper) {
-	margin-top: 0;
-}
+	& :deep(.wrapper) {
+		margin-top: 0;
+	}
 
-/* Restore rules from style.scss overriden by guest.css for the sidebar. */
-#talk-sidebar :deep(a) {
-	color: var(--color-main-text);
-	font-weight: inherit;
+	/* Restore rules from style.scss overwritten by guest.css for the sidebar. */
+	& :deep(a) {
+		color: var(--color-main-text);
+		font-weight: inherit;
+	}
 }
 </style>

From e03f9a798cac627fe1973a3c6780c578659e6542 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 30 Jul 2024 14:02:38 +0200
Subject: [PATCH 2/6] fix(TopBar): remove reserved space for toggles

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/TopBar/TopBar.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 9f412aa2611..ad55dbda842 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -4,7 +4,10 @@
 -->
 
 <template>
-	<div class="top-bar" :style="topBarStyle" :data-theme-dark="isInCall">
+	<div class="top-bar"
+		:class="{ 'top-bar--sidebar': isSidebar}"
+		:style="topBarStyle"
+		:data-theme-dark="isInCall">
 		<ConversationIcon :key="conversation.token"
 			class="conversation-icon"
 			:offline="isPeerInactive"
@@ -307,7 +310,7 @@ export default {
 	justify-content: flex-end;
 	padding: calc(2 * var(--default-grid-baseline));
 	// Reserve space for the sidebar toggle button
-	padding-right: calc(2 * var(--default-grid-baseline) + var(--app-sidebar-offset));
+	padding-right: calc(2 * var(--default-grid-baseline) + var(--app-sidebar-offset, 0));
 	background-color: var(--color-main-background);
 	border-bottom: 1px solid var(--color-border);
 
@@ -323,6 +326,10 @@ export default {
 		left: 0;
 		background-color: transparent;
 	}
+
+	&--sidebar {
+		padding: calc(2 * var(--default-grid-baseline));
+	}
 }
 
 .conversation-icon {

From fef0f97b2d70ceca1da4cbef18b9c75435edad9b Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 30 Jul 2024 14:03:05 +0200
Subject: [PATCH 3/6] fix(TopBar): pass correct color to conversation type icon

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/ConversationIcon.vue | 1 +
 src/components/TopBar/TopBar.vue    | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index e79a010db41..33217732d2b 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -272,6 +272,7 @@ export default {
 		width: 18px;
 		border: 2px solid var(--color-main-background);
 		background-color: var(--color-main-background);
+		color: var(--color-main-text);
 		border-radius: 50%;
 	}
 
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index ad55dbda842..619284787f6 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -253,6 +253,7 @@ export default {
 
 		topBarStyle() {
 			return {
+				'--original-color-main-text': window.getComputedStyle(document.body).getPropertyValue('--color-main-text'),
 				'--original-color-main-background': window.getComputedStyle(document.body).getPropertyValue('--color-main-background')
 			}
 		},
@@ -329,6 +330,10 @@ export default {
 
 	&--sidebar {
 		padding: calc(2 * var(--default-grid-baseline));
+
+		.conversation-icon {
+			margin-left: 0;
+		}
 	}
 }
 
@@ -375,6 +380,7 @@ export default {
 }
 
 :deep(.conversation-icon__type) {
+	color: var(--original-color-main-text) !important;
 	border-color: var(--original-color-main-background) !important;
 	background-color: var(--original-color-main-background) !important;
 }

From a970896111ee7944acdf1b1d1468dac5b3e56dbf Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 30 Jul 2024 14:03:40 +0200
Subject: [PATCH 4/6] fix(CallButton): hide button text when in sidebar (as in
 mobile)

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/TopBar/CallButton.vue | 12 ++++++++++--
 src/components/TopBar/TopBar.vue     |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 8f1b4f0b942..70179c6b812 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -178,7 +178,15 @@ export default {
 		},
 
 		/**
-		 * Whether the to use text on button at mobile view
+		 * Whether to use text on button (e.g. at sidebar)
+		 */
+		hideText: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Whether to use text on button at mobile view
 		 */
 		shrinkOnMobile: {
 			type: Boolean,
@@ -217,7 +225,7 @@ export default {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 		showButtonText() {
-			return !this.isMobile || !this.shrinkOnMobile
+			return !this.hideText && (!this.isMobile || !this.shrinkOnMobile)
 		},
 		showRecordingWarning() {
 			return [CALL.RECORDING.VIDEO_STARTING, CALL.RECORDING.AUDIO_STARTING,
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 619284787f6..e945fdc55e8 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -82,7 +82,7 @@
 			:model="localMediaModel"
 			@open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
 
-		<CallButton shrink-on-mobile :is-screensharing="!!localMediaModel.attributes.localScreen" />
+		<CallButton shrink-on-mobile :hide-text="isSidebar" :is-screensharing="!!localMediaModel.attributes.localScreen" />
 
 		<!-- Breakout rooms editor -->
 		<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"

From af3cc0c0e04adda7607a53f24fd66266ffec545d Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 30 Jul 2024 14:21:19 +0200
Subject: [PATCH 5/6] fix(PublicShareSidebar): hide duplicated CallButton

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/PublicShareSidebar.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue
index c7b7b346eb9..3d23cf832d5 100644
--- a/src/PublicShareSidebar.vue
+++ b/src/PublicShareSidebar.vue
@@ -26,7 +26,7 @@
 				<CallView v-if="isInCall"
 					:token="token"
 					:is-sidebar="true" />
-				<CallButton class="call-button" />
+				<CallButton v-if="!isInCall" class="call-button" />
 				<ChatView />
 				<PollViewer />
 				<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
@@ -274,7 +274,6 @@ export default {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	padding: var(--default-grid-baseline) 0;
 }
 
 #talk-sidebar > .emptycontent {
@@ -297,7 +296,7 @@ export default {
 }
 
 #talk-sidebar .call-button {
-	margin: 0 auto calc(var(--default-grid-baseline) * 2);
+	margin: calc(var(--default-grid-baseline) * 2) auto;
 }
 
 #talk-sidebar .button-centered {

From 57ead9377f2d5334802970ce206f91f203b2be59 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 1 Aug 2024 11:34:43 +0200
Subject: [PATCH 6/6] style: adjust publicshareauth.css to stretch body
 component to the viewport height

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 css/publicshareauth.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/css/publicshareauth.css b/css/publicshareauth.css
index f7ab98d784f..8814920cf32 100644
--- a/css/publicshareauth.css
+++ b/css/publicshareauth.css
@@ -13,10 +13,8 @@
  * layout was adjusted. */
 body.talk-sidebar-enabled {
 	/* Move rules set for body by guest.scss to the wrapped body. */
-	display: unset;
-	flex-direction: unset;
-	justify-content: unset;
-	align-items: unset;
+	flex-direction: row;
+	height: 100vh;
 }
 
 body.talk-sidebar-enabled #body-login {