Add upgrade banner text to locale strings file. Remove SVG upgarde te…

…xt. Replace it with a text span.

_locales/en/messages.json

@@ -2130,6 +2130,9 @@
 	"subscription_submit_issue": {
 		"message": "Submit Issue"
 	},
+	"subscription_upgrade_to": {
+		"message": "Upgrade to"
+	},
 	"panel_stats_menu_cumulative": {
 		"message": "Cumulative"
 	},

app/images/panel/green-upgrade-banner-no-text.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="128" height="23" viewBox="0 0 128 23" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="a" x1="0.9088099670410156" x2="0" y1="0" y2="1">
+      <stop offset="0" stop-color="#9ECC42"/>
+      <stop offset="1" stop-color="#429321"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <path fill="url(#a)" d="M132 0l-7.8 10.2 9.635 12.6H0V0h132z" transform="translate(-6)"/>
+    <path fill="#FFF" d="M 88.66 8.249 C 88.09 8.182 87.77 7.896 87.602 7.543 C 87.518 7.358 87.552 7.258 87.77 7.241 C 89.165 7.09 90.425 6.384 91.567 6.334 C 92.424 6.3 93.163 6.569 93.567 7.728 C 93.919 8.736 93.634 9.71 93.062 10.601 C 92.222 11.911 90.408 13.171 88.207 13.591 C 87.821 13.658 87.451 13.591 87.166 13.423 C 86.696 14.347 86.191 15.456 85.603 16.85 C 85.536 17.018 85.452 17.018 85.334 16.9 C 85.099 16.649 84.931 16.145 85.184 15.238 C 85.62 13.708 87.199 10.55 88.661 8.248 L 88.66 8.249 Z M 102.688 15.895 C 102.14 16.575 101.332 17.102 100.555 17.102 C 99.463 17.102 99.026 16.414 99.161 15.439 C 98.573 16.229 97.682 17.086 96.741 17.019 C 96.185 16.979 95.881 16.688 95.752 16.276 C 95.246 16.688 94.598 17.036 93.919 17.018 C 92.76 16.985 92.139 16.178 92.525 14.364 C 93.146 11.441 95.062 8.4 96.775 6.619 C 97.027 6.35 97.262 6.317 97.498 6.535 C 97.985 6.972 98.086 7.594 97.884 8.383 C 97.364 10.45 95.482 12.466 93.986 13.44 C 93.314 15.086 93.13 16.48 93.886 16.548 C 94.416 16.592 95.105 16.085 95.701 15.365 C 95.734 15.108 95.798 14.841 95.885 14.582 C 96.255 13.474 97.111 11.827 98.203 10.298 C 98.338 10.114 98.506 10.13 98.64 10.282 C 99.01 10.836 98.926 11.592 98.32 12.55 C 97.817 13.336 97.379 14.162 97.01 15.02 C 96.658 15.842 96.708 16.447 97.094 16.48 C 97.75 16.531 98.674 15.355 99.581 13.894 C 100.639 12.18 101.126 11.021 101.664 10.298 C 101.832 10.063 101.95 10.03 102.084 10.198 C 102.336 10.5 102.47 11.239 102.067 12.079 C 101.697 12.835 100.857 14.095 100.471 14.952 C 100.034 15.91 100.101 16.615 100.706 16.582 C 101.238 16.556 101.855 15.922 102.407 15.107 C 102.305 14.478 102.447 13.811 102.857 13.474 C 103.058 13.306 103.193 13.373 103.21 13.642 C 103.226 13.776 103.226 13.91 103.243 14.045 C 103.932 13.104 104.688 12.012 105.175 11.155 C 105.259 10.5 105.427 10.181 105.78 9.862 C 106.15 9.526 106.536 9.458 106.687 9.61 C 106.855 9.778 106.771 9.962 106.553 10.349 C 106.486 10.449 106.435 10.55 106.368 10.668 C 106.25 12.214 106.57 13.524 106.519 14.683 C 106.486 15.338 106.368 16.044 105.763 16.447 C 106.889 16.027 107.594 15.019 108.014 14.112 C 108.098 13.927 108.266 13.978 108.334 14.112 C 108.401 14.263 108.384 14.7 108.098 15.221 C 107.502 16.318 106.373 17.02 105.125 17.069 C 104.178 17.101 103.263 16.864 102.688 15.895 L 102.688 15.895 Z M 87.653 12.482 C 88.157 11.542 88.627 10.769 89.064 9.996 C 89.534 9.19 89.702 8.602 89.702 8.148 C 90.812 7.828 92.492 6.955 92.844 7.879 C 93.298 9.055 91.416 11.777 87.653 12.482 L 87.653 12.482 Z M 94.289 12.718 C 96.59 10.853 97.531 8.165 97.313 8.03 C 97.094 7.896 95.851 9.76 94.692 11.911 C 94.544 12.173 94.41 12.442 94.289 12.718 L 94.289 12.718 Z M 105.125 11.842 C 104.548 12.896 103.813 13.989 103.058 15.062 C 103.356 16.214 103.932 17.029 104.588 16.831 C 105.502 16.552 105.204 13.432 105.125 11.842 L 105.125 11.842 Z"/>
+  </g>
+</svg>

app/panel/components/Summary.jsx

@@ -463,9 +463,12 @@ class Summary extends React.Component {
 					(plusSubscriber && <ReactSVG path="/app/images/panel/gold-plus-icon.svg" className="gold-plus-icon" />) ||
 					(
 						(is_expert && <ReactSVG path="/app/images/panel/green-upgrade-banner-small.svg" className="green-upgrade-banner" />) ||
-						<ReactSVG path="/app/images/panel/green-upgrade-banner.svg" className="green-upgrade-banner" />
+						<ReactSVG path="/app/images/panel/green-upgrade-banner-no-text.svg" className="green-upgrade-banner" />
 					)
 				}
+				{!plusSubscriber && !is_expert &&
+					<span className="text">{t('subscription_upgrade_to')}</span>
+				}
 			</div>
 		);
 

app/scss/partials/_summary.scss

@@ -207,15 +207,21 @@
 		border: 1px lightgray solid;
 		border-radius: 5px 0 0 5px;
 	}
-	.green-upgrade-banner {
+	.base-badge {
 		@extend %pointer;
 		position: absolute;
+	}
+	.green-upgrade-banner {
+		@extend .base-badge;
 		left: 0;
 		top: 10px;
 	}
+	.green-upgrade-banner text {
+		font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+		font-size: 13px;
+	}
 	.gold-plus-icon {
-		@extend %pointer;
-		position: absolute;
+		@extend .base-badge;
 		left: 10px;
 		top: 11px;
 	}