Bug 1582879 - Update unofficial branding r=dao

Update unofficial build branding with new visuals and assets

Differential Revision: https://phabricator.services.mozilla.com/D46677

--HG--
extra : moz-landing-system : lando

browser/branding/unofficial/content/about-wordmark.svg

@@ -1,22 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="132px" height="48px" viewBox="0 0 132 48">
-  <path fill="#fff" d="M60.6,14.3l-2.4-2.4C57,12.7,56,13,54.7,13c-3,0-3.8-1.4-7.6-1.4c-5.4,0-9.2,3.4-9.2,8.4
-  c0,3.3,2.2,6.1,5.6,7.2c-3.4,1-4.5,2.2-4.5,4.3c0,2.2,1.8,3.6,4.7,3.6h3.8c2.5,0,3.9,0.2,4.9,0.9c0.9,0.6,1.4,1.6,1.4,3
-  c0,3.1-2.2,4.4-6,4.4c-2,0-3.8-0.5-5.1-1.2c-0.9-0.6-1.5-1.6-1.5-2.9c0-0.8,0.3-1.7,0.7-2.2l-4.1,0.4c-0.3,1-0.5,1.7-0.5,2.6
-  c0,3.5,3,6.4,10.8,6.4c6.1,0,9.9-2.5,9.9-7.9c0-2.1-0.8-3.9-2.7-5.3c-1.5-1.1-3.1-1.4-6-1.4h-4c-1.3,0-2-0.5-2-1.2
-  c0-0.8,1.1-1.7,4.5-2.9c1.8,0,3.4-0.3,4.7-1.1c2.3-1.4,3.7-4.1,3.7-6.8c0-1.6-0.5-3-1.5-4.3c0.4,0.2,1.1,0.3,1.7,0.3
-  C57.9,15.8,59,15.4,60.6,14.3z M47.1,24.8c-3.1,0-4.8-1.7-4.8-4.8c0-3.5,1.6-5.1,4.7-5.1c3.3,0,4.6,1.5,4.6,4.9
-  C51.6,23.1,50.1,24.8,47.1,24.8z M30.7,1.3c-1.7,0-3,1.4-3,3.1s1.4,3,3,3c1.7,0,3.1-1.3,3.1-3C33.7,2.7,32.4,1.3,30.7,1.3z
-  M107.7,34.5c-1.1,0-1.4-0.6-1.4-2.5V6.5c0-3.8-0.6-5.9-0.6-5.9l-3.9,0.8c0,0,0.6,1.9,0.6,5.1v26.4c0,1.8,0.4,2.8,1.2,3.5
-  c0.7,0.7,1.7,1,2.9,1c1,0,1.5-0.1,2.5-0.5l-0.8-2.5C108.2,34.4,107.8,34.5,107.7,34.5z M74.7,11.6c-3.2,0-6.1,1.8-8.3,3.9
-  c0,0,0.2-1.8,0.2-3.4V6.3c0-3.8-0.7-5.9-0.7-5.9l-3.9,0.7c0,0,0.7,1.9,0.7,5.1V37h3.9V19.3c2.1-2.7,4.9-4.2,7.2-4.2
-  c1.3,0,2.3,0.4,2.9,1c0.7,0.7,0.9,1.8,0.9,3.7V37h3.8V19.1c0-1.8-0.1-2.6-0.4-3.6C80.4,13.2,77.7,11.6,74.7,11.6z M127.4,12.1
-  l-4.9,16.4c-0.6,2-1.6,5.2-1.6,5.2s-0.7-3.9-1.5-6.2l-5.1-16.2l-3.9,1.3l5.4,15.6c0.8,2.5,2.2,7.4,2.5,9l1.6-0.3
-  c-1.3,5.1-2.5,6.7-5.7,7.6l1.2,2.7c4.4-1,6.4-4.3,8-9.3l8.6-25.8H127.4z M96.9,15l1.2-2.9h-6.2c0-3.3,0.5-7.2,0.5-7.2l-4.1,0.9
-  c0,0-0.4,3.9-0.4,6.3h-3.2V15h3.2v17.1c0,2.5,0.7,4.1,2.4,5c0.9,0.4,1.9,0.7,3.3,0.7c1.8,0,3.1-0.4,4.4-1l-0.6-2.5
-  c-0.7,0.3-1.3,0.5-2.4,0.5c-2.4,0-3.2-0.9-3.2-3.7V15H96.9z M28.6,37h4.1V11.5l-4.1,0.6V37z M18.9,21.3c0,5,0.4,10.5,0.4,10.5
-  s-1.4-3.8-3.2-7.2L4.8,2.7H0V37h4.2L4,17.1c0-4.5-0.4-9.3-0.4-9.3s1.7,4.1,3.9,8.2l11,21h4.3V2.7h-4L18.9,21.3z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="148" height="56">
+  <path d="M24.978 31.029L9.015 9.789h-5.5V40h5.5V18.76L24.978 40h5.453V9.789h-5.453zM38.525 7.722a3.078 3.078 0 0 0-3.078 3.034 3.056 3.056 0 1 0 6.112 0 3.069 3.069 0 0 0-3.034-3.034zM35.8 40h5.365V17.265H35.8zm27.131-19.35a9.342 9.342 0 0 0-7.783-3.914c-5.893 0-10.247 4.443-10.247 10.775s4.354 10.818 10.247 10.818a9.479 9.479 0 0 0 7.783-3.87v2.946c0 3.431-2.814 5.585-7.3 5.585a10.814 10.814 0 0 1-6.993-2.375l-1.978 3.914a16.324 16.324 0 0 0 9.762 3.034c6.948 0 11.874-4.133 11.874-9.982V17.265h-5.365zm-6.244 13.106a5.994 5.994 0 0 1-6.2-6.245 6.223 6.223 0 0 1 12.445 0 6 6 0 0 1-6.245 6.245zm28.939-17.02a8.272 8.272 0 0 0-7.08 3.651V9.261H73.18V40h5.366V26.235c0-2.726 2.507-4.924 5.541-4.924 2.814 0 4.793 2.2 4.793 5.276V40h5.189V25.532c0-5.145-3.469-8.796-8.443-8.796zm22.254 19.218a2.392 2.392 0 0 1-2.243-2.639V21.706h5.145v-4.441h-5.145V11.02H100.4v6.245h-3.3v4.441h3.3v12.27a6.223 6.223 0 0 0 6.421 6.551 7.726 7.726 0 0 0 4.837-1.8l-1.539-3.606a3.241 3.241 0 0 1-2.239 0.833zM114.74 40h5.365V9.261h-5.365zm26.693-22.735l-6.245 16.974-6.639-16.974h-5.673l9.63 22.911-0.967 2.023a3.058 3.058 0 0 1-2.9 1.5 6.517 6.517 0 0 1-2.9-0.836l-1.143 3.871a10.907 10.907 0 0 0 4.968 1.187c3.431-0.044 6.07-2.023 7.785-6.333l9.63-24.318z" fill="#fff"/>
 </svg>

