20.7.4 release

ChangeLog

@@ -1,4 +1,16 @@
-15-DEC_2022: 20.7.3
+16-DEC-2022: 20.7.4
+
+- Fixes notification icon CSS styles 
+- Fixes vertical offset of bell icon in classic UI 
+- Fixes app icon and comments button in Conf Cloud 
+- Smaller notification count icon
+- Removes shadow for notification icon
+- Shows Classic menu item only in kennedy theme 
+- Darker menu highlight CSS style
+- Improves network status updates and error handling
+- Uses status box styling for collaboration updates
+
+15-DEC-2022: 20.7.3
 
 - Hides empty button container in standalone app 
 - Fixes inconsistent network status icon and message

VERSION

@@ -1 +1 @@
-20.7.3
+20.7.4

src/main/webapp/js/diagramly/App.js

@@ -1737,7 +1737,7 @@ App.prototype.init = function()
 			}));
 		}
 		
-		if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp && urlParams['embed'] != '1' && DrawioFile.SYNC == 'auto' &&
+		if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp && DrawioFile.SYNC == 'auto' &&
 			urlParams['local'] != '1' && urlParams['stealth'] != '1' && !this.isOffline() &&
 			(!this.editor.chromeless || this.editor.editable))
 		{
@@ -1762,8 +1762,6 @@ App.prototype.init = function()
 				EditorUi.logEvent({category: 'TIMEOUT-CACHE-CHECK', action: 'timeout', label: 408});
 			}), Editor.cacheTimeout);
 			
-			var t0 = new Date().getTime();
-			
 			mxUtils.get(EditorUi.cacheUrl + '?alive', mxUtils.bind(this, function(req)
 			{
 				window.clearTimeout(timeoutThread);
@@ -1781,24 +1779,31 @@ App.prototype.init = function()
 	{
 		this.buttonContainer = this.createButtonContainer();
 		this.menubar.container.appendChild(this.buttonContainer);
-	}
 
-	if ((Editor.currentTheme == 'atlas' || urlParams['atlas'] == '1') &&
-		urlParams['embed'] != '1' && this.menubar != null)
-	{
-		this.toggleCompactMode(false);
-		this.icon = document.createElement('img');
-		this.icon.setAttribute('src', IMAGE_PATH + '/logo-flat-small.png');
-		this.icon.setAttribute('title', mxResources.get('draw.io'));
-		this.icon.style.padding = urlParams['atlas'] == '1'? '7px' : '6px';
-		this.icon.style.cursor = 'pointer';
-		
-		mxEvent.addListener(this.icon, 'click', mxUtils.bind(this, function(evt)
+		if (Editor.currentTheme == 'atlas')
 		{
-			this.appIconClicked(evt);
-		}));
-		
-		this.menubar.container.insertBefore(this.icon, this.menubar.container.firstChild);
+			this.toggleCompactMode(false);
+		}
+
+		if (Editor.currentTheme == 'atlas' || urlParams['atlas'] == '1')
+		{	
+			this.icon = document.createElement('img');
+			this.icon.setAttribute('src', IMAGE_PATH + '/logo-flat-small.png');
+			this.icon.setAttribute('title', mxResources.get('draw.io'));
+			this.icon.style.padding = urlParams['atlas'] == '1'? '7px' : '6px';
+
+			if (urlParams['embed'] != '1')
+			{
+				this.icon.style.cursor = 'pointer';
+				
+				mxEvent.addListener(this.icon, 'click', mxUtils.bind(this, function(evt)
+				{
+					this.appIconClicked(evt);
+				}));
+			}
+			
+			this.menubar.container.insertBefore(this.icon, this.menubar.container.firstChild);
+		}
 	}
 	
 	if (this.editor.graph.isViewer())
@@ -2713,6 +2718,10 @@ App.prototype.appIconClicked = function(evt)
 	{
 		this.openLink('https://get.draw.io/');
 	}
+	else
+	{
+		this.openLink('https://www.diagrams.net/');
+	}
 	
 	mxEvent.consume(evt);
 };
@@ -5745,9 +5754,10 @@ App.prototype.updateButtonContainer = function()
 		{
 			this.buttonContainer.style.paddingRight = '8px';
 		}
-		
+
 		// Comments
 		if (this.commentsSupported() && Editor.currentTheme != 'simple' &&
+			Editor.currentTheme != 'atlas' &&
 			Editor.currentTheme != 'sketch')
 		{
 			if (this.commentButton == null)
@@ -5764,13 +5774,6 @@ App.prototype.updateButtonContainer = function()
 					this.actions.get('comments').funct();
 				}));
 
