Blinking the Pro button for basic version.

Author: MrCoder

src/style.css

@@ -1887,3 +1887,13 @@ ol.editor-nav li {
 .cheat-sheet tr>td, .cheat-sheet tr>th {
 	padding: 10px 5px;
 }
+
+.prod-version.basic {
+	animation: blinker 1s linear infinite;
+}
+
+@keyframes blinker {
+	50% {
+		opacity: 0;
+	}
+}

src/zenuml/components/MainHeader/ProductVersionLabel/ProductVersionLabelAbstract.js

@@ -1,13 +1,14 @@
-const ProductVersionLabelAbstract = ({ tooltip, style, clickHandler }) => {
+const ProductVersionLabelAbstract = ({ className, tooltip, style, clickHandler }) => {
 	const styleTemplate = {
 		padding: '1px 15px 1px 15px'
 	};
 
 	const mergedStyle = {...styleTemplate, ...style};
 
+	const classNames = "prod-version btn flex  flex-v-center  hint--rounded  hint--bottom-left" + " " + className
 	return (
 		<i style={mergedStyle}
-			 className="btn flex  flex-v-center  hint--rounded  hint--bottom-left"
+			 className={classNames}
 			 aria-label={tooltip} onClick={clickHandler}
 		>Pro</i>
 	);

src/zenuml/components/MainHeader/ProductVersionLabel/ProductVersionLabelBasic.js

@@ -4,7 +4,7 @@ const ProductVersionLabelBasic = ({ tooltip, clickHandler }) => {
 	const style = {
 		'background-color': 'grey'
 	};
-	return <ProductVersionLabelAbstract tooltip={tooltip} clickHandler={clickHandler} style={style} />
+	return <ProductVersionLabelAbstract className="basic" tooltip={tooltip} clickHandler={clickHandler} style={style} />
 };
 
 export { ProductVersionLabelBasic };

src/zenuml/components/MainHeader/ProductVersionLabel/ProductVersionLabelProfessional.js

@@ -6,7 +6,7 @@ const ProductVersionLabelProfessional = ({ clickHandler }) => {
 		color: 'white'
 	};
 
-	return <ProductVersionLabelAbstract clickHandler={clickHandler} style={style} tooltip="Thanks for your support" />
+	return <ProductVersionLabelAbstract className="pro" clickHandler={clickHandler} style={style} tooltip="Thanks for your support" />
 };
 
 export { ProductVersionLabelProfessional };