Adding Supporter menu item (GH-1253)

_locales/en/messages.json

@@ -579,6 +579,9 @@
 	"panel_about_panel_header": {
 		"message": "About Ghostery Browser Extension"
 	},
+	"panel_supporter_panel_header": {
+		"message": "Ghostery Supporter"
+	},
 	"panel_about_version_header": {
 		"message": "Ghostery for $BROWSER$ version $VERSION$",
 		"placeholders": {
@@ -619,6 +622,9 @@
 	"panel_menu_about": {
 		"message": "About"
 	},
+	"panel_menu_ghostery_supporter": {
+		"message": "Ghostery Supporter"
+	},
 	"panel_menu_signin": {
 		"message": "Sign in"
 	},

app/panel/components/HeaderMenu.jsx

@@ -207,6 +207,26 @@ class HeaderMenu extends React.Component {
 								<span>{ t('panel_menu_about') }</span>
 							</Link>
 						</li>
+						<li className="menu-option menu-ghostery-supporter">
+							<Link to="/supporter" onClick={this.props.toggleDropdown}>
+								<div className="menu-icon-container">
+									<svg width="23px" height="16px" viewBox="0 0 23 16">
+									    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+									        <g transform="translate(-387.000000, -225.000000)" fill="#CCCCCC">
+									            <g className="supporter-icon" transform="translate(388.000000, 226.000000)">
+									                <g fill-rule="nonzero">
+									                    <path d="M21,3.5016876 L16.8632333,3.5016876 C16.8231,3.22609669 16.7416667,2.95481543 16.5634,2.71687728 C16.2358,2.27933418 15.7045,2.10309209 15.2355,1.9477178 C14.9531667,1.85426639 14.6867,1.76580511 14.5070333,1.63878379 C14.3313333,1.51448435 14.1649667,1.29741398 13.9885667,1.06764148 C13.6906,0.678865502 13.3529667,0.238373697 12.8165333,0.069163148 C12.3001667,-0.0936963349 11.7705,0.0643998483 11.3036,0.203896481 C11.0112333,0.291223641 10.7354333,0.373560677 10.5002333,0.373560677 C10.2652667,0.373560677 9.98923333,0.291223641 9.69686667,0.203896481 C9.22973333,0.0643998483 8.69983333,-0.0936963349 8.18393333,0.0689363242 C7.64726667,0.238373697 7.30916667,0.679092325 7.0112,1.06786831 C6.83526667,1.29741398 6.6689,1.51448435 6.49343333,1.63855697 C6.31376667,1.76557829 6.0473,1.85403957 5.76496667,1.94749097 C5.2962,2.10286527 4.76443333,2.27910736 4.43706667,2.71642363 C4.2588,2.95436179 4.17736667,3.22586987 4.13723333,3.50123395 L0,3.50123395 L1.35146667,6.99999095 L0,10.4980675 L4.137,10.4980675 C4.1769,10.7736584 4.25856667,11.0449396 4.4366,11.2831046 C4.7642,11.7204209 5.29573333,11.896663 5.7645,12.0520373 C6.04683333,12.1457155 6.31353333,12.23395 6.4932,12.3609713 C6.66843333,12.4852707 6.8348,12.7021143 7.01096667,12.9318868 C7.30893333,13.3206627 7.64703333,13.7613814 8.1837,13.9308187 C8.6989,14.0934514 9.22926667,13.9353552 9.69663333,13.7960854 C9.989,13.7089851 10.2648,13.6264212 10.5,13.6264212 C10.7352,13.6264212 11.011,13.7087583 11.3033667,13.7960854 C11.6295667,13.8936196 11.9861,14 12.3473,14 C12.5034,14 12.6604333,13.9800395 12.8160667,13.9308187 C13.3527333,13.7616082 13.6903667,13.3211164 13.9883333,12.9323404 C14.1645,12.7025679 14.3308667,12.4854975 14.5068,12.3611981 C14.6864667,12.2341768 14.9529333,12.1457155 15.2352667,12.0522641 C15.7042667,11.8968898 16.2358,11.7206477 16.5631667,11.2831046 C16.7414333,11.0449396 16.8228667,10.7736584 16.8627667,10.4982943 L21,10.4982943 L19.6485333,6.99999095 L21,3.5016876 Z M1.3517,9.58805042 L2.35176667,6.99999095 L1.3517,4.41193148 L4.08916667,4.41193148 C4.08216667,4.61357783 4.06606667,4.80025381 4.01543333,4.9517721 C3.95056667,5.14616009 3.79213333,5.36323046 3.6246,5.59322979 C3.33433333,5.99107872 3.00533333,6.44245806 3.00533333,6.99999095 C3.00533333,7.55775065 3.33433333,8.00867635 3.6246,8.40675211 C3.79213333,8.63652461 3.95056667,8.8538218 4.01543333,9.04820979 C4.06606667,9.19972808 4.08216667,9.38640406 4.08916667,9.58805042 L1.3517,9.58805042 Z M16.6119333,7.88029408 C16.4110333,8.15588499 16.2031333,8.44077567 16.0941667,8.76717511 C15.9805333,9.10718398 15.9747,9.46556557 15.9688667,9.81237915 C15.9625667,10.1902676 15.9565,10.5472882 15.8064667,10.7478005 C15.6534,10.9523955 15.3036333,11.0683025 14.9335667,11.1910142 C14.5975667,11.3023846 14.2503667,11.4173843 13.9561333,11.6256085 C13.6656333,11.8311109 13.4481667,12.1146406 13.2379333,12.3886438 C13.0025,12.6955364 12.7803667,12.9854172 12.5269667,13.0652592 C12.292,13.1392037 11.9450333,13.0357721 11.5784667,12.9262162 C11.2329,12.8230113 10.8756667,12.7164042 10.5,12.7164042 C10.1245667,12.7164042 9.7671,12.8230113 9.42176667,12.9262162 C9.05426667,13.0357721 8.70753333,13.1396574 8.47256667,13.0652592 C8.21963333,12.9854172 7.99703333,12.6953095 7.76136667,12.3881901 C7.55136667,12.114187 7.33413333,11.8308841 7.04386667,11.6256085 C6.74963333,11.4173843 6.4022,11.3023846 6.06643333,11.1910142 C5.69613333,11.0683025 5.34636667,10.9523955 5.1933,10.7478005 C5.04303333,10.5470614 5.0372,10.1900408 5.0309,9.81215232 C5.0253,9.46556557 5.01923333,9.10718398 4.90583333,8.76740194 C4.79686667,8.4410025 4.58896667,8.15611182 4.38806667,7.88074773 C4.15846667,7.56568948 3.94146667,7.26809667 3.94146667,7.00021777 C3.94146667,6.73256569 4.15846667,6.43474606 4.38806667,6.11968781 C4.58896667,5.84432372 4.79686667,5.55943304 4.90583333,5.2330336 C5.01923333,4.89325156 5.02506667,4.53509679 5.03113333,4.18851004 C5.0372,3.81039478 5.0435,3.45337413 5.19353333,3.25263507 C5.3466,3.04804001 5.69636667,2.93213305 6.06666667,2.80942138 C6.40243333,2.6980509 6.74963333,2.58305124 7.04386667,2.374827 C7.33413333,2.16955146 7.55136667,1.88602172 7.76136667,1.61224541 C7.99703333,1.30512599 8.2194,1.01501836 8.47256667,0.935176387 C8.52786667,0.917710955 8.58946667,0.91022577 8.65573333,0.91022577 C8.8718,0.91022577 9.14083333,0.990521392 9.42176667,1.0744462 C9.76733333,1.17765102 10.1245667,1.2842582 10.5002333,1.2842582 C10.8756667,1.2842582 11.2331333,1.17765102 11.5787,1.0744462 C11.9462,0.964890304 12.2927,0.861458655 12.5274333,0.935403211 C12.7803667,1.01524519 13.0027333,1.30535282 13.2381667,1.61201858 C13.4484,1.88624855 13.6658667,2.16977829 13.9563667,2.37505382 C14.2506,2.58305124 14.5978,2.69827772 14.9338,2.80964821 C15.3038667,2.93235988 15.6536333,3.04826684 15.8067,3.2528619 C15.9572,3.45360095 15.9630333,3.81039478 15.9691,4.18828322 C15.9747,4.53486997 15.9807667,4.89325156 16.0944,5.2330336 C16.2033667,5.55965986 16.4112667,5.84455055 16.6121667,6.12014146 C16.8417667,6.43497288 17.0587667,6.73256569 17.0587667,7.00021777 C17.0585333,7.26764302 16.8415333,7.56523584 16.6119333,7.88029408 Z M19.6483,9.58805042 L16.9108333,9.58805042 C16.9180667,9.38640406 16.9339333,9.19972808 16.9845667,9.04820979 C17.0494333,8.8538218 17.2078667,8.63652461 17.3756333,8.40652528 C17.6656667,8.00867635 17.9946667,7.55752383 17.9946667,6.99999095 C17.9946667,6.44245806 17.6656667,5.99153237 17.3756333,5.59368343 C17.2078667,5.36368411 17.0494333,5.14661374 16.9845667,4.9517721 C16.9339333,4.80025381 16.9178333,4.61357783 16.9108333,4.41193148 L19.6480667,4.41193148 L18.6482333,6.99999095 L19.6483,9.58805042 Z" id="Shape" stroke="#CCCCCC"></path>
+									                    <path d="M10.5001176,2.24691358 C7.77834792,2.24691358 5.56410256,4.37902496 5.56410256,7.00011324 C5.56410256,9.62097504 7.77834792,11.7530864 10.5001176,11.7530864 C13.2216521,11.7530864 15.4358974,9.62097504 15.4358974,7.00011324 C15.4358974,4.37925145 13.2216521,2.24691358 10.5001176,2.24691358 Z M10.5001176,10.9760231 C8.22354882,10.9760231 6.37148486,9.19246912 6.37148486,7.00011324 C6.37148486,4.80775737 8.22354882,3.02420339 10.5001176,3.02420339 C12.7764512,3.02420339 14.6285151,4.80775737 14.6285151,7.00011324 C14.6285151,9.19246912 12.7766864,10.9760231 10.5001176,10.9760231 Z" id="Shape"></path>
+									                </g>
+									                <path d="M12.4812447,8.54196508 C12.2821878,8.09694332 12.2479333,7.71989113 12.2425643,7.57173603 L12.2425643,6.35273575 C12.2425643,5.42151302 11.4622289,4.66666667 10.4996953,4.66666667 C9.53705428,4.66666667 8.756692,5.42151302 8.756692,6.35273575 L8.756692,7.58935777 C8.74922904,7.74872188 8.71011563,8.11427357 8.5187901,8.54196508 C8.26153282,9.11667222 8.47438818,9.04819918 8.66509628,9.00089873 C8.85575068,8.95381026 9.28154194,8.76924575 9.41458661,8.99663241 C9.5475239,9.22388658 9.65844814,9.42130305 9.96885886,9.29257161 C10.2792964,9.16397268 10.4255758,9.12107103 10.4698971,9.12107103 L10.5301645,9.12107103 C10.5744591,9.12107103 10.7207921,9.16397268 11.031176,9.29257161 C11.3416135,9.42130305 11.4525109,9.22388658 11.5855287,8.99663241 C11.7184929,8.76924575 12.1442573,8.95381026 12.3349654,9.00089873 C12.5256466,9.04819918 12.7384215,9.11667222 12.4812447,8.54196508 M9.96171804,5.58604441 C10.1494463,5.58604441 10.3016584,5.81899583 10.3016584,6.1064289 C10.3016584,6.39388847 10.1494463,6.62689289 9.96171804,6.62689289 C9.77398976,6.62689289 9.62175079,6.39388847 9.62175079,6.1064289 C9.62175079,5.81899583 9.77398976,5.58604441 9.96171804,5.58604441 M10.4996953,7.66615145 C10.0860112,7.66615145 9.73777562,7.27229898 9.63283785,6.83403444 C9.83549205,7.10360728 10.1483457,7.27680379 10.4996953,7.27680379 C10.8509912,7.27680379 11.1638448,7.10360728 11.3665258,6.83403444 C11.2615881,7.27229898 10.9132988,7.66615145 10.4996953,7.66615145 M11.0376993,6.62689289 C10.84981,6.62689289 10.6976784,6.39388847 10.6976784,6.1064289 C10.6976784,5.81899583 10.84981,5.58604441 11.0376993,5.58604441 C11.2255082,5.58604441 11.3775861,5.81899583 11.3775861,6.1064289 C11.3775861,6.39388847 11.2255082,6.62689289 11.0376993,6.62689289" id="Fill-3"></path>
+									            </g>
+									        </g>
+									    </g> 
+									</svg>								
+    							</div>
+								<span>{ t('panel_menu_ghostery_supporter') }</span>
+							</Link>
+						</li>	
 					</ul>
 					<div className="row account-info">
 						<div onClick={this.clickSignedInAs} className={`${!this.props.logged_in ? 'hide' : ''} menu-option signed-in-as small-12 columns`}>

app/panel/index.jsx

@@ -24,6 +24,7 @@ import Detail from './containers/DetailContainer';
 import Settings from './containers/SettingsContainer';
 import Help from './components/Help';
 import About from './components/About';
+import Supporter from './components/Supporter';
 import Login from './containers/LoginContainer';
 import CreateAccount from './containers/CreateAccountContainer';
 import ForgotPassword from './containers/ForgotPasswordContainer';
@@ -43,6 +44,7 @@ const Ghostery = () => (
 		<Route path="/settings" component={Settings} />
 		<Route path="/help" component={Help} />
 		<Route path="/about" component={About} />
+		<Route path="/supporter" component={Supporter} />
 		<Route path="/login" component={Login} />
 		<Route path="/create-account" component={CreateAccount} />
 		<Route path="/forgot-password" component={ForgotPassword} />

app/scss/partials/_header.scss

@@ -107,12 +107,16 @@
 					fill: #e7ecee;
 				}
 			}
+			.supporter-icon {fill: #e7ecee;}
 			&:hover {
 				span {color: $ghosty-blue;}
 				.menu-icon {fill: $ghosty-blue;}
 				.about-icon {
 					path, text {stroke: $ghosty-blue;}
 				}
+				.supporter-icon {
+					path { fill: $ghosty-blue; stroke: $ghosty-blue;}
+				}
 			}
 			span {
 				font-size: 14px;

app/scss/partials/_help.scss

@@ -1,5 +1,5 @@
 /**
- * Help & About Panel Sass
+ * Help, About and Supporter Panel Sass
  *
  * Ghostery Browser Extension
  * https://www.ghostery.com/
@@ -11,7 +11,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-#content-help, #content-about {
+#content-help, #content-about, #content-supporter {
 	padding: 20px 15px;
 	h1 {
 		font-size: 18px;