-				if (Editor.currentTheme != 'simple' &&
-					Editor.currentTheme != 'sketch' &&
-					Editor.currentTheme != 'min')
-				{
-					this.commentButton.style.top = '-6px';
-				}
-				
 				if (this.userElement != null && this.userElement.parentNode == this.buttonContainer)
 				{
 					this.buttonContainer.insertBefore(this.commentButton, this.userElement);
@@ -5798,7 +5801,7 @@ App.prototype.updateButtonContainer = function()
 		{
 			if (file != null)
 			{
-				if (this.shareButton == null)
+				if (this.shareButton == null && Editor.currentTheme != 'atlas')
 				{
 					this.shareButton = document.createElement('button');
 					this.shareButton.className = 'geBtn geShareBtn';
@@ -5836,17 +5839,20 @@ App.prototype.updateButtonContainer = function()
 					this.buttonContainer.appendChild(this.shareButton);
 				}
 
-				this.shareButton.style.display = (Editor.currentTheme == 'simple' ||
-					Editor.currentTheme == 'sketch' || Editor.currentTheme == 'min')
-					? 'none' : 'inline-block';
-				
-				// Hides parent element if empty for flex layout gap to work
-				if (Editor.currentTheme == 'simple' ||
-					Editor.currentTheme == 'sketch')
+				if (this.shareButton != null)
 				{
-					this.shareButton.parentNode.style.display =
-						(this.shareButton.parentNode.clientWidth == 0)
-						? 'none' : '';
+					this.shareButton.style.display = (Editor.currentTheme == 'simple' ||
+						Editor.currentTheme == 'sketch' || Editor.currentTheme == 'min')
+						? 'none' : 'inline-block';
+					
+					// Hides parent element if empty for flex layout gap to work
+					if (Editor.currentTheme == 'simple' ||
+						Editor.currentTheme == 'sketch')
+					{
+						this.shareButton.parentNode.style.display =
+							(this.shareButton.parentNode.clientWidth == 0)
+							? 'none' : '';
+					}
 				}
 			}
 			else if (this.shareButton != null)
@@ -5854,9 +5860,10 @@ App.prototype.updateButtonContainer = function()
 				this.shareButton.parentNode.removeChild(this.shareButton);
 				this.shareButton = null;
 			}
-			
+
 			// Fetch notifications
-			if (urlParams['extAuth'] != '1') //Disable notification with external auth (e.g, Teams app)
+			if (urlParams['extAuth'] != '1' && 
+				Editor.currentTheme != 'atlas') //Disable notification with external auth (e.g, Teams app)
 			{
 				this.fetchAndShowNotification('online', this.mode);
 			}
@@ -5877,7 +5884,45 @@ App.prototype.updateButtonContainer = function()
 					(this.buttonContainer.clientWidth == 0)
 					? 'none' : '';
 			}
-		}	
+		}
+
+		// Updates comments button CSS
+		if (this.commentButton != null)
+		{
+			this.commentButton.style.marginRight = '';
+			this.commentButton.style.top = '';
+
+			if (Editor.currentTheme != 'simple' &&
+				Editor.currentTheme != 'sketch' &&
+				Editor.currentTheme != 'min' &&
+				urlParams['embed'] != '1')
+			{
+				this.commentButton.style.top = '-6px';
+			}
+			else if (urlParams['embed'] == '1')
+			{
+				this.commentButton.style.marginRight = '4px';
+			}
+		}
+
+		// Updates notification button CSS
+		if (this.notificationBtn != null)
+		{
+			if (Editor.currentTheme != 'simple' &&
+				Editor.currentTheme != 'sketch' &&
+				Editor.currentTheme != 'atlas' &&
+				Editor.currentTheme != 'min' &&
+				urlParams['embed'] != '1')
+			{
+				this.notificationBtn.style.marginRight = '4px';
+				this.notificationBtn.style.marginTop = '-12px';
+			}
+			else
+			{
+				this.notificationBtn.style.marginRight = '';
+				this.notificationBtn.style.marginTop = '';
+			}
+		}
 	}
 };
 
