Added more visual style when the app is in DO NOT DISTURB

The background color of the top tabbar will change the color.

app/view/main/Main.js

@@ -26,7 +26,9 @@ Ext.define('Rambox.view.main.Main', {
 	,autoShow: true
 	,deferredRender: false
 	,tabBar: {
-		items: [{
+		 id: 'mainTabBar'
+		,cls: JSON.parse(localStorage.getItem('dontDisturb')) ? 'dontdisturb' : ''
+		,items: [{
 			 xtype: 'button'
 			,html: '<span class="fa fa-heart" style="color:red;font-size:16px;cursor:pointer;padding:0 5px;"></span>'
 			,baseCls: ''

app/view/main/MainController.js

@@ -319,6 +319,8 @@ Ext.define('Rambox.view.main.MainController', {
 
 		btn.pressed ? btn.setGlyph('xf1f7@FontAwesome') : btn.setGlyph('xf0f3@FontAwesome');
 
+		Ext.getCmp('mainTabBar').getEl().toggleCls('dontdisturb');
+
 		// If this method is called from Lock method, prevent showing toast
 		if ( !e ) return;
 		Ext.toast({

packages/local/rambox-default-theme/sass/src/tab/Bar.scss

@@ -7,3 +7,10 @@
 		margin-top: -10px;
 	}
 }
+
+.dontdisturb {
+	background-color: #c3c3c3;
+	.x-tab {
+		background-color: #c3c3c3;
+	}
+}