Added logo and styling options

.gitignore

@@ -2,6 +2,7 @@ node_modules/
 
 /app/build/
 /app/public/config.js
+/app/public/images/logo.*
 /server/config/
 !/server/config/config.example.js
 /server/public/

app/public/chooseRoom.html

@@ -15,7 +15,7 @@
 			top: 40%;
 			width: 90%;
 			transform: translate(-50%, 0%);
-			background-image: url('/images/background.svg');
+			background-image: url('/images/background.jpg');
 			background-attachment: fixed;
 			background-position: center;
 			background-size: cover;

app/public/config.example.js

@@ -1,8 +1,9 @@
+// eslint-disable-next-line
 var config =
 {
 	loginEnabled    : false,
 	developmentPort : 3443,
-	turnServers : [
+	turnServers     : [
 		{
 			urls : [
 				'turn:turn.example.com:443?transport=tcp'
@@ -16,8 +17,11 @@ var config =
 	{
 		tcp : true
 	},
-	lastN : 4,
+	lastN      : 4,
-	theme :
+	background : 'images/background.jpg',
+	// Add file and uncomment for adding logo to appbar
+	// logo       : 'images/logo.svg',
+	theme      :
 	{
 		palette :
 		{

app/src/components/Room.js

@@ -42,9 +42,15 @@ const styles = (theme) =>
 	({
 		root :
 		{
-			display : 'flex',
+			display              : 'flex',
-			width   : '100%',
+			width                : '100%',
-			height  : '100%'
+			height               : '100%',
+			backgroundColor      : 'var(--background-color)',
+			backgroundImage      : `url(${window.config.background})`,
+			backgroundAttachment : 'fixed',
+			backgroundPosition   : 'center',
+			backgroundSize       : 'cover',
+			backgroundRepeat     : 'no-repeat'
 		},
 		message :
 		{
@@ -60,6 +66,10 @@ const styles = (theme) =>
 			margin  : 0,
 			padding : 0
 		},
+		logo :
+		{
+			marginLeft : 20
+		},
 		show :
 		{
 			opacity    : 1,
@@ -288,6 +298,10 @@ class Room extends React.PureComponent
 									<MenuIcon />
 								</IconButton>
 							</Badge>
+							{ window.config.logo ?
+								<img alt='Logo' className={classes.logo} src={window.config.logo} />
+								:null
+							}
 							<Typography
 								className={classes.title}
 								variant='h6'

app/src/index.css

@@ -1,13 +1,6 @@
 :root {
-	--background: url('./images/background.jpg');
 	--background-color: rgba(114, 119, 143, 1.0);
 
-	--circle-button-color: rgba(255, 255, 255, 0.3);
-	--circle-button-toggled-color: rgba(255, 255, 255, 0.7);
-	--circle-button-unsupported-color: rgba(212, 34, 65, 0.7);
-	--circle-button-diabled-color: rgba(255, 255, 255, 0.5);
-	--circle-button-size: 2.5em;
-
 	--media-control-button-color: rgba(255, 255, 255, 0.85);
 	--media-control-botton-on: rgba(255, 255, 255, 0.7);
 	--media-control-botton-off: rgba(212, 34, 65, 0.7);
@@ -25,18 +18,6 @@
 	--peer-bg-color: rgba(42, 75, 88, 0.9);
 	--peer-video-bg-color: rgba(0, 0, 0, 0.75);
 
-	--chat-message-color: rgba(0, 0, 0, 0.1);
-	--chat-input-bg-color: rgba(255, 255, 255, 1.0);
-	--chat-input-text-color: rgba(0, 0, 0, 1.0);
-	--chat-send-bg-color: rgba(170, 238, 255, 1.0);
-
-	--filesharing-bg-color: rgba(170, 238, 255, 1.0);
-
-	--notification-info-bg-color: rgba(10, 29, 38, 0.75);
-	--notification-info-text-color: rgba(255, 255, 255, 0.65);
-	--notification-error-bg-color: rgba(255, 25, 20, 0.65);
-	--notification-error-text-color: rgba(255, 255, 255, 0.85);
-
 	--active-speaker-border-color: rgba(255, 255, 255, 1.0);
 	--selected-peer-border-color: rgba(55, 126, 255, 1.0);
 }
@@ -54,12 +35,6 @@ body
 	height: 100%;
 	width: 100%;
 	font-size: 16px;
-	background-color: var(--background-color);
-	background-image: var(--background);
-	background-attachment: fixed;
-	background-position: center;
-	background-size: cover;
-	background-repeat: no-repeat;
 }
 
 #multiparty-meeting