@@ -6024,36 +6069,10 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 		var notifCount = document.createElement('span');
 		notifCount.className = 'geNotification-count';
 		this.notificationBtn.appendChild(notifCount);
-				
-		if (Editor.currentTheme == 'simple' ||
-			Editor.currentTheme == 'sketch'||
-			Editor.currentTheme == 'min')
-		{
-			if (Editor.currentTheme != 'min'||
-				Editor.currentTheme == 'sketch')
-			{
-				this.notificationBtn.style.width = '30px';
-				notifCount.style.marginRight = '-10px';
-			}
-			
-			if (Editor.currentTheme == 'simple'||
-				Editor.currentTheme == 'sketch')
-			{
-				this.notificationBtn.style.top = '7px';
-			}
-			else
-			{
-				this.notificationBtn.style.top = '4px';
-			}
-		}
-		else if (urlParams['atlas'] == '1')
-		{
-			this.notificationBtn.style.top = '2px';
-		}
+		this.notifCount = notifCount;
 		
 		var notifBell = document.createElement('div');
 		notifBell.className = 'geNotification-bell';
-		notifBell.style.opacity = uiTheme == 'min'? '0.5' : '';
 		var bellPart = document.createElement('span');
 		bellPart.className = 'geBell-top';
 		notifBell.appendChild(bellPart);
@@ -6068,9 +6087,8 @@ App.prototype.showNotification = function(notifs, lsReadFlag)
 		notifBell.appendChild(bellPart);
 		this.notificationBtn.appendChild(notifBell);
 		
-		//Add as first child such that it is the left-most one
+		// Add as first child such that it is the left-most one
 		this.buttonContainer.insertBefore(this.notificationBtn, this.buttonContainer.firstChild);
-		
 		this.notificationWin = document.createElement('div');
 		this.notificationWin.className = 'geNotifPanel';
 		this.notificationWin.style.display = 'none';
@@ -7063,11 +7081,15 @@ App.prototype.toggleCompactMode = function(visible)
 		this.menubar.container.style.paddingBottom = '0px';
 		this.menubar.container.style.top = '0px';
 		this.toolbar.container.style.paddingLeft = '8px';
-		this.buttonContainer.style.visibility = 'hidden';
 		this.appIcon.style.display = 'none';
 		this.fnameWrapper.style.display = 'none';
 		this.fnameWrapper.style.visibility = 'hidden';
 		this.menubarHeight = EditorUi.prototype.menubarHeight;
+
+		if (Editor.currentTheme != 'atlas' && Editor.currentTheme != 'simple')
+		{
+			this.buttonContainer.style.visibility = 'hidden';
+		}
 	}
 
 	if (this.toggleElement != null)

src/main/webapp/js/diagramly/DrawioFile.js

@@ -1812,8 +1812,8 @@ DrawioFile.prototype.addUnsavedStatus = function(err)
 			var action = 'data-action="' + ((this.ui.mode == null || !this.isEditable()) ?
 				'saveAs' : 'save') + '"';
 			this.ui.editor.setStatus('<div ' + action + ' title="' +
-				status + '" class="geStatusAlertOrange">' + status +
-				' <img src="' + Editor.saveImage + '"/></div>');
+				status + '" class="geStatusAlert">' + status +
+				' <img class="geAdaptiveAsset" src="' + Editor.saveImage + '"/></div>');
 			
 			if (EditorUi.enableDrafts && (this.getMode() == null || EditorUi.isElectronApp))
 			{
@@ -2190,6 +2190,11 @@ DrawioFile.prototype.getErrorMessage = function(err)
 	{
 		msg = mxResources.get('timeout');
 	}
+	// XHR blocked by CORS or response has no CORS headers
+	else if (msg == '0')
+	{
+		msg = mxResources.get('noResponse');
+	}
 	
 	return msg;
 };

