Finalize CSS for upgrade banner text. Delete duplicate upgrade banner…

… SVG
ghostery · IAmThePan · Apr 26, 2019 · Mar 20, 2019 · Apr 8, 2019 · Apr 8, 2019
commit 26c6ab030e7afb096de7bc3c975ac9c4e33a098f
diff --git a/app/images/panel/green-upgrade-banner-no-text.svg b/app/images/panel/green-upgrade-banner-no-text.svg
@@ -1,12 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="23" viewBox="0 0 128 23">
-    <defs>
-        <linearGradient id="a" x1="90.881%" x2="0%" y1="0%" y2="100%">
-            <stop offset="0%" stop-color="#9ECC42"/>
-            <stop offset="100%" 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="M18.23 5.777v6.097c0 .696-.149 1.305-.448 1.827-.298.523-.73.924-1.295 1.206-.565.281-1.24.422-2.027.422-1.169 0-2.078-.31-2.727-.928-.648-.619-.973-1.47-.973-2.553V5.777h1.547v5.962c0 .778.18 1.351.541 1.72.361.37.916.555 1.663.555 1.453 0 2.179-.763 2.179-2.288V5.777h1.54zm5.866 9.552c-.903 0-1.603-.325-2.102-.973h-.09c.06.601.09.966.09 1.095v2.92H20.48v-10.3h1.224c.035.134.106.452.213.954h.077c.473-.721 1.182-1.082 2.127-1.082.89 0 1.583.322 2.079.966.496.645.744 1.55.744 2.714s-.252 2.073-.757 2.726-1.202.98-2.091.98zm-.368-6.149c-.601 0-1.04.176-1.318.529-.277.352-.416.915-.416 1.688v.226c0 .868.138 1.496.413 1.885.275.389.724.583 1.347.583.524 0 .928-.214 1.212-.644.283-.43.425-1.042.425-1.837 0-.8-.14-1.404-.422-1.814-.282-.41-.695-.616-1.24-.616zm10.996-1.109v.832l-1.218.226a2.187 2.187 0 0 1 .387 1.25c0 .735-.254 1.313-.761 1.734-.507.42-1.205.631-2.095.631-.228 0-.434-.017-.619-.051-.326.202-.49.438-.49.709 0 .163.077.285.23.367.152.082.432.123.84.123h1.244c.787 0 1.384.167 1.792.502.408.335.612.819.612 1.45 0 .808-.333 1.431-.999 1.87-.666.438-1.628.657-2.887.657-.971 0-1.712-.172-2.224-.516-.511-.343-.767-.833-.767-1.47 0-.437.139-.806.416-1.104.277-.3.665-.506 1.163-.622a1.138 1.138 0 0 1-.5-.416 1.05 1.05 0 0 1-.196-.603c0-.266.076-.492.226-.677.15-.184.374-.367.67-.547a1.985 1.985 0 0 1-.899-.777c-.23-.359-.345-.779-.345-1.26 0-.774.244-1.373.732-1.798.488-.426 1.183-.638 2.085-.638.202 0 .413.014.635.041.221.028.388.057.5.087h2.468zm-5.601 8.238c0 .326.147.578.441.754.295.176.708.264 1.241.264.825 0 1.44-.118 1.843-.355.404-.236.606-.55.606-.94 0-.31-.11-.53-.332-.661-.22-.131-.632-.197-1.234-.197h-1.147c-.434 0-.779.102-1.035.306-.255.204-.383.48-.383.829zm.65-5.93c0 .447.116.79.346 1.031.23.24.56.361.989.361.877 0 1.315-.468 1.315-1.405 0-.464-.109-.822-.326-1.073-.217-.251-.546-.377-.989-.377-.438 0-.77.124-.996.374-.225.249-.338.612-.338 1.089zm9.888-2.436c.305 0 .556.021.754.064l-.148 1.412a2.863 2.863 0 0 0-.67-.078c-.606 0-1.097.198-1.473.593-.376.395-.564.909-.564 1.54V15.2h-1.515V8.071h1.186l.2 1.257h.077c.237-.425.545-.762.925-1.012.38-.249.79-.373 1.228-.373zm6.271 7.257l-.303-.993h-.051c-.344.434-.69.73-1.038.887-.348.156-.795.235-1.34.235-.701 0-1.248-.19-1.64-.567-.394-.378-.59-.913-.59-1.605 0-.735.272-1.29.818-1.663.546-.374 1.377-.578 2.494-.612l1.231-.039v-.38c0-.456-.106-.796-.319-1.022-.212-.225-.542-.338-.99-.338a3.42 3.42 0 0 0-1.05.16 7.928 7.928 0 0 0-.967.381l-.49-1.083c.387-.202.81-.355 1.27-.46.46-.106.894-.158 1.302-.158.907 0 1.591.197 2.053.593.462.395.693 1.016.693 1.862V15.2h-1.083zm-2.256-1.031c.55 0 .992-.154 1.325-.461.333-.307.5-.738.5-1.292v-.62l-.916.04c-.713.025-1.232.145-1.556.357-.325.213-.487.538-.487.977 0 .318.095.564.284.738.189.174.472.26.85.26zm7.857 1.16c-.89 0-1.583-.322-2.082-.967-.498-.644-.747-1.549-.747-2.713 0-1.17.252-2.079.757-2.73.505-.65 1.204-.976 2.098-.976.937 0 1.65.345 2.14 1.037h.077a9.08 9.08 0 0 1-.11-1.211V5.17h1.522V15.2h-1.186l-.265-.935h-.07c-.486.71-1.197 1.064-2.134 1.064zm.406-1.225c.623 0 1.077-.175 1.36-.525.284-.35.43-.918.438-1.705v-.212c0-.899-.146-1.537-.438-1.915-.292-.378-.75-.567-1.373-.567-.532 0-.943.216-1.23.648-.289.432-.433 1.047-.433 1.846 0 .791.14 1.394.42 1.808.279.415.698.622 1.256.622zm8.527 1.225c-1.108 0-1.975-.323-2.6-.97s-.938-1.537-.938-2.672c0-1.164.29-2.08.87-2.745.58-.666 1.377-1 2.391-1 .941 0 1.685.286 2.23.858.546.571.819 1.358.819 2.359v.818h-4.75c.021.692.208 1.224.56 1.596.353.371.85.557 1.49.557.42 0 .812-.04 1.176-.12.363-.079.753-.21 1.17-.396v1.232c-.37.176-.744.3-1.122.373-.378.073-.81.11-1.296.11zm-.277-6.24c-.481 0-.867.153-1.157.458-.29.306-.463.75-.519 1.335h3.236c-.009-.589-.15-1.035-.425-1.338-.275-.303-.653-.454-1.135-.454zm10.854 5.015c.37 0 .74-.058 1.109-.174v1.141a3.058 3.058 0 0 1-.648.184c-.264.05-.538.074-.822.074-1.435 0-2.153-.756-2.153-2.269V9.22h-.973v-.67l1.044-.555.516-1.508h.935V8.07h2.03V9.22h-2.03v3.815c0 .366.09.635.274.81.182.173.422.26.718.26zm8.856-2.481c0 1.164-.299 2.073-.896 2.726s-1.429.98-2.494.98c-.666 0-1.255-.15-1.766-.451a2.979 2.979 0 0 1-1.18-1.296c-.275-.563-.412-1.216-.412-1.96 0-1.155.296-2.057.89-2.706.592-.649 1.428-.973 2.506-.973 1.032 0 1.848.332 2.45.995.601.664.902 1.56.902 2.685zm-5.188 0c0 1.646.608 2.468 1.824 2.468 1.203 0 1.804-.822 1.804-2.468 0-1.629-.606-2.443-1.817-2.443-.636 0-1.097.21-1.383.632-.286.42-.428 1.025-.428 1.81zM88.66 8.249c-.57-.067-.89-.353-1.058-.706-.084-.185-.05-.285.168-.302 1.395-.151 2.655-.857 3.797-.907.857-.034 1.596.235 2 1.394.352 1.008.067 1.982-.505 2.873-.84 1.31-2.654 2.57-4.855 2.99-.386.067-.756 0-1.041-.168-.47.924-.975 2.033-1.563 3.427-.067.168-.151.168-.269.05-.235-.251-.403-.755-.15-1.662.436-1.53 2.015-4.688 3.477-6.99zm14.028 7.646c-.548.68-1.356 1.207-2.133 1.207-1.092 0-1.529-.688-1.394-1.663-.588.79-1.479 1.647-2.42 1.58-.556-.04-.86-.331-.989-.743-.506.412-1.154.76-1.833.742-1.159-.033-1.78-.84-1.394-2.654.621-2.923 2.537-5.964 4.25-7.745.252-.269.487-.302.723-.084.487.437.588 1.059.386 1.848-.52 2.067-2.402 4.083-3.898 5.057-.672 1.646-.856 3.04-.1 3.108.53.044 1.219-.463 1.815-1.183.033-.257.097-.524.184-.783.37-1.108 1.226-2.755 2.318-4.284.135-.184.303-.168.437-.016.37.554.286 1.31-.32 2.268a17.199 17.199 0 0 0-1.31 2.47c-.352.822-.302 1.427.084 1.46.656.051 1.58-1.125 2.487-2.586 1.058-1.714 1.545-2.873 2.083-3.596.168-.235.286-.268.42-.1.252.302.386 1.041-.017 1.881-.37.756-1.21 2.016-1.596 2.873-.437.958-.37 1.663.235 1.63.532-.026 1.149-.66 1.701-1.475-.102-.629.04-1.296.45-1.633.201-.168.336-.101.353.168.016.134.016.268.033.403.689-.941 1.445-2.033 1.932-2.89.084-.655.252-.974.605-1.293.37-.336.756-.404.907-.252.168.168.084.352-.134.739-.067.1-.118.201-.185.319-.118 1.546.202 2.856.151 4.015-.033.655-.151 1.361-.756 1.764 1.126-.42 1.831-1.428 2.251-2.335.084-.185.252-.134.32 0 .067.151.05.588-.236 1.109a3.54 3.54 0 0 1-2.973 1.848c-.947.032-1.862-.205-2.437-1.174zm-15.035-3.413c.504-.94.974-1.713 1.411-2.486.47-.806.638-1.394.638-1.848 1.11-.32 2.79-1.193 3.142-.269.454 1.176-1.428 3.898-5.191 4.603zm6.636.236c2.301-1.865 3.242-4.553 3.024-4.688-.219-.134-1.462 1.73-2.621 3.881a9.02 9.02 0 0 0-.403.807zm10.836-.876c-.577 1.054-1.312 2.147-2.067 3.22.298 1.152.874 1.967 1.53 1.769.914-.279.616-3.399.537-4.989z"/>
-    </g>
+<?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>
@@ -459,15 +459,19 @@ class Summary extends React.Component {
 
 		const plusUpgradeBannerOrSubscriberIcon = (
 			<div onClick={this.clickUpgradeBannerOrGoldPlusIcon}>
-				{
-					(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-no-text.svg" className="green-upgrade-banner" />
-					)
+				{plusSubscriber &&
+					<ReactSVG path="/app/images/panel/gold-plus-icon.svg" className="gold-plus-icon" />
+				}
+
+				{!plusSubscriber && is_expert &&
+					<ReactSVG path="/app/images/panel/green-upgrade-banner-small.svg" className="green-upgrade-banner" />
+				}
+
+				{!plusSubscriber && !is_expert &&
+					<ReactSVG path="/app/images/panel/green-upgrade-banner.svg" className="green-upgrade-banner" />
 				}
 				{!plusSubscriber && !is_expert &&
-					<span className="text">{t('subscription_upgrade_to')}</span>
+					<span className="green-upgrade-banner-text">{t('subscription_upgrade_to')}</span>
 				}
 			</div>
 		);

@@ -213,12 +213,16 @@
 	}
 	.green-upgrade-banner {
 		@extend .base-badge;
-		left: 0;
 		top: 10px;
 	}
-	.green-upgrade-banner text {
+	.green-upgrade-banner-text {
+		@extend .base-badge;
 		font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-		font-size: 13px;
+		font-size: 12px;
+		font-weight: bold;
+		top: 13px;
+		left: 14px;
+		color: white;
 	}
 	.gold-plus-icon {
 		@extend .base-badge;