Bug 1648538 - Fix zap size on varying text widths r=emcminn

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

browser/components/newtab/aboutwelcome/content/aboutwelcome.css

@@ -277,14 +277,18 @@ body {
     .multistageContainer .brand-logo.cta-top {
       margin-top: 25px; }
   .multistageContainer .welcomeZap span {
-    display: inline-block;
-    font-weight: bold;
-    background-image: url("../data/content/assets/zap.svg");
-    background-repeat: no-repeat;
-    background-size: 100%;
+    position: relative;
+    z-index: 1; }
+  .multistageContainer .welcomeZap span::after {
+    display: block;
+    background: center/contain no-repeat url("../data/content/assets/zap.svg");
     content: '';
-    background-position-y: bottom;
-    padding-bottom: 8px; }
+    position: absolute;
+    top: calc(100% - 0.15em);
+    width: 100%;
+    height: 0.3em;
+    left: 0;
+    z-index: -1; }
   .multistageContainer .welcome-text {
     display: flex;
     flex-direction: column;
@@ -328,9 +332,13 @@ body {
       box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
       border-radius: 4px;
       cursor: pointer;
-      margin-inline-end: 21px; }
+      margin-inline-start: 21px; }
+      .multistageContainer .tiles-theme-section .theme:first-child {
+        margin-inline-start: 0; }
       .multistageContainer .tiles-theme-section .theme .icon {
         background-size: cover;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
         height: 91px; }
         .multistageContainer .tiles-theme-section .theme .icon.light {
           background-image: url("chrome://mozapps/content/extensions/firefox-compact-light.svg"); }

browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss

@@ -267,15 +267,23 @@ body {
     }
   }
 
-  .welcomeZap span {
-    display: inline-block;
-    font-weight: bold;
-    background-image: url('../data/content/assets/zap.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;
-    content: '';
-    background-position-y: bottom;
-    padding-bottom: 8px;
+  .welcomeZap {
+    span {
+      position: relative;
+      z-index: 1;
+    }
+
+    span::after {
+      display: block;
+      background: center / contain no-repeat url('../data/content/assets/zap.svg');
+      content: '';
+      position: absolute;
+      top: calc(100% - 0.15em);
+      width: 100%;
+      height: 0.3em;
+      left: 0;
+      z-index: -1;
+    }
   }
 
   .welcome-text {
@@ -329,10 +337,16 @@ body {
       box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
       border-radius: 4px;
       cursor: pointer;
-      margin-inline-end: 21px;
+      margin-inline-start: 21px;
+
+      &:first-child {
+        margin-inline-start: 0;
+      }
 
       .icon {
         background-size: cover;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
         height: 91px;
 
         &.light {

browser/components/newtab/data/content/assets/zap.svg

@@ -2,7 +2,7 @@
    - 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 width="108" height="9" viewBox="0 0 108 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 4.83004C6.10256 2.84324 25.0154 0.657752 38.3077 3.04192C54.9231 6.02212 93.0769 9.59836 106 4.234" stroke="url(#paint0_linear)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M2 4.83004C6.10256 2.84324 25.0154 0.657752 38.3077 3.04192C54.9231 6.02212 93.0769 9.59836 106 4.234" stroke="url(#paint0_linear)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
 <defs>
 <linearGradient id="paint0_linear" x1="2" y1="5.6009" x2="97.9111" y2="5.6009" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FF9100"/>