src/main/webapp/js/diagramly/DrawioFileSync.js

@@ -447,8 +447,7 @@ DrawioFileSync.prototype.isConnected = function()
 {
 	if (this.pusher != null && this.pusher.connection != null)
 	{
-		return this.pusher.connection.state == 'connecting' ||
-			this.pusher.connection.state == 'connected';
+		return this.pusher.connection.state == 'connected';
 	}
 	else if (this.puller != null)
 	{
@@ -487,7 +486,7 @@ DrawioFileSync.prototype.updateCollaboratorsElement = function()
 {
 	if (this.collaboratorsElement != null)
 	{
-		var status = this.ui.getSyncError();
+		var status = this.ui.getNetworkStatus();
 
 		if (status != null)
 		{
@@ -538,9 +537,7 @@ DrawioFileSync.prototype.createCollaboratorsElement = function()
 	{
 		if (this.file.isRealtimeEnabled() && this.file.isRealtimeSupported())
 		{
-			var status = (this.ui.isOffline(true)) ?
-				mxResources.get('offline') :
-				this.ui.getSyncError();
+			var status = this.ui.getNetworkStatus();
 			this.ui.showError(mxResources.get('realtimeCollaboration'),
 				mxUtils.htmlEntities((status != null) ? status :
 				mxResources.get('online')));
@@ -598,15 +595,18 @@ DrawioFileSync.prototype.updateStatus = function()
 				msg = msg.substring(0, 40) + '...';
 			}
 
+			var status = this.ui.getNetworkStatus();
 			var label = mxResources.get('lastChange', [str]);
 			var rev = (this.file.isRevisionHistorySupported()) ? 'data-action="revisionHistory" ' : '';
-			var err = (this.ui.isOffline(true)) ? mxResources.get('offline') : this.ui.getSyncError();
 			
 			this.ui.editor.setStatus('<div ' + rev + 'title="'+ mxUtils.htmlEntities(label) + '">' + mxUtils.htmlEntities(label) + '</div>' +
-				(!this.file.isEditable() ? '<div class="geStatusAlert">' + mxUtils.htmlEntities(mxResources.get('readOnly')) + '</div>' : '') +
-				(err != null ? '<div class="geStatusAlert">' + mxUtils.htmlEntities(err) + '</div>' : '') +
-				((msg != null) ? ' <div data-effect="fade" title="' + mxUtils.htmlEntities(msg) + '">(' +
-					mxUtils.htmlEntities(msg) + ')</div>' : ''));
+				(!this.file.isEditable() ? '<div class="geStatusBox" title="' +
+					mxUtils.htmlEntities(mxResources.get('readOnly')) + '">' +
+					mxUtils.htmlEntities(mxResources.get('readOnly')) + '</div>' : '') +
+				(status != null ? '<div class="geStatusBox" title="' + mxUtils.htmlEntities(status) + '">' +
+					mxUtils.htmlEntities(status) + '</div>' : '') +
+				((msg != null) ? ' <div class="geStatusBox" data-effect="fade" title="' + mxUtils.htmlEntities(msg) + '">' +
+					mxUtils.htmlEntities(msg) + '</div>' : ''));
 
 			this.resetUpdateStatusThread();
 		}
@@ -1824,7 +1824,8 @@ DrawioFileSync.prototype.fileSaved = function(pages, lastDesc, success, error, t
 						}
 						else
 						{
-							error({code: req.getStatus(), message: req.getStatus()});
+							error({message: mxResources.get('realtimeCollaboration') +
+								((req.getStatus() != 0) ? ': ' + req.getStatus() : '')});
 						}
 					}
 				}));

src/main/webapp/js/diagramly/EditorUi.js

@@ -12088,7 +12088,7 @@
 	/**
 	 * 
 	 */