browser/branding/unofficial/content/aboutDialog.css

@@ -3,12 +3,32 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #aboutDialogContainer {
-  background-image: url("chrome://branding/content/about-background.png");
-  background-repeat: no-repeat;
-  background-color: rgb(10,17,37);
+  background-color: #130829;
   color: #fff;
 }
 
+#clientBox {
+  padding: 10px 0 15px;
+}
+
+#leftBox {
+  background-image: url("chrome://branding/content/about-logo.png");
+  background-repeat: no-repeat;
+  background-size: 192px auto;
+  background-position: center 20%;
+  /* min-width and min-height create room for the logo */
+  min-width: 210px;
+  min-height: 210px;
+  margin-top: 20px;
+  margin-inline-start: 30px;
+}
+
+@media (min-resolution: 2dppx) {
+  #leftBox {
+    background-image: url("chrome://branding/content/about-logo@2x.png");
+  }
+}
+
 .text-link {
   color: #fff !important;
   text-decoration: underline;
@@ -20,6 +40,14 @@
   margin-right: 20px;
 }
 
-#bottomBox {
-  background-color: rgba(0,0,0,.7);
+#rightBox {
+  background-size: auto 64px;
+  margin-left: 30px;
+  margin-right: 30px;
+  padding-top: 64px;
+}
+
+#bottomBox {
+  background-color: hsla(235, 43%, 10%, .5);
+  padding: 15px 10px 15px;
 }

browser/branding/unofficial/content/jar.mn

@@ -5,8 +5,8 @@
 browser.jar:
 % content branding %content/branding/ contentaccessible=yes
   content/branding/about.png
-  content/branding/about-background.png
   content/branding/about-logo.png
+  content/branding/about-logo@2x.png
   content/branding/about-wordmark.svg
   content/branding/aboutlogins.svg
   content/branding/icon16.png                    (../default16.png)