feat: header position styles parameters (#525)

* Fix positioning of vac-room-header * added parameters to set own header style * added parameters to set own header style
advanced-chat · Apr 22, 2024 · 87b7ee8 · 87b7ee8
1 parent 3c16ca0
commit 87b7ee8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/lib/Room/RoomHeader/RoomHeader.scss b/src/lib/Room/RoomHeader/RoomHeader.scss
@@ -1,9 +1,9 @@
 .vac-room-header {
-	position: fixed;
+	position: var(--chat-header-position);
 	display: flex;
 	align-items: center;
 	height: 64px;
-	width: 100%;
+	width: var(--chat-header-width);
 	z-index: 10;
 	margin-right: 1px;
 	background: var(--chat-header-bg-color);

diff --git a/src/themes/index.js b/src/themes/index.js
@@ -23,7 +23,9 @@ export const defaultThemeStyles = {
 		header: {
 			background: '#fff',
 			colorRoomName: '#0a0a0a',
-			colorRoomInfo: '#9ca6af'
+			colorRoomInfo: '#9ca6af',
+			position: 'absolute',
+			width: '100%',
 		},
 
 		footer: {
@@ -168,7 +170,9 @@ export const defaultThemeStyles = {
 		header: {
 			background: '#181a1b',
 			colorRoomName: '#fff',
-			colorRoomInfo: '#9ca6af'
+			colorRoomInfo: '#9ca6af',
+			position: 'absolute',
+			width: '100%'
 		},
 
 		footer: {
@@ -327,6 +331,8 @@ export const cssThemeVars = ({
 		'--chat-header-bg-color': header.background,
 		'--chat-header-color-name': header.colorRoomName,
 		'--chat-header-color-info': header.colorRoomInfo,
+		'--chat-header-position': header.position,
+		'--chat-header-width': header.width,
 
 		// footer
 		'--chat-footer-bg-color': footer.background,