From c0551fa9e2165f60ebde6ace361e472ac2f6fc46 Mon Sep 17 00:00:00 2001
From: David FYON <davidfyon@gmail.com>
Date: Mon, 9 Dec 2024 14:39:49 +0100
Subject: [PATCH] Fix 3.0.7 issues (#3866)

---
 .../synapse-bridge/src/patterns/FooterBar/FooterBar.vue   | 8 ++++++++
 packages/synapse-bridge/src/patterns/FooterBar/config.ts  | 2 --
 .../synapse-bridge/src/patterns/HeaderBar/HeaderBar.vue   | 4 ++--
 .../HeaderBar/HeaderNavigationBar/HeaderNavigationBar.vue | 3 +++
 .../HeaderNavigationDrawer/HeaderNavigationDrawer.vue     | 2 ++
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/synapse-bridge/src/patterns/FooterBar/FooterBar.vue b/packages/synapse-bridge/src/patterns/FooterBar/FooterBar.vue
index 7bf7a07bd4..b6bbcee968 100644
--- a/packages/synapse-bridge/src/patterns/FooterBar/FooterBar.vue
+++ b/packages/synapse-bridge/src/patterns/FooterBar/FooterBar.vue
@@ -216,6 +216,7 @@ export default defineComponent({
 			<VBtn
 				v-bind="options.goTopBtn"
 				:aria-label="locales.goTopBtnLabel"
+				class="topbtn"
 				@click="scrollToTop"
 			>
 				<VIcon v-bind="options.goTopBtnIcon">
@@ -290,6 +291,13 @@ a {
 	flex-grow: 0 !important;
 }
 
+.topbtn {
+	display: flex;
+	width: 24px;
+	height: 24px;
+	padding: 16px !important;
+}
+
 // Use deep selector to style user content as well
 .vd-footer-bar.v-theme--dark :deep() {
 	background-color: $vd-grey-darken-20 !important;
diff --git a/packages/synapse-bridge/src/patterns/FooterBar/config.ts b/packages/synapse-bridge/src/patterns/FooterBar/config.ts
index 45077951d5..ae254cd8e9 100644
--- a/packages/synapse-bridge/src/patterns/FooterBar/config.ts
+++ b/packages/synapse-bridge/src/patterns/FooterBar/config.ts
@@ -9,8 +9,6 @@ export const config = {
 		icon: 'true',
 		variant: 'text',
 		elevation: 0,
-		height: '24px',
-		width: '24px',
 	},
 	goTopBtnIcon: {
 		color: 'primary',
diff --git a/packages/synapse-bridge/src/patterns/HeaderBar/HeaderBar.vue b/packages/synapse-bridge/src/patterns/HeaderBar/HeaderBar.vue
index a4ffc27b79..0c2920f935 100644
--- a/packages/synapse-bridge/src/patterns/HeaderBar/HeaderBar.vue
+++ b/packages/synapse-bridge/src/patterns/HeaderBar/HeaderBar.vue
@@ -322,10 +322,10 @@ export default defineComponent({
 	text-transform: uppercase;
 	letter-spacing: 0.0892857143em;
 	&.v-tab:hover {
-		background: rgba($color: #fff, $alpha: 0.02);
+		background: rgba(255, 255, 255, 0.02);
 	}
 	&.v-tab--selected:hover {
-		background: rgba($color: #fff, $alpha: 0.1);
+		background: rgba(255, 255, 255, 0.1);
 	}
 	&.v-tab:not(.v-tab--selected) {
 		color: hsla(0, 0%, 100%, 0.6);
diff --git a/packages/synapse-bridge/src/patterns/HeaderBar/HeaderNavigationBar/HeaderNavigationBar.vue b/packages/synapse-bridge/src/patterns/HeaderBar/HeaderNavigationBar/HeaderNavigationBar.vue
index 50e57282a7..5eaf253b54 100644
--- a/packages/synapse-bridge/src/patterns/HeaderBar/HeaderNavigationBar/HeaderNavigationBar.vue
+++ b/packages/synapse-bridge/src/patterns/HeaderBar/HeaderNavigationBar/HeaderNavigationBar.vue
@@ -107,6 +107,9 @@ export default defineComponent({
 <style lang="scss" scoped>
 .vd-navigation-bar {
 	overflow: hidden;
+	a {
+		color: white;
+	}
 }
 .header-navigation-background {
 	background-color: v-bind(backgroundColor);
diff --git a/packages/synapse-bridge/src/patterns/HeaderBar/HeaderNavigationDrawer/HeaderNavigationDrawer.vue b/packages/synapse-bridge/src/patterns/HeaderBar/HeaderNavigationDrawer/HeaderNavigationDrawer.vue
index 81aa27ff17..34f2cd4c93 100644
--- a/packages/synapse-bridge/src/patterns/HeaderBar/HeaderNavigationDrawer/HeaderNavigationDrawer.vue
+++ b/packages/synapse-bridge/src/patterns/HeaderBar/HeaderNavigationDrawer/HeaderNavigationDrawer.vue
@@ -121,9 +121,11 @@ export default defineComponent({
 		.v-tab {
 			text-transform: uppercase;
 			letter-spacing: 0.0892857143em;
+			color: white;
 		}
 		.v-tab--selected {
 			background: rgba($color: #fff, $alpha: 0.1);
+			color: hsla(0,0%,100%,1);
 		}
 	}
 }