Added sponsor button.

Author: MrCoder

src/components/MainHeader.jsx

@@ -20,13 +20,11 @@ export function MainHeader(props) {
 			<div className="main-header__btn-wrap  flex  flex-v-center">
 				<button
 					id="runBtn"
-					className="hide btn--dark flex flex-v-center hint--rounded hint--bottom-left"
-					aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
+					className="btn--dark flex flex-v-center hint--rounded hint--bottom-left"
+					aria-label="Support ZenUML as an Open source project on Github"
 					onClick={props.runBtnClickHandler}
 				>
-					<svg style="width: 14px; height: 14px;">
-						<use xlinkHref="#play-icon" />
-					</svg>Run
+					<iframe src="https://github.com/sponsors/ZenUml/button" title="Sponsor ZenUml" height="35" width="107" style="border: 0;" />
 				</button>
 
 				<Button
@@ -120,7 +118,7 @@ export function MainHeader(props) {
 					/>
 				</Button>
 				{ featureToggle.isPaymentEnabled ? (
-					<ProductVersionLabel user={props.user} clickHandler={props.proBtnHandler}/>
+					<ProductVersionLabel user={props.user} clickHandler={props.proBtnHandler} />
 					) : null }
 			</div>
 		</div>

src/components/app.jsx

@@ -859,8 +859,6 @@ BookService BookRepository Receipt Notification
 		}
 
 		const prefs = this.state.prefs;
-		// Show/hide RUN button based on autoPreview setting.
-		runBtn.classList[prefs.autoPreview ? 'add' : 'remove']('hide');
 
 		this.contentWrap.applyCodemirrorSettings(this.state.prefs);
 
@@ -893,6 +891,7 @@ BookService BookRepository Receipt Notification
 	}
 
 	proBtnClickHandler() {
+		trackEvent('ui', 'proBtnClick');
 		this.setState({ isProFeatureListModalOpen: true });
 	}
 	profileBtnClickHandler() {
@@ -1007,8 +1006,7 @@ BookService BookRepository Receipt Notification
 		e.preventDefault();
 	}
 	runBtnClickHandler() {
-		this.contentWrap.setPreviewContent(true, true);
-		trackEvent('ui', 'runBtnClick');
+		trackEvent('ui', 'sponsorBtnClick');
 	}
 	exportItems() {
 		handleDownloadsPermission().then(() => {

src/components/subscription/ProFeatureListModal.jsx

@@ -6,7 +6,7 @@ export function ProFeatureListModal(props) {
 	return (
 		<Modal show={props.show} closeHandler={props.closeHandler} extraClasses={'feature-list'}>
 			<section className={'header'}>
-				<h1 className={'price'}>$9.99<sup>[1]</sup>/month</h1>
+				<h1 className={'price'}>$4.99<sup>[1]</sup>/month</h1>
 				<h2>Pro</h2>
 			</section>
 			<section className={'content'}>