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,3 +1,4 @@
+// eslint-disable-next-line
 var config =
 {
 	loginEnabled    : false,
@@ -17,6 +18,9 @@ var config =
 		tcp : true
 	},
 	lastN      : 4,
+	background : 'images/background.jpg',
+	// Add file and uncomment for adding logo to appbar
+	// logo       : 'images/logo.svg',
 	theme      :
 	{
 		palette :

app/src/components/Room.js

@@ -44,7 +44,13 @@ const styles = (theme) =>
 		{
 			display              : 'flex',
 			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