PD-242 Minor changes to upgrade dialog and buttons.

Author: sheabunge

assets/icon.svg

@@ -56,3 +56,16 @@ $badges: (php: $php-active, css: $css-highlight, js: $js-highlight, html: $html-
 	border-color: #ce0000;
 	margin-left: 1px;
 }
+
+.wp-core-ui .button.nav-tab-button {
+	margin-left: 0.5em;
+	float: right;
+	color: #a7aaad;
+	background: #f6f7f7;
+	border-color: #f6f7f7;
+
+	&:hover {
+		background-color: #fff;
+		color: #3c434a;
+	}
+}

css/_type-badges.scss

@@ -7,6 +7,7 @@
 		grid-template-columns: auto auto;
 		justify-content: center;
 		align-items: center;
+		color: #3f444b;
 
 		img {
 			height: 50px;
@@ -48,7 +49,7 @@
 	}
 
 	.current-plan-cost {
-		font-size: 13px;
+		font-size: 1rem;
 	}
 
 	.button .dashicons,

css/edit/_upgrade-dialog.scss

@@ -7,19 +7,6 @@ $inactive-color: #ccc;
 
 @import 'type-badges';
 
-.wp-core-ui .button.nav-tab-button {
-	margin-left: 0.5em;
-	float: right;
-	color: #a7aaad;
-	background: #f6f7f7;
-	border-color: #f6f7f7;
-
-	&:hover {
-		background-color: #fff;
-		color: #3c434a;
-	}
-}
-
 .column-name,
 .column-type {
 	.dashicons {

css/manage.scss

@@ -1,4 +1,4 @@
-import { __ } from '@wordpress/i18n'
+import { __, _x } from '@wordpress/i18n'
 import { addQueryArgs } from '@wordpress/url'
 import { Editor, EditorConfiguration } from 'codemirror'
 import React, { Dispatch, SetStateAction, useEffect } from 'react'
@@ -53,10 +53,6 @@ const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({
 		{`${label} `}
 
 		<span className="badge">{tabType}</span>
-
-		{isProType(tabType) && !isLicensed() ?
-			<span className="badge go-pro-badge">{__('Pro', 'code-snippets')}</span> :
-			null}
 	</a>
 
 export const TYPE_LABELS: Record<SnippetType, string> = {
@@ -107,6 +103,21 @@ const SnippetTypeTabs: React.FC<SnippetTypeTabsProps> = ({
 					setSnippet={setSnippet}
 					openUpgradeDialog={openUpgradeDialog}
 				/>)}
+
+			{!isLicensed() ?
+				<a
+					className="button button-large nav-tab-button nav-tab-inactive go-pro-button"
+					href="https://codesnippets.pro/pricing/"
+					title="Find more about Pro"
+					onClick={event => {
+						event.preventDefault()
+						openUpgradeDialog()
+					}}
+				>
+					{_x('Upgrade to ', 'Upgrade to Pro', 'code-snippets')}
+					<span className="badge">{_x('Pro', 'Upgrade to Pro', 'code-snippets')}</span>
+				</a> :
+				null}
 		</h2>
 	)
 }

js/Edit/SnippetEditor/SnippetEditor.tsx

@@ -61,8 +61,9 @@ interface UpgradeInfoProps {
 
 const UpgradeInfo: React.FC<UpgradeInfoProps> = ({ nextTab }) =>
 	<>
-		<p>{__('You are using the free version of Code Snippets.', 'code-snippets')}</p>
-		<p>{__('Upgrade to Code Snippets Pro to unleash its full potential:', 'code-snippets')}
+		<p>
+			{__('You are using the free version of Code Snippets.', 'code-snippets')}{' '}
+			{__('Upgrade to Code Snippets Pro to unleash its full potential:', 'code-snippets')}
 			<ul>
 				<li>
 					<strong>{__('CSS stylesheet snippets: ', 'code-snippets')}</strong>
@@ -90,7 +91,7 @@ const UpgradeInfo: React.FC<UpgradeInfoProps> = ({ nextTab }) =>
 				</li>
 			</ul>
 
-			{__('… and more!', 'code-snippets')}
+			{__('…and so much more!', 'code-snippets')}
 		</p>
 
 		<p className="action-buttons">