-	EditorUi.prototype.getSyncError = function()
+	EditorUi.prototype.getNetworkStatus = function()
 	{
 		var status = null;
 
@@ -12109,20 +12109,21 @@
 				}
 				else if (file.sync != null && !file.sync.enabled)
 				{
-					status = mxResources.get('offline');
+					status = mxResources.get('realtimeCollaboration') +
+						': ' + mxResources.get('disabled');
 				}
 				else if (file.sync != null && !file.sync.isConnected())
 				{
-					status = mxResources.get('disconnected');
+					status = mxResources.get('notConnected');
 				}
 				else if (file.isRealtimeEnabled() &&
 					file.isRealtimeSupported() &&
 					file.getRealtimeState() > 1)
 				{
 					var err = file.getRealtimeError();
-					status = ((err != null && err.message != null) ?
-						mxResources.get('error') + ': ' + err.message :
-						mxResources.get('disconnected'));
+					status = mxResources.get('realtimeCollaboration') + ': ' +
+						((err != null && err.message != null) ?
+						err.message : mxResources.get('error'));
 				}
 			}
 		}
@@ -12173,7 +12174,7 @@
 							{
 								var title = mxResources.get('share');
 								var img = Editor.thinUserAddImage;
-								var status = this.getSyncError();
+								var status = this.getNetworkStatus();
 
 								if (status != null)
 								{

src/main/webapp/js/diagramly/Menus.js

@@ -333,8 +333,10 @@
         }));
 
 		toggleSimpleModeAction.setToggleAction(true);
+		toggleSimpleModeAction.visible = Editor.currentTheme != 'min' && Editor.currentTheme != 'sketch' &&
+			Editor.currentTheme != 'atlas';
 		toggleSimpleModeAction.setSelectedCallback(function() { return Editor.currentTheme != 'simple'; });
