rewards prompt styles

app/images/panel/right-left-moon.svg

@@ -1,13 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="52px" viewBox="0 0 24 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
-    <title>right-left-moon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="right-left-moon" transform="translate(12.000000, 26.000000) scale(-1, 1) translate(-12.000000, -26.000000) " fill-rule="nonzero">
-            <path d="M24,51.8484415 C10.5751046,50.8271917 0,39.6106802 0,25.9242207 C0,12.2377612 10.5751046,1.02124974 24,2.14481211e-13 L24,51.8484415 Z" id="Combined-Shape" fill="#EBEBEB"></path>
-            <polygon id="Shape" fill="#4A4A4A" transform="translate(13.500000, 25.500000) scale(-1, 1) rotate(-180.000000) translate(-13.500000, -25.500000) " points="10 21.2833333 11.3243243 20 17 25.5 11.3243243 31 10 29.7166667 14.3513514 25.5"></polygon>
-        </g>
-    </g>
-</svg>
+<svg width="24" height="52" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M0 51.848c13.425-1.02 24-12.237 24-25.924C24 12.238 13.425 1.021 0 0v51.848z" fill="#EBEBEB"/><path fill="#4A4A4A" d="M14 29.717L12.676 31 7 25.5l5.676-5.5L14 21.283 9.649 25.5z"/></g></svg>

app/images/panel/right-right-moon.svg

@@ -1,13 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="52px" viewBox="0 0 24 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
-    <title>right-right-moon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="right-right-moon" transform="translate(12.000000, 26.000000) scale(-1, 1) translate(-12.000000, -26.000000) " fill-rule="nonzero">
-            <path d="M24,51.8484415 C10.5751046,50.8271917 0,39.6106802 0,25.9242207 C0,12.2377612 10.5751046,1.02124974 24,2.14481211e-13 L24,51.8484415 Z" id="Combined-Shape" fill="#EBEBEB"></path>
-            <polygon id="Shape" fill="#4A4A4A" transform="translate(13.500000, 25.500000) rotate(180.000000) translate(-13.500000, -25.500000) " points="10 21.2833333 11.3243243 20 17 25.5 11.3243243 31 10 29.7166667 14.3513514 25.5"></polygon>
-        </g>
-    </g>
-</svg>
+<svg width="24" height="52" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M0 51.848c13.425-1.02 24-12.237 24-25.924C24 12.238 13.425 1.021 0 0v51.848z" fill="#EBEBEB"/><path fill="#4A4A4A" d="M7 29.717L8.324 31 14 25.5 8.324 20 7 21.283l4.351 4.217z"/></g></svg>

app/scss/panel.scss

@@ -26,6 +26,11 @@ html body {
 }
 *:focus {outline: none;}
 
+// Function helper with color variables
+@function url-friendly-colour($colour) {
+	@return '%23' + str-slice('#{$colour}', 2, -1)
+}
+
 // Foundation Helpers
 .collapse-left {padding-left: 0;}
 .collapse-right {padding-right: 0;}

app/scss/partials/_cliqz_features.scss

