Working on Midnight theme.

app/panel/components/Header.jsx

@@ -160,15 +160,23 @@ class Header extends React.Component {
 				<div className="top-bar">
 					<div className="top-bar-left">
 						<Link to={(this.props.is_expert ? '/detail/blocking' : '/')} className={headerLogoClasses} >
-							<img className="back-arrow" src="/app/images/panel/back_arrow_icon.png" />
-							<svg width="75" height="22" viewBox="0 0 75 22">
-							  <g fill="none" fillRule="evenodd">
-							    <path d="M16.415 9.158c0 3.493-2.94 6.325-6.566 6.325-3.627 0-6.567-2.832-6.567-6.325 0-3.494 2.94-6.326 6.566-6.326 3.625 0 6.565 2.832 6.565 6.326" fill="#FFF"/>
-							    <path d="M18.65 17.774c-.91-1.995-1.067-3.686-1.09-4.35V7.96C17.56 3.783 13.992.4 9.594.4 5.195.4 1.63 3.783 1.63 7.96v5.543c-.034.715-.213 2.354-1.087 4.27-1.176 2.578-.203 2.27.668 2.06.873-.212 2.818-1.04 3.426-.02.608 1.018 1.115 1.903 2.533 1.326s2.086-.77 2.29-.77h.274c.202 0 .87.193 2.29.77 1.418.576 1.925-.31 2.533-1.328.607-1.02 2.553-.19 3.424.02.873.212 1.845.52.67-2.058" fill="#FFF"/>
-							    <path d="M7.136 4.52c.858 0 1.554 1.046 1.554 2.335 0 1.288-.696 2.333-1.554 2.333-.857 0-1.553-1.045-1.553-2.333 0-1.29.696-2.334 1.553-2.334M9.595 13.847c-1.89 0-3.482-1.765-3.96-3.73.925 1.208 2.354 1.985 3.96 1.985 1.605 0 3.035-.777 3.96-1.985-.48 1.965-2.07 3.73-3.96 3.73M12.053 9.188c-.858 0-1.553-1.045-1.553-2.333 0-1.29.695-2.334 1.553-2.334.86 0 1.553 1.046 1.553 2.335 0 1.288-.694 2.333-1.553 2.333" fill="#00AEF0"/>
-							    <path d="M27.967 9.838h2.446v3.54c0 1.787-.89 2.808-2.605 2.808-1.716 0-2.605-1.02-2.605-2.807V7.572c0-1.787.89-2.807 2.605-2.807 1.715 0 2.605 1.02 2.605 2.807v1.085H28.76V7.46c0-.796-.348-1.1-.904-1.1-.557 0-.906.304-.906 1.1v6.03c0 .798.35 1.085.906 1.085s.905-.287.905-1.085v-2.057h-.793V9.838M33.462 15.938h-1.81V4.766h1.81v4.788h2.056V4.766h1.842v11.172h-1.842V11.15h-2.056v4.788M38.6 7.573c0-1.786.965-2.807 2.73-2.807 1.765 0 2.73 1.02 2.73 2.807v5.806c0 1.785-.965 2.806-2.73 2.806-1.765 0-2.73-1.02-2.73-2.807V7.572zm1.798 5.917c0 .798.36 1.1.932 1.1.572 0 .93-.302.93-1.1V7.46c0-.796-.358-1.1-.93-1.1-.572 0-.932.304-.932 1.1v6.03zM47.424 4.766c1.7 0 2.574 1.02 2.574 2.808v.35h-1.652v-.462c0-.798-.318-1.1-.875-1.1-.554 0-.872.302-.872 1.1 0 2.296 3.415 2.727 3.415 5.917 0 1.785-.89 2.806-2.605 2.806-1.715 0-2.605-1.02-2.605-2.807v-.687h1.652v.797c0 .798.35 1.085.906 1.085s.906-.287.906-1.085c0-2.297-3.415-2.727-3.415-5.916 0-1.787.874-2.808 2.574-2.808M50.51 4.766h5.458v1.597h-1.846v9.575h-1.766V6.363H50.51V4.766M58.78 9.474h2.497v1.596H58.78v3.27h3.142v1.598H56.96V4.766h4.962v1.596H58.78v3.112M66.585 15.938c-.095-.288-.16-.464-.16-1.373V12.81c0-1.038-.35-1.42-1.15-1.42h-.605v4.548h-1.755V4.766h2.65c1.82 0 2.6.846 2.6 2.57v.878c0 1.148-.366 1.9-1.148 2.265.877.366 1.165 1.212 1.165 2.377v1.724c0 .544.016.943.19 1.358h-1.787zM64.67 6.362v3.43h.687c.654 0 1.052-.286 1.052-1.18v-1.1c0-.8-.27-1.15-.893-1.15h-.847zM70.843 12.235l-2.222-7.47h1.84l1.343 5.092 1.342-5.09h1.68L72.6 12.234v3.703h-1.76v-3.703" fill="#FFF"/>
-							  </g>
-							</svg>
+								<svg width="8px" height="13px" viewBox="0 0 8 13" className="back-arrow">
+								    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+								        <g id="Priority-Support" transform="translate(-9.000000, -13.000000)" fill="#FFFFFF">
+								            <g id="Group" transform="translate(2.000000, -19.000000)">
+								                <path d="M9.97923761,38.216699 L14.8755284,33.3205611 C14.9585604,33.2375291 15,33.1419581 15,33.0340012 C15,32.9260443 14.9585604,32.8304733 14.8755284,32.7475942 L14.2525587,32.1246245 C14.1695267,32.0415925 14.0739557,32 13.9661517,32 C13.8581948,32 13.7626238,32.0415925 13.6795918,32.1246245 L7.87392431,37.9301391 C7.79089227,38.0131711 7.74945271,38.1087421 7.74945271,38.216699 C7.74945271,38.3246559 7.79089227,38.4202269 7.87392431,38.5032589 L13.6794389,44.3087735 C13.7624709,44.3919584 13.8580419,44.433398 13.9659988,44.433398 C14.0738028,44.433398 14.1693738,44.3919584 14.2524058,44.3087735 L14.8753755,43.6861097 C14.9584075,43.6030776 14.9998471,43.5075067 14.9998471,43.3993968 C14.9998471,43.2915928 14.9584075,43.1960218 14.8753755,43.1129898 L9.97923761,38.216699 L9.97923761,38.216699 Z"></path>
+								            </g>
+								        </g>
+								    </g>
+								</svg>
+								<svg width="75" height="22" viewBox="0 0 75 22">
+								  <g fill="none" fillRule="evenodd">
+								    <path d="M16.415 9.158c0 3.493-2.94 6.325-6.566 6.325-3.627 0-6.567-2.832-6.567-6.325 0-3.494 2.94-6.326 6.566-6.326 3.625 0 6.565 2.832 6.565 6.326" fill="#FFF"/>
+								    <path d="M18.65 17.774c-.91-1.995-1.067-3.686-1.09-4.35V7.96C17.56 3.783 13.992.4 9.594.4 5.195.4 1.63 3.783 1.63 7.96v5.543c-.034.715-.213 2.354-1.087 4.27-1.176 2.578-.203 2.27.668 2.06.873-.212 2.818-1.04 3.426-.02.608 1.018 1.115 1.903 2.533 1.326s2.086-.77 2.29-.77h.274c.202 0 .87.193 2.29.77 1.418.576 1.925-.31 2.533-1.328.607-1.02 2.553-.19 3.424.02.873.212 1.845.52.67-2.058" fill="#FFF"/>
+								    <path d="M7.136 4.52c.858 0 1.554 1.046 1.554 2.335 0 1.288-.696 2.333-1.554 2.333-.857 0-1.553-1.045-1.553-2.333 0-1.29.696-2.334 1.553-2.334M9.595 13.847c-1.89 0-3.482-1.765-3.96-3.73.925 1.208 2.354 1.985 3.96 1.985 1.605 0 3.035-.777 3.96-1.985-.48 1.965-2.07 3.73-3.96 3.73M12.053 9.188c-.858 0-1.553-1.045-1.553-2.333 0-1.29.695-2.334 1.553-2.334.86 0 1.553 1.046 1.553 2.335 0 1.288-.694 2.333-1.553 2.333" fill="#00AEF0"/>
+								    <path d="M27.967 9.838h2.446v3.54c0 1.787-.89 2.808-2.605 2.808-1.716 0-2.605-1.02-2.605-2.807V7.572c0-1.787.89-2.807 2.605-2.807 1.715 0 2.605 1.02 2.605 2.807v1.085H28.76V7.46c0-.796-.348-1.1-.904-1.1-.557 0-.906.304-.906 1.1v6.03c0 .798.35 1.085.906 1.085s.905-.287.905-1.085v-2.057h-.793V9.838M33.462 15.938h-1.81V4.766h1.81v4.788h2.056V4.766h1.842v11.172h-1.842V11.15h-2.056v4.788M38.6 7.573c0-1.786.965-2.807 2.73-2.807 1.765 0 2.73 1.02 2.73 2.807v5.806c0 1.785-.965 2.806-2.73 2.806-1.765 0-2.73-1.02-2.73-2.807V7.572zm1.798 5.917c0 .798.36 1.1.932 1.1.572 0 .93-.302.93-1.1V7.46c0-.796-.358-1.1-.93-1.1-.572 0-.932.304-.932 1.1v6.03zM47.424 4.766c1.7 0 2.574 1.02 2.574 2.808v.35h-1.652v-.462c0-.798-.318-1.1-.875-1.1-.554 0-.872.302-.872 1.1 0 2.296 3.415 2.727 3.415 5.917 0 1.785-.89 2.806-2.605 2.806-1.715 0-2.605-1.02-2.605-2.807v-.687h1.652v.797c0 .798.35 1.085.906 1.085s.906-.287.906-1.085c0-2.297-3.415-2.727-3.415-5.916 0-1.787.874-2.808 2.574-2.808M50.51 4.766h5.458v1.597h-1.846v9.575h-1.766V6.363H50.51V4.766M58.78 9.474h2.497v1.596H58.78v3.27h3.142v1.598H56.96V4.766h4.962v1.596H58.78v3.112M66.585 15.938c-.095-.288-.16-.464-.16-1.373V12.81c0-1.038-.35-1.42-1.15-1.42h-.605v4.548h-1.755V4.766h2.65c1.82 0 2.6.846 2.6 2.57v.878c0 1.148-.366 1.9-1.148 2.265.877.366 1.165 1.212 1.165 2.377v1.724c0 .544.016.943.19 1.358h-1.787zM64.67 6.362v3.43h.687c.654 0 1.052-.286 1.052-1.18v-1.1c0-.8-.27-1.15-.893-1.15h-.847zM70.843 12.235l-2.222-7.47h1.84l1.343 5.092 1.342-5.09h1.68L72.6 12.234v3.703h-1.76v-3.703" fill="#FFF"/>
+								  </g>
+								</svg>
 						</Link>
 					</div>
 					<div className="top-bar-right">
@@ -180,7 +188,7 @@ class Header extends React.Component {
 								<Link to={(loggedIn && supporter) ? "/subscription" : `/subscribe/${supporter}`}>
 									<svg width="29px" height="20px" viewBox="0 0 29 20" className="header-badge">
 									    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-									        <g transform="translate(-552.000000, -70.000000)" fill="#FFFFFF">
+									        <g transform="translate(-552.000000, -70.000000)">
 									            <g transform="translate(552.000000, 70.000000)" className={(loggedIn && supporter) ? "" : "disabled-header-badge"} >
 									                <g fillRule="nonzero">
 									                    <path d="M29,5.00241085 L23.2873222,5.00241085 C23.2319,4.60870956 23.1194444,4.22116491 22.8732667,3.88125325 C22.4208667,3.25619169 21.6871667,3.00441728 21.0395,2.78245399 C20.6496111,2.64895199 20.2816333,2.52257873 20.0335222,2.3411197 C19.7908889,2.16354908 19.5611444,1.85344855 19.3175444,1.52520212 C18.9060667,0.96980786 18.4398111,0.340533853 17.6990222,0.0988044971 C16.9859444,-0.133851907 16.2545,0.0919997834 15.6097333,0.291280687 C15.2059889,0.416033772 14.8251222,0.53365811 14.5003222,0.53365811 C14.1758444,0.53365811 13.7946556,0.416033772 13.3909111,0.291280687 C12.7458222,0.0919997834 12.0140556,-0.133851907 11.3016222,0.0984804631 C10.5605111,0.340533853 10.0936111,0.970131894 9.68213333,1.52552615 C9.43917778,1.85344855 9.20943333,2.16354908 8.96712222,2.34079567 C8.71901111,2.5222547 8.35103333,2.64862796 7.96114444,2.78212996 C7.3138,3.00409324 6.57945556,3.25586765 6.12737778,3.88060518 C5.8812,4.22051684 5.76874444,4.60838552 5.71332222,5.00176278 L0,5.00176278 L1.86631111,9.99998707 L0,14.9972392 L5.713,14.9972392 C5.7681,15.3909405 5.88087778,15.7784852 6.12673333,16.1187209 C6.57913333,16.7434584 7.31315556,16.9952328 7.9605,17.2171961 C8.35038889,17.3510221 8.71868889,17.4770714 8.9668,17.6585304 C9.20878889,17.836101 9.43853333,18.1458775 9.68181111,18.4741239 C10.0932889,19.0295182 10.5601889,19.6591162 11.3013,19.9011696 C12.0127667,20.133502 12.7451778,19.9076503 13.3905889,19.7086934 C13.7943333,19.5842644 14.1752,19.466316 14.5,19.466316 C14.8248,19.466316 15.2056667,19.5839404 15.6094111,19.7086934 C16.0598778,19.8480281 16.5522333,20 17.0510333,20 C17.2666,20 17.4834556,19.971485 17.6983778,19.9011696 C18.4394889,19.6594403 18.9057444,19.0301663 19.3172222,18.474772 C19.5605,18.1465256 19.7902444,17.8364251 20.0332,17.6588544 C20.2813111,17.4773954 20.6492889,17.3510221 21.0391778,17.2175201 C21.6868444,16.9955569 22.4208667,16.7437824 22.8729444,16.1187209 C23.1191222,15.7784852 23.2315778,15.3909405 23.2866778,14.9975633 L29,14.9975633 L27.1336889,9.99998707 L29,5.00241085 Z M1.86663333,13.6972149 L3.24767778,9.99998707 L1.86663333,6.30275925 L5.64694444,6.30275925 C5.63727778,6.59082547 5.61504444,6.85750544 5.54512222,7.07396014 C5.45554444,7.35165727 5.23675556,7.6617578 5.0054,7.99032827 C4.60455556,8.55868388 4.15022222,9.20351152 4.15022222,9.99998707 C4.15022222,10.7967866 4.60455556,11.4409662 5.0054,12.0096459 C5.23675556,12.3378923 5.45554444,12.6483169 5.54512222,12.926014 C5.61504444,13.1424687 5.63727778,13.4091487 5.64694444,13.6972149 L1.86663333,13.6972149 Z M22.9402889,11.257563 C22.6628556,11.6512643 22.3757556,12.058251 22.2252778,12.5245359 C22.0683556,13.0102628 22.0603,13.5222365 22.0522444,14.0176845 C22.0435444,14.5575251 22.0351667,15.0675546 21.8279778,15.3540007 C21.6166,15.6462793 21.1335889,15.8118607 20.6225444,15.9871631 C20.1585444,16.1462638 19.6790778,16.310549 19.2727556,16.6080122 C18.8715889,16.901587 18.5712778,17.3066295 18.2809556,17.6980625 C17.9558333,18.1364805 17.6490778,18.550596 17.2991444,18.6646559 C16.9746667,18.770291 16.4955222,18.6225315 15.9893111,18.4660231 C15.5121,18.3185876 15.0187778,18.1662917 14.5,18.1662917 C13.9815444,18.1662917 13.4879,18.3185876 13.0110111,18.4660231 C12.5035111,18.6225315 12.0246889,18.7709391 11.7002111,18.6646559 C11.3509222,18.550596 11.0435222,18.1361565 10.7180778,17.6974145 C10.4280778,17.3059814 10.1280889,16.901263 9.72724444,16.6080122 C9.32092222,16.310549 8.84113333,16.1462638 8.37745556,15.9871631 C7.86608889,15.8118607 7.38307778,15.6462793 7.1717,15.3540007 C6.96418889,15.0672306 6.95613333,14.5572011 6.94743333,14.0173605 C6.9397,13.5222365 6.93132222,13.0102628 6.77472222,12.5248599 C6.62424444,12.058575 6.33714444,11.6515883 6.05971111,11.258211 C5.74264444,10.8081278 5.44297778,10.3829952 5.44297778,10.0003111 C5.44297778,9.61795099 5.74264444,9.19249436 6.05971111,8.74241115 C6.33714444,8.34903389 6.62424444,7.9420472 6.77472222,7.47576229 C6.93132222,6.99035938 6.93937778,6.47870971 6.94775556,5.98358577 C6.95613333,5.44342111 6.96483333,4.93339161 7.17202222,4.64662153 C7.3834,4.35434287 7.86641111,4.18876151 8.37777778,4.01345912 C8.84145556,3.85435843 9.32092222,3.6900732 9.72724444,3.39261 C10.1280889,3.09935924 10.4280778,2.69431675 10.7180778,2.30320772 C11.0435222,1.8644657 11.3506,1.45002623 11.7002111,1.33596627 C11.7765778,1.31101565 11.8616444,1.30032253 11.9531556,1.30032253 C12.2515333,1.30032253 12.6230556,1.41503056 13.0110111,1.53492314 C13.4882222,1.6823586 13.9815444,1.83465458 14.5003222,1.83465458 C15.0187778,1.83465458 15.5124222,1.6823586 15.9896333,1.53492314 C16.4971333,1.37841472 16.9756333,1.23065522 17.2997889,1.3362903 C17.6490778,1.45035027 17.9561556,1.86478974 18.2812778,2.30288369 C18.5716,2.69464078 18.8719111,3.09968327 19.2730778,3.39293403 C19.6794,3.6900732 20.1588667,3.85468246 20.6228667,4.01378315 C21.1339111,4.18908554 21.6169222,4.35466691 21.8283,4.64694557 C22.0361333,4.93371565 22.0441889,5.44342111 22.0525667,5.98326174 C22.0603,6.47838567 22.0686778,6.99035938 22.2256,7.47576229 C22.3760778,7.94237124 22.6631778,8.34935793 22.9406111,8.74305922 C23.2576778,9.1928184 23.5573444,9.61795099 23.5573444,10.0003111 C23.5570222,10.3823472 23.2573556,10.8074798 22.9402889,11.257563 Z M27.1333667,13.6972149 L23.3530556,13.6972149 C23.3630444,13.4091487 23.3849556,13.1424687 23.4548778,12.926014 C23.5444556,12.6483169 23.7632444,12.3378923 23.9949222,12.0093218 C24.3954444,11.4409662 24.8497778,10.7964626 24.8497778,9.99998707 C24.8497778,9.20351152 24.3954444,8.55933195 23.9949222,7.99097633 C23.7632444,7.66240587 23.5444556,7.35230534 23.4548778,7.07396014 C23.3849556,6.85750544 23.3627222,6.59082547 23.3530556,6.30275925 L27.1330444,6.30275925 L25.7523222,9.99998707 L27.1333667,13.6972149 Z"></path>
@@ -193,11 +201,13 @@ class Header extends React.Component {
 									</svg>								
 								</Link>
 							</div>				
-							<div
-								className="header-kebab shrink columns"
-								onClick={this.toggleDropdown}
-								ref={(node) => { this.kebab = node; }}
-							/>
+							<div className="header-kebab shrink columns" onClick={this.toggleDropdown} ref={(node) => { this.kebab = node; }}>
+								<svg width="4" height="16" viewBox="0 0 4 16">
+								  <g fill="#FFF" fill-rule="evenodd">
+								    <path d="M0 0h4v4H0zM0 6h4v4H0zM0 12h4v4H0z"/>
+								  </g>
+								</svg>
+							</div>
 						</div>
 						{ this.state.dropdownOpen &&
 							<HeaderMenu

app/scss/partials/_header.scss

@@ -39,27 +39,29 @@
 	.top-bar {
 		background-color: $ghosty-blue;
 		color: $white;
-		padding: 7px 0 7px 20px;
+		padding: 7px 0 7px 15px;
 		height: 36px;
 		.header-badge {
 			display: block;
 			margin-left: 10px;
 			.disabled-header-badge {
-				fill: #75D3F6; 
+				path {
+					fill: #75D3F6;
+				} 
 			}
 		}
 	}
 	.header-logo {
-		display: block;
-//		background-image: url('../../app/images/panel/ghostery-icon.svg');
+		display: inline;
 		background-size: auto 100%;
 		background-repeat: no-repeat;
 		height: 21px;
-		width: 72px;
+		width: 75px;
 		background-position: right;
 		.back-arrow {
 			display: none;
-			height: 11px;
+			height: 13px;
+			padding: 0 15px 17px 0
 		}
 		&.show-back-arrow {
 			width: 90px;
@@ -70,12 +72,12 @@
 	}
 	.header-kebab {
 		@extend %pointer;
-		background-image: url('../../app/images/panel/kebab-menu.svg');
-		background-size: 4px 16px;
-		background-position: center;
-		background-repeat: no-repeat;
 		height: 16px;
 		width: 34px;
+		svg {
+			display: block;
+			margin: 0 auto;
+		}
 	}
 	.header-helper-text {
 		@extend %pointer;