-		
+
         var toggleSketchModeAction = editorUi.actions.put('toggleSketchMode', new Action(mxResources.get('sketch'), function(e)
         {
 			editorUi.setSketchMode(!Editor.sketchMode);
@@ -4477,7 +4479,7 @@
 			{
 				var err = (editorUi.isOffline(true)) ?
 					mxResources.get('offline') :
-					editorUi.getSyncError();
+					editorUi.getNetworkStatus();
 
 				if (err != null)
 				{

src/main/webapp/resources/dia_de.txt

@@ -520,7 +520,7 @@ none=Ohne
 noOtherViewers=Keine weiteren Betrachter
 noPlugins=Keine Plugins
 noPreview=Keine Vorschau
-noResponse=Keine Antowort vom Server
+noResponse=Keine Antwort vom Server
 noResultsFor=Keine Resultate für '{1}'
 noRevisions=Keine Überarbeitungen
 noSearchResults=Keine Suchergebnisse gefunden

src/main/webapp/resources/dia_fil.txt

@@ -108,13 +108,13 @@ configLinkWarn=This link configures draw.io. Only click OK if you trust whoever
 configLinkConfirm=Click OK to configure and restart draw.io.
 container=Container
 csv=CSV
-dark=Sombre
+dark=Dark
 diagramXmlDesc=XML File
 diagramHtmlDesc=HTML File
 diagramPngDesc=Editable Bitmap Image
 diagramSvgDesc=Editable Vector Image
 didYouMeanToExportToPdf=Did you mean to export to PDF?
-disabled=Désactivé
+disabled=Disabled
 draftFound=Isang draft para sa '{1}' ang nahanap. Ikarga ito sa loob ng editor o isantabi ito para magpatuloy
 draftRevisionMismatch=There is a different version of this diagram on a shared draft of this page. Please edit the diagram from the draft to ensure you are working with the latest version.
 selectDraft=Select a draft to continue editing:

src/main/webapp/resources/dia_fr.txt

@@ -114,7 +114,7 @@ diagramHtmlDesc=Fichier HTML
 diagramPngDesc=Image bitmap éditable
 diagramSvgDesc=Image vectorielle éditable
 didYouMeanToExportToPdf=Vouliez vous exporter en PDF ?
-disabled=Disabled
+disabled=Désactivé
 draftFound=Un brouillon pour '{1}' a été trouvé. Pour poursuivre, souhaitez-vous l'afficher dans l'éditeur ou l'ignorer ?
 draftRevisionMismatch=There is a different version of this diagram on a shared draft of this page. Please edit the diagram from the draft to ensure you are working with the latest version.
 selectDraft=Sélectionner un brouillon pour poursuivre l'édition :

src/main/webapp/resources/dia_zh.txt

@@ -568,7 +568,7 @@ pageContent=页面内容
 pageNotFound=未找到页面
 pageWithNumber=第 {1} 页
 pages=页面
-pageTabs=Page Tabs
+pageTabs=页面标签
 pageView=页面视图
 pageSetup=页面设置
 pageScale=页面比例
@@ -597,7 +597,7 @@ plusTooltip=单击进行连接与复制（ctrl+单击进行复制，shift+单击
 portrait=竖向
 position=位置
 posterPrint=海报样式
-preferences=喜好
+preferences=首选项
 preview=预览
 previousPage=上一页
 print=打印
@@ -691,7 +691,7 @@ serviceUnavailableOrBlocked=服务无法使用或已被屏蔽
 sessionExpired=会话已过期，请刷新浏览器窗口。
 sessionTimeoutOnSave=会话已超时，您的 Google Drive 连接已断开。按确定键登录并保存。
 setAsDefaultStyle=设置为默认样式
-settings=Settings
+settings=设置
 shadow=阴影
 shape=形状
 shapes=形状

src/main/webapp/styles/atlas.css

@@ -185,6 +185,9 @@ html body .geMenubarContainer .mxDisabled {
 	opacity: 1;
 	color: rgb(179, 179, 179);
 }
+html .geButtonContainer {
+	padding-right:10px;
+}
 .geDialogTitle {
 	box-sizing:border-box;
 	white-space:nowrap;
@@ -203,48 +206,10 @@ html body .geMenubarContainer .mxDisabled {
 	border-top:1px solid #e5e5e5;
 	color:darkGray;
 }
-
-.geNotification-box {
-  width: 50px;
-  height: 30px;
-  text-align: center;
-  float: left;
-  position: relative;
-  top: 1px !important;
-  cursor: pointer;
-}
-
-.geNotification-bell {
-  animation: geBellAnim 1s 1s both;
-  opacity: 0.75;
-}
-
-.geNotification-bell * {
-  display: block;
-  margin: 0 auto;
-  background-color: #DEEBFF !important;
-  box-shadow: 0px 0px 10px #DEEBFF !important;
-}
-
-.geNotification-count {
-  position: absolute;
-  z-index: 1;
-  top: -5px;
-  right: 7px;
-  width: 15px;
-  height: 15px;
-  line-height: 15px;
-  font-size: 10px;
-  border-radius: 50%;
-  background-color: #ff4927;
-  color: #DEEBFF !important;
-  animation: geZoomAnim 1s 1s both;
-}
-
-.geNotifPanel .header {
-  height: 30px;
-  width: 100%;
-  background: #0049B0 !important;
-  color: #DEEBFF !important;
-  font-size: 15px;
+html .geNotification-bell {
+  opacity: 1;
+}
+html .geNotification-bell * {
+  background-color: #DEEBFF;
+  box-shadow: 0px 0px 10px #DEEBFF;
 }

src/main/webapp/styles/dark.css

@@ -46,7 +46,8 @@ html body .geShapePicker {
 html body .geTabContainer div.geActivePage, html body .geRuler {
 	background:var(--dark-color);
 }
-.geSearchSidebar input, .geBtnStepper, .geBtnUp {
+.geSearchSidebar input, .geBtnStepper, .geBtnUp,
+html body a.geStatus .geStatusBox {
 	border-color: var(--border-color);
 }
 html body.geEditor div.mxPopupMenu hr {
@@ -255,40 +256,22 @@ html body .geCommentContainer {
 	color: inherit;
 }
 
-.geNotification-bell * {
-  display: block;
-  margin: 0 auto;
-  background-color: #aaa !important;
-  box-shadow: 0px 0px 10px #aaa !important;
+html .geNotification-bell * {
+  background-color: #aaa;
+  box-shadow: none;
 }
 
-.geNotification-count {
-  position: absolute;
-  z-index: 1;
-  top: -5px;
-  right: 7px;
-  width: 15px;
-  height: 15px;
-  line-height: 15px;
-  font-size: 10px;
-  border-radius: 50%;
-  background-color: #ff4927;
-  color: #DEEBFF !important;
-  animation: geZoomAnim 1s 1s both;
+html .geNotification-count {
+  color: #DEEBFF;
 }
 
-.geNotifPanel .header {
+html .geNotifPanel .header {
   height: 30px;
   width: 100%;
-  background: #424242 !important;
-  color: #ccc !important;
-  font-size: 15px;
+  background: #424242;
+  color: #ccc;
 }
 
 .geNotifPanel .notifications {
-    position: relative;
-    height: 270px;
-    overflow-x: hidden;
-    overflow-y: auto;
     background-color: #707070;
-}
+}

src/main/webapp/styles/grapheditor.css

@@ -167,11 +167,18 @@ a.geStatus {
 a.geStatus div + div {
 	margin-left:8px;
 }
+a.geStatus .geStatusBox {
+	border-style: solid;
+	border-width: 1px;
+	border-radius: 3px;
+	font-size: 10px;
+	padding: 3px;
+}
 a.geStatus .geStatusAlert {
 	padding:4px 8px;
-	background-color:#f2dede;
-	border:1px solid #ebccd1;
-	color:#a94442 !important;
+	background-color:#eacccc;
+	border:1px solid #dca4ad;
+	color:#b62623 !important;
 	border-radius:3px;
 }
 a.geStatus .geStatusAlertOrange {
@@ -337,8 +344,9 @@ button.geShareBtn {
 .geBtn:hover:not([disabled]) {
 	opacity: 1 !important;
 }
-.geItem:active:not([disabled]):not(.geStatus), .geStatus div:active:not([disabled]),
-html .geToolbarButton:active:not([disabled]), .geBtn:active:not([disabled]) {
+.geItem:active:not([disabled]):not(.geStatus), .geBtn:active:not([disabled]),
+.geStatus div[data-action]:active:not([disabled]),
+html .geToolbarButton:active:not([disabled]) {
 	opacity: 0.7 !important;
 }
 .geBtn:disabled {
@@ -933,7 +941,7 @@ td.mxPopupMenuIcon .geIcon:hover {
 	opacity:1;
 }
 html tr.mxPopupMenuItemHover {
-	background-color: #eeeeee;
+	background-color: #e0e0e0;
 	color: black;
 }
 table.mxPopupMenu hr {
@@ -1731,13 +1739,11 @@ table.geProperties tr td {
 }
 
 .geNotification-box {
-  width: 50px;
-  height: 30px;
-  text-align: center;
-  float: left;
-  position: relative;
-  top: -2px;
-  cursor: pointer;
+	display:flex;
+	text-align: center;
+	position: relative;
+	cursor: pointer;
+	width: 20px;
 }
 .geNotification-bell {
   animation: geBellAnim 1s 1s both;
@@ -1746,11 +1752,6 @@ table.geProperties tr td {
   display: block;
   margin: 0 auto;
   background-color: #656565;
-  box-shadow: 0px 0px 10px #656565;
-}
-
-.geNotification-bellOff * {
-  box-shadow: none !important;
 }
 
 .geBell-top {
@@ -1799,11 +1800,11 @@ table.geProperties tr td {
   position: absolute;
   z-index: 1;
   top: -5px;
-  right: 7px;
-  width: 15px;
-  height: 15px;
-  line-height: 15px;
-  font-size: 10px;
+  right: -4px;
+  width: 13px;
+  height: 13px;
+  line-height: 13px;
+  font-size: 8px;
   border-radius: 50%;
   background-color: #ff4927;
   color: #FFF;
@@ -1847,8 +1848,6 @@ table.geProperties tr td {
   z-index: 150;
 }
 .geNotifPanel .header {
-  height: 30px;
-  width: 100%;
   background: #cecece;
   color: #707070;
   font-size: 15px;