@@ -12,19 +12,19 @@
  */
 
 @function buildIconAntiTracking($stroke-color) {
-	@return url('data:image/svg+xml;charset=US-ASCII,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http%3A//www.w3.org/2000/svg"><g><circle stroke="#{$stroke-color}" stroke-width="2" fill="none" cx="25" cy="25" r="23"/><path stroke="#{$stroke-color}" stroke-width="2" fill="none" d="M25.2126964,15.0320852 C25.0849696,14.9893049 24.9150304,14.9893049 24.7873036,15.0320852 L15.6383616,17.4588294 C15.2554536,17.5438445 15,17.8844498 15,18.2675625 C15.0427571,24.7818425 18.5319589,30.8274493 24.53185,34.8722049 C24.6595767,34.95722 24.8297884,35 25,35 C25.1702116,35 25.3404233,34.95722 25.46815,34.8722049 C31.4680411,30.8274493 34.9572429,24.7818425 35,18.2675625 C35,17.8844498 34.7445464,17.5438445 34.3616384,17.4588294 L25.2126964,15.0320852 Z"/></g></svg>');
+	@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20d%3D%22M25.213%2015.032a.721.721%200%200%200-.426%200l-9.149%202.427a.82.82%200%200%200-.638.809c.043%206.514%203.532%2012.56%209.532%2016.604A.859.859%200%200%200%2025%2035c.17%200%20.34-.043.468-.128%206-4.045%209.49-10.09%209.532-16.604a.82.82%200%200%200-.638-.81l-9.15-2.426z%22/%3E%3C/g%3E%3C/svg%3E');
 }
 
 @function buildIconAdBlocking($stroke-color) {
-	@return url('data:image/svg+xml;charset=US-ASCII,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http%3A//www.w3.org/2000/svg"><g><circle stroke="#{$stroke-color}" stroke-width="2" fill="none" cx="25" cy="25" r="23"/><path stroke="#{$stroke-color}" stroke-width="2" fill="none" fill-rule="nonzero" transform="translate(14,14)" d="M14.873 1.312l-7.973.07-5.588 5.686.07 7.973 5.686 5.589 7.973-.07 5.589-5.687-.07-7.973-5.687-5.588z"/><path stroke="#{$stroke-color}" stroke-width="2" d="M31.5,18.5 L18.5,31.5"/></g></svg>');
+	@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%3E%3Ccircle%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20fill-rule%3D%22nonzero%22%20transform%3D%22translate%2814%2C14%29%22%20d%3D%22M14.873%201.312l-7.973.07-5.588%205.686.07%207.973%205.686%205.589%207.973-.07%205.589-5.687-.07-7.973-5.687-5.588z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20d%3D%22M31.5%2C18.5%20L18.5%2C31.5%22/%3E%3C/g%3E%3C/svg%3E');
 }
 
 @function buildIconSmartBlocking($stroke-color) {
-	@return url('data:image/svg+xml;charset=US-ASCII,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http%3A//www.w3.org/2000/svg"><g><circle stroke="#{$stroke-color}" stroke-width="2" fill="none" cx="25" cy="25" r="23"/><path fill="#{$stroke-color}" d="M31.9766215,20.2390509 C31.8801207,21.9165559 31.2802076,23.3962344 30.3232416,24.7536786 C29.8922048,25.3648501 29.456343,25.9711966 29.038173,26.5936266 C28.4414766,27.4814337 27.9637978,28.4255329 27.7804463,29.4918664 C27.7498877,29.6671761 27.6389118,29.6543094 27.5166775,29.6543094 C26.6755125,29.652701 25.8343474,29.652701 24.991574,29.652701 C24.1600591,29.652701 23.3285441,29.647876 22.4954208,29.6559177 C22.3136776,29.6575261 22.2493438,29.606059 22.2123518,29.4178825 C22.0145253,28.3869326 21.5545383,27.4637419 20.9707086,26.60006 C20.4737296,25.8666541 19.9558422,25.146115 19.4572548,24.4127092 C18.5501476,23.0826069 18.0756855,21.6109701 18.0113516,20.0010156 C17.8987674,17.1815848 19.4974635,14.7224235 22.1962684,13.5804977 C25.6542127,12.118511 29.7426286,13.5853227 31.3622332,16.8743907 C31.8833374,17.9358991 32.044172,19.0633498 31.9766215,20.2390509 Z M22.352278,32.3000388 L22.352278,31.6695671 L27.6566037,31.6695671 L27.6566037,32.3000388 L22.352278,32.3000388 Z M27.1113743,34.9811519 L22.895899,34.9811519 C22.3876616,34.9811519 22.2943775,34.8733927 22.3603197,34.3281634 L27.6405202,34.3281634 C27.7145041,34.865351 27.6180033,34.9811519 27.1113743,34.9811519 Z M33.3501491,16.4047536 C31.9010292,13.2363116 29.3839675,11.4767809 25.9646235,11.0698693 C23.0519085,10.7224665 20.5187633,11.6794325 18.4536468,13.7429406 C16.1488868,16.0493091 15.5956157,18.8671316 16.2646877,21.9841065 C16.6153071,23.6133611 17.4130468,25.0303141 18.3684045,26.3732832 C18.8058746,26.9908881 19.2369114,27.6165348 19.638998,28.2566565 C20.0105259,28.8501363 20.2742947,29.4982998 20.3000282,30.2027554 C20.3305868,31.0165786 20.30807,31.8304018 20.30807,32.6442249 L20.3402369,32.6442249 C20.3402369,33.3197303 20.3386285,33.9952357 20.3418452,34.6707411 C20.3482786,35.8753924 21.2939862,36.8918672 22.4922041,36.9706761 C22.649822,36.9819346 22.7028974,37.0269683 22.7414977,37.1845862 C22.9972248,38.242878 23.9268489,38.9746755 24.991574,38.9762838 C26.0772077,38.9778922 27.0003984,38.2541364 27.2657755,37.1781528 C27.2995508,37.0382267 27.3381511,36.9835429 27.490944,36.9722845 C28.7325872,36.8790004 29.6622113,35.8753924 29.665428,34.6353575 C29.665428,33.3776308 29.6750781,32.1199041 29.6622113,30.860569 C29.6509529,29.9196865 29.869688,29.0447462 30.3682753,28.2502232 C30.7703619,27.6101014 31.1997903,26.9828464 31.6420855,26.3700665 C32.9046372,24.6137525 33.7972694,22.7175123 33.9645374,20.5269448 C34.0739049,19.1035585 33.9468456,17.7107307 33.3501491,16.4047536 Z"/><path stroke="#{$stroke-color}" stroke-width="1.5" fill="none" d="M25.0957134,18.2144383 C25.0382363,18.1951872 24.9617637,18.1951872 24.9042866,18.2144383 L20.7872627,19.3064732 C20.6149541,19.34473 20.5,19.4980024 20.5,19.6704031 C20.5192407,22.6018291 22.0893815,25.3223522 24.7893325,27.1424922 C24.8468095,27.180749 24.9234048,27.2 25,27.2 C25.0765952,27.2 25.1531905,27.180749 25.2106675,27.1424922 C27.9106185,25.3223522 29.4807593,22.6018291 29.5,19.6704031 C29.5,19.4980024 29.3850459,19.34473 29.2127373,19.3064732 L25.0957134,18.2144383 Z"/></g></svg>');
+	@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20fill%3D%22#{url-friendly-colour($stroke-color)}%22%20d%3D%22M31.977%2020.24c-.097%201.677-.697%203.156-1.654%204.514-.43.61-.867%201.217-1.285%201.84-.597.887-1.074%201.832-1.258%202.898-.03.175-.141.162-.263.162l-2.525-.001c-.832%200-1.663-.005-2.497.003-.181.002-.246-.05-.283-.238-.197-1.031-.657-1.954-1.241-2.818-.497-.733-1.015-1.454-1.514-2.187A8.257%208.257%200%200%201%2018.011%2020c-.112-2.82%201.486-5.279%204.185-6.42%203.458-1.462%207.547.004%209.166%203.293.521%201.062.682%202.19.615%203.365zM22.352%2032.3v-.63h5.305v.63h-5.305zm4.76%202.681h-4.216c-.508%200-.602-.108-.536-.653h5.28c.075.537-.022.653-.529.653zm6.238-18.576c-1.449-3.169-3.966-4.928-7.385-5.335-2.913-.348-5.446.61-7.511%202.673-2.305%202.306-2.858%205.124-2.19%208.241.351%201.63%201.149%203.046%202.104%204.39.438.617.869%201.243%201.271%201.883.372.593.635%201.241.661%201.946.03.814.008%201.627.008%202.441h.032c0%20.676-.001%201.351.002%202.027.006%201.204.952%202.22%202.15%202.3.158.01.21.056.25.214a2.322%202.322%200%200%200%204.524-.007c.034-.14.072-.194.225-.206a2.329%202.329%200%200%200%202.174-2.337c0-1.257.01-2.515-.003-3.774-.011-.941.208-1.816.706-2.61.402-.64.832-1.268%201.274-1.88%201.263-1.757%202.155-3.653%202.323-5.844.109-1.423-.018-2.816-.615-4.122z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20d%3D%22M25.096%2018.214a.324.324%200%200%200-.192%200l-4.117%201.092a.37.37%200%200%200-.287.364c.02%202.932%201.59%205.652%204.29%207.472a.387.387%200%200%200%20.21.058c.077%200%20.153-.02.21-.058%202.7-1.82%204.27-4.54%204.29-7.472a.37.37%200%200%200-.287-.364l-4.117-1.092z%22/%3E%3C/svg%3E');
 }
 
 @function buildIconDash($stroke-color) {
-	@return url('data:image/svg+xml;charset=US-ASCII,<svg width="15px" height="10px" viewBox="0 0 10 10" xmlns="http%3A//www.w3.org/2000/svg"><g><path stroke="#{$stroke-color}" stroke-width="3" d="M1,5 L9,5"/></g></svg>');
+	@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%223%22%20d%3D%22M1%205h8%22/%3E%3C/svg%3E');
 }
 
 .sub-component.cliqz-features {
@@ -60,7 +60,7 @@
 
 		background-repeat: no-repeat;
 		background-position: center center;
-		background-size: 15px 10px;
+		background-size: 10px 10px;
 		transition: background-image 0.25s ease-out;
 		background-image: buildIconDash(#c8c7c2);
 	}

app/scss/partials/_ghostery_features.scss

@@ -12,11 +12,11 @@
  */
 
 @function buildIconTrust($stroke-color) {
-	@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http%3A//www.w3.org/2000/svg"><g stroke="#{$stroke-color}" fill="none"><circle cx="7" cy="7" r="6" stroke-width="2"/></g></svg>');
+	@return url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22>%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%226%22%20stroke-width%3D%222%22%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20fill%3D%22none%22/%3E%3C/svg%3E');
 }
 
 @function buildIconRestrict($stroke-color) {
-	@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http%3A//www.w3.org/2000/svg"><g stroke="#{$stroke-color}" fill="none"><circle cx="7" cy="7" r="6" stroke-width="2"/><path d="M3,3 L11,11" stroke-width="2"/></g></svg>');
+	@return url('data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20fill%3D%22none%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%226%22/%3E%3Cpath%20d%3D%22M3%203l8%208%22/%3E%3C/g%3E%3C/svg%3E');
 }
 
 .sub-component.ghostery-features {

app/scss/partials/_pause_button.scss

@@ -12,19 +12,19 @@
  */
 
 @function buildIconPause($stroke-color) {
-	@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="16" viewBox="0 0 14 16" xmlns="http%3A//www.w3.org/2000/svg"><g fill="#{$stroke-color}"><path d="M1,15 L4,15 L4,1 L1,1 L1,15 L1,15 Z M9,1 L9,15 L12,15 L12,1 L9,1 L9,1 Z"/></g></svg>');
+	@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%2214%22%20height=%2216%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M1%2015h3V1H1v14zM9%201v14h3V1H9z%22%20fill=%22#{url-friendly-colour($stroke-color)}%22/%3E%3C/svg%3E');
 }
 
 @function buildIconPlay($stroke-color) {
-	@return url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="16" viewBox="0 0 14 16" xmlns="http%3A//www.w3.org/2000/svg"><g fill="#{$stroke-color}"><path d="M12.739453,7.542901 C13.012591,7.683981 13.153986,8.172646 12.739453,8.458306 L1.78263,14.919992 C1.460969,15.141574 1,14.87503 1,14.46229 L1,1.538918 C1,1.16064 1.440099,0.845632 1.78263,1.081215 L12.739453,7.542901 Z M2.043507,13.546884 L11.435069,8.000604 L2.043507,2.454323 L2.043507,13.546884 Z"/></g></svg>');
+	@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%2214%22%20height=%2216%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M12.74%207.543a.532.532%200%200%201%200%20.915L1.782%2014.92c-.322.222-.783-.045-.783-.458V1.54c0-.378.44-.693.783-.458l10.956%206.462zM2.043%2013.547L11.435%208%202.044%202.454v11.093z%22%20fill=%22#{url-friendly-colour($stroke-color)}%22/%3E%3C/svg%3E');
 }
 
 @function buildIconCaretDown($stroke-color) {
-	@return url('data:image/svg+xml;charset=US-ASCII,<svg width="9" height="5" viewBox="0 0 9 5" xmlns="http%3A//www.w3.org/2000/svg"><g fill="#{$stroke-color}"><path d="M0 0 L9 0 L 4.5 5 L 0 0"/></g></svg>');
+	@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%229%22%20height=%225%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M0%200h9L4.5%205%200%200%22%20fill=%22#{url-friendly-colour($stroke-color)}%22/%3E%3C/svg%3E');
 }
 
 @function buildIconCircle($stroke-color) {
-	@return url('data:image/svg+xml;charset=US-ASCII,<svg width="4" height="4" viewBox="0 0 4 4" xmlns="http%3A//www.w3.org/2000/svg"><g fill="#{$stroke-color}"><circle cx="2" cy="2" r="2"/></g></svg>');
+	@return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%224%22%20height=%224%22%20xmlns=%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx=%222%22%20cy=%222%22%20r=%222%22%20fill=%22#{url-friendly-colour($stroke-color)}%22/%3E%3C/svg%3E');
 }
 
 .sub-component.pause-button {
@@ -84,6 +84,9 @@
 			min-width: 41px;
 			max-width: 41px;
 			padding-left: 17px;
+			.pause-button-icon {
+				padding: 0 0 0 15px;
+			}
 		}
 	}
 	.button-caret {
@@ -143,7 +146,7 @@
 		}
 		.dropdown-item.selected {
 			background-color: #ebebeb;
-			.pause-button-icon {
+			.dropdown-clickable {
 				padding: 0 0 0 10px;
 				background-repeat: no-repeat;
 				background-position: 0 center;
@@ -165,13 +168,11 @@
 	.button-pause {
 		height: 35px;
 		line-height: 21px;
-		top: 0;
 	}
 	.button-caret {
 		height: 35px;
 	}
 	.button-pause.smaller {
-		top: 1px;
 		height: 45px;
 		min-width: 125px;
 		max-width: 125px;
@@ -189,7 +190,6 @@
 		}
 	}
 	.button-pause.smallest {
-		top: 0;
 		padding-left: 15px;
 		height: 41px;
 		line-height: 27px;

app/scss/partials/_summary.scss

@@ -49,7 +49,7 @@
 	}
 	&.expert .page-host {
 		margin-top: 20px;
-		margin-bottom: 24px;
+		margin-bottom: 20px;
 	}
 	&.expert.ab-pause .page-host {
 		margin-top: 8px;
@@ -82,7 +82,7 @@
 		color: #4a4a4a;
 		font-size: 24px;
 		font-weight: 600;
-		margin: 21px 0;
+		margin: 18px 0;
 	}
 	&.expert.condensed.ab-pause .total-tracker-count {
 		margin: 13px 0;
@@ -94,7 +94,7 @@
 		font-size: 14px;
 		line-height: 21px;
 		font-weight: 600;
-		margin-bottom: 44px;
+		margin-bottom: 40px;
 		.blocked-trackers .value { color: #e74055; }
 		.page-load .value { color: #ffc063; }
 		.page-load.fast .value { color: #9ecc42; }
@@ -180,6 +180,12 @@
 	&.expert.condensed.ab-pause .cliqz-features-container {
 		margin-top: 14px;
 	}
+	&.expert.condensed .cliqz-features-container {
+		margin-bottom: 0;
+		.cliqz-feature:last-of-type {
+			margin-bottom: 0;
+		}
+	}
 
 	.map-these-trackers {
 		text-align: center;