Convert 'upgrade to' text in the green banner from SVG to text for sm…

…aller detail view banner
ghostery · IAmThePan · Apr 26, 2019 · Mar 20, 2019 · Apr 8, 2019 · Apr 8, 2019
commit de6aa6b5d3508bde51c63b700cd89145ae5a3d77
diff --git a/app/images/panel/green-upgrade-banner-small.svg b/app/images/panel/green-upgrade-banner-small.svg
@@ -1,12 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="103" height="20" viewBox="0 0 103 20">
-    <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="M101.815 0L94.2 9l8.63 10.2H0V0h101.815z"/>
-        <path fill="#FFF" d="M11.861 5.49v4.989c0 .57-.122 1.068-.366 1.495a2.442 2.442 0 0 1-1.06.986c-.463.23-1.015.345-1.659.345-.956 0-1.7-.253-2.23-.759-.531-.506-.797-1.202-.797-2.088V5.49h1.266v4.878c0 .636.147 1.106.443 1.408.295.303.749.454 1.36.454 1.189 0 1.783-.624 1.783-1.872V5.49h1.26zm4.799 7.815c-.738 0-1.311-.265-1.72-.796h-.073c.05.492.074.791.074.897v2.389H13.7V7.368h1.003c.028.109.086.369.174.78h.063c.387-.59.967-.886 1.74-.886.728 0 1.295.264 1.7.791.407.527.61 1.268.61 2.22 0 .953-.207 1.697-.62 2.23-.413.535-.983.802-1.711.802zm-.3-5.03c-.493 0-.852.144-1.079.432-.227.288-.34.749-.34 1.382v.184c0 .71.112 1.225.337 1.543.225.318.593.477 1.102.477.43 0 .76-.176.992-.527.232-.352.348-.853.348-1.503 0-.654-.115-1.149-.345-1.485-.23-.336-.57-.503-1.016-.503zm8.996-.907v.68l-.997.184a1.79 1.79 0 0 1 .316 1.023c0 .602-.207 1.074-.622 1.419-.415.345-.986.517-1.714.517-.186 0-.355-.014-.506-.042-.267.165-.4.358-.4.58 0 .133.062.233.187.3.124.067.354.1.688.1h1.018c.643 0 1.132.138 1.466.412.334.274.5.67.5 1.186 0 .661-.272 1.171-.817 1.53-.545.358-1.332.538-2.362.538-.795 0-1.401-.141-1.82-.422-.418-.282-.627-.682-.627-1.203 0-.358.113-.66.34-.904.227-.244.544-.414.952-.509a.931.931 0 0 1-.409-.34.859.859 0 0 1-.16-.493c0-.218.06-.403.184-.554.123-.151.306-.3.548-.448a1.624 1.624 0 0 1-.735-.636 1.87 1.87 0 0 1-.282-1.03c0-.633.199-1.124.598-1.472.4-.348.968-.522 1.706-.522.165 0 .338.012.52.034.18.023.317.047.408.072h2.02zm-4.583 6.739c0 .267.12.473.361.617.241.144.58.216 1.016.216.675 0 1.177-.096 1.508-.29.33-.193.496-.45.496-.77 0-.253-.091-.433-.272-.54-.181-.107-.518-.161-1.01-.161h-.939c-.355 0-.637.083-.846.25a.821.821 0 0 0-.314.678zm.533-4.852c0 .366.094.647.282.844.188.197.458.296.81.296.717 0 1.075-.384 1.075-1.15 0-.38-.089-.672-.266-.878-.178-.206-.447-.309-.81-.309-.358 0-.63.102-.814.306-.185.204-.277.501-.277.891zm8.09-1.993c.249 0 .455.018.616.053l-.121 1.155a2.342 2.342 0 0 0-.548-.064c-.496 0-.898.162-1.205.486-.308.323-.462.743-.462 1.26V13.2h-1.24V7.368h.971l.164 1.028h.063a2.31 2.31 0 0 1 .757-.828 1.799 1.799 0 0 1 1.004-.306zm5.13 5.938l-.247-.812h-.043c-.28.355-.564.597-.849.725-.284.128-.65.192-1.097.192-.573 0-1.02-.154-1.342-.464-.321-.309-.482-.747-.482-1.313 0-.6.223-1.054.67-1.36.446-.306 1.126-.473 2.04-.501l1.008-.032v-.311c0-.373-.087-.651-.261-.836-.174-.184-.444-.277-.81-.277-.299 0-.585.044-.86.132a6.487 6.487 0 0 0-.79.311l-.401-.886c.316-.165.662-.29 1.039-.377a4.78 4.78 0 0 1 1.065-.129c.742 0 1.301.162 1.68.485.377.324.566.832.566 1.524V13.2h-.886zm-1.845-.844c.45 0 .81-.125 1.083-.377.273-.251.409-.604.409-1.057v-.506l-.749.031c-.583.021-1.008.119-1.273.293-.266.174-.398.44-.398.799 0 .26.077.461.232.604.154.142.386.213.696.213zm6.428.95c-.728 0-1.296-.264-1.703-.792-.408-.527-.612-1.267-.612-2.22 0-.956.206-1.7.62-2.233.413-.533.985-.799 1.716-.799.766 0 1.35.283 1.75.85h.064a7.429 7.429 0 0 1-.09-.992V4.995H42.1V13.2h-.97l-.216-.765h-.059c-.397.58-.979.87-1.745.87zm.332-1.002c.51 0 .88-.144 1.113-.43.232-.287.351-.752.358-1.395v-.174c0-.735-.119-1.257-.358-1.566-.24-.31-.614-.464-1.123-.464-.436 0-.772.176-1.008.53-.235.353-.353.857-.353 1.51 0 .647.114 1.14.343 1.48.228.339.571.509 1.028.509zm6.977 1.001c-.907 0-1.616-.264-2.128-.793-.511-.53-.767-1.258-.767-2.186 0-.953.237-1.702.712-2.247.474-.544 1.127-.817 1.956-.817.77 0 1.378.234 1.825.701.446.468.67 1.111.67 1.93v.67h-3.887c.018.566.17 1.001.459 1.305.288.305.694.457 1.218.457.345 0 .665-.033.962-.098.297-.065.616-.173.958-.324v1.007a3.805 3.805 0 0 1-.918.306c-.31.06-.663.09-1.06.09zm-.227-5.104c-.394 0-.71.125-.946.374-.238.25-.38.614-.425 1.092h2.647c-.007-.482-.123-.847-.348-1.094-.225-.248-.534-.372-.928-.372zm8.88 4.103c.303 0 .605-.048.908-.143v.934c-.137.06-.314.11-.53.15-.216.04-.44.06-.673.06-1.174 0-1.761-.618-1.761-1.856V8.306h-.796v-.548l.854-.454.422-1.234h.765v1.298h1.66v.938h-1.66v3.122c0 .299.074.52.224.662.15.142.345.214.588.214zm7.246-2.03c0 .952-.244 1.696-.733 2.23-.488.534-1.169.801-2.04.801-.545 0-1.027-.123-1.445-.369-.419-.246-.74-.6-.965-1.06-.225-.46-.338-.995-.338-1.603 0-.945.243-1.684.728-2.215.485-.53 1.169-.796 2.051-.796.844 0 1.512.272 2.004.815.492.543.738 1.275.738 2.196zm-4.245 0c0 1.346.498 2.019 1.493 2.019.984 0 1.476-.673 1.476-2.02 0-1.332-.495-1.998-1.487-1.998-.52 0-.897.172-1.131.516-.234.345-.35.839-.35 1.482zM68.014 6.66c-.53-.063-.827-.328-.983-.656-.078-.171-.047-.265.156-.28 1.295-.14 2.465-.796 3.525-.843.796-.031 1.482.219 1.857 1.295.327.936.062 1.84-.468 2.668-.78 1.216-2.465 2.386-4.509 2.776-.358.063-.702 0-.967-.156-.437.858-.905 1.888-1.45 3.183-.063.156-.141.156-.25.047-.219-.234-.375-.702-.14-1.545.405-1.42 1.871-4.352 3.229-6.49zm6.537 6.607c.03-.238.09-.486.17-.726.344-1.03 1.14-2.559 2.153-3.978.125-.172.281-.156.406-.016.343.515.265 1.217-.296 2.106a15.97 15.97 0 0 0-1.217 2.293c-.328.765-.281 1.326.078 1.358.608.046 1.466-1.046 2.309-2.403.982-1.591 1.435-2.667 1.934-3.338.156-.219.265-.25.39-.094.234.281.359.967-.016 1.747-.343.702-1.123 1.872-1.482 2.668-.405.89-.343 1.544.219 1.513.493-.023 1.066-.613 1.579-1.369-.095-.584.037-1.203.418-1.517.187-.156.312-.093.327.156.016.125.016.25.031.375.64-.874 1.342-1.888 1.794-2.684.078-.608.234-.904.562-1.2.343-.313.702-.375.842-.235.156.156.078.328-.124.687-.063.093-.11.187-.172.296-.11 1.435.187 2.652.14 3.728-.03.609-.14 1.264-.702 1.638 1.046-.39 1.7-1.326 2.09-2.168.079-.172.235-.125.297 0 .063.14.047.546-.218 1.03a3.287 3.287 0 0 1-2.761 1.716c-.88.03-1.73-.19-2.263-1.09-.509.632-1.26 1.12-1.98 1.12-1.015 0-1.42-.639-1.295-1.544-.546.734-1.373 1.53-2.247 1.467-.516-.037-.799-.307-.918-.69-.47.383-1.073.706-1.703.69-1.076-.031-1.653-.78-1.294-2.465.577-2.714 2.355-5.538 3.946-7.192.234-.25.453-.28.671-.078.453.406.546.983.359 1.716-.484 1.92-2.23 3.791-3.62 4.696-.623 1.529-.795 2.824-.093 2.886.492.041 1.132-.43 1.686-1.099zm-7.473-2.676c.468-.874.904-1.591 1.31-2.309.437-.749.593-1.295.593-1.716 1.03-.296 2.59-1.108 2.917-.25.421 1.092-1.326 3.62-4.82 4.275zm6.162.218c2.137-1.731 3.01-4.227 2.808-4.352-.203-.125-1.358 1.607-2.434 3.603-.14.25-.265.5-.374.75zm10.077-.452c-.452.827-1.03 1.685-1.622 2.527.234.905.686 1.544 1.201 1.388.718-.218.484-2.667.421-3.915z"/>
-    </g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="103" height="20" viewBox="0 0 103 20" 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="M101.815 0L94.2 9l8.63 10.2H0V0h101.815z"/>
+    <path fill="#FFF" d="M 68.014 6.66 C 67.484 6.597 67.187 6.332 67.031 6.004 C 66.953 5.833 66.984 5.739 67.187 5.724 C 68.482 5.584 69.652 4.928 70.712 4.881 C 71.508 4.85 72.194 5.1 72.569 6.176 C 72.896 7.112 72.631 8.016 72.101 8.844 C 71.321 10.06 69.636 11.23 67.592 11.62 C 67.234 11.683 66.89 11.62 66.625 11.464 C 66.188 12.322 65.72 13.352 65.175 14.647 C 65.112 14.803 65.034 14.803 64.925 14.694 C 64.706 14.46 64.55 13.992 64.785 13.149 C 65.19 11.729 66.656 8.797 68.014 6.659 L 68.014 6.66 Z M 74.551 13.267 C 74.581 13.029 74.641 12.781 74.721 12.541 C 75.065 11.511 75.861 9.982 76.874 8.563 C 76.999 8.391 77.155 8.407 77.28 8.547 C 77.623 9.062 77.545 9.764 76.984 10.653 C 76.517 11.383 76.11 12.15 75.767 12.946 C 75.439 13.711 75.486 14.272 75.845 14.304 C 76.453 14.35 77.311 13.258 78.154 11.901 C 79.136 10.31 79.589 9.234 80.088 8.563 C 80.244 8.344 80.353 8.313 80.478 8.469 C 80.712 8.75 80.837 9.436 80.462 10.216 C 80.119 10.918 79.339 12.088 78.98 12.884 C 78.575 13.774 78.637 14.428 79.199 14.397 C 79.692 14.374 80.265 13.784 80.778 13.028 C 80.683 12.444 80.815 11.825 81.196 11.511 C 81.383 11.355 81.508 11.418 81.523 11.667 C 81.539 11.792 81.539 11.917 81.554 12.042 C 82.194 11.168 82.896 10.154 83.348 9.358 C 83.426 8.75 83.582 8.454 83.91 8.158 C 84.253 7.845 84.612 7.783 84.752 7.923 C 84.908 8.079 84.83 8.251 84.628 8.61 C 84.565 8.703 84.518 8.797 84.456 8.906 C 84.346 10.341 84.643 11.558 84.596 12.634 C 84.566 13.243 84.456 13.898 83.894 14.272 C 84.94 13.882 85.594 12.946 85.984 12.104 C 86.063 11.932 86.219 11.979 86.281 12.104 C 86.344 12.244 86.328 12.65 86.063 13.134 C 85.51 14.153 84.461 14.805 83.302 14.85 C 82.422 14.88 81.572 14.66 81.039 13.76 C 80.53 14.392 79.779 14.88 79.059 14.88 C 78.044 14.88 77.639 14.241 77.764 13.336 C 77.218 14.07 76.391 14.866 75.517 14.803 C 75.001 14.766 74.718 14.496 74.599 14.113 C 74.129 14.496 73.526 14.819 72.896 14.803 C 71.82 14.772 71.243 14.023 71.602 12.338 C 72.179 9.624 73.957 6.8 75.548 5.146 C 75.782 4.896 76.001 4.866 76.219 5.068 C 76.672 5.474 76.765 6.051 76.578 6.784 C 76.094 8.704 74.348 10.575 72.958 11.48 C 72.335 13.009 72.163 14.304 72.865 14.366 C 73.357 14.407 73.997 13.936 74.551 13.267 L 74.551 13.267 Z M 67.078 10.591 C 67.546 9.717 67.982 9 68.388 8.282 C 68.825 7.533 68.981 6.987 68.981 6.566 C 70.011 6.27 71.571 5.458 71.898 6.316 C 72.319 7.408 70.572 9.936 67.078 10.591 L 67.078 10.591 Z M 73.24 10.809 C 75.377 9.078 76.25 6.582 76.048 6.457 C 75.845 6.332 74.69 8.064 73.614 10.06 C 73.474 10.31 73.349 10.56 73.24 10.81 L 73.24 10.809 Z M 83.317 10.357 C 82.865 11.184 82.287 12.042 81.695 12.884 C 81.929 13.789 82.381 14.428 82.896 14.272 C 83.614 14.054 83.38 11.605 83.317 10.357 Z"/>
+  </g>
+</svg>
@@ -464,14 +464,17 @@ class Summary extends React.Component {
 				}
 
 				{!plusSubscriber && is_expert &&
-					<ReactSVG path="/app/images/panel/green-upgrade-banner-small.svg" className="green-upgrade-banner" />
+					<div>
+						<ReactSVG path="/app/images/panel/green-upgrade-banner-small.svg" className="green-upgrade-banner" />
+						<span className="green-upgrade-banner-text-small">{t('subscription_upgrade_to')}</span>
+					</div>
 				}
 
 				{!plusSubscriber && !is_expert &&
-					<ReactSVG path="/app/images/panel/green-upgrade-banner.svg" className="green-upgrade-banner" />
-				}
-				{!plusSubscriber && !is_expert &&
-					<span className="green-upgrade-banner-text">{t('subscription_upgrade_to')}</span>
+					<div>
+						<ReactSVG path="/app/images/panel/green-upgrade-banner.svg" className="green-upgrade-banner" />
+						<span className="green-upgrade-banner-text">{t('subscription_upgrade_to')}</span>
+					</div>
 				}
 			</div>
 		);

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