Update Overlay with New Branding

karma.conf.js

@@ -5,6 +5,26 @@ import { getKarmaConfig } from "@krakenjs/karma-config-grumbler";
 
 import { WEBPACK_CONFIG_TEST } from "./webpack.config";
 
+// manually set this to true to enable debugging settings
+const addDebugSettings = false;
+
+const karmaDebugSettings = {
+  // this will open a browser window and run the tests in it
+  browsers: ["Chrome"],
+  singleRun: false,
+  autoWatch: true,
+  client: {
+    // this will output the console.logs from the browser console to the terminal
+    debug: true,
+    mocha: {
+      // increase timeout to view rendered assets
+      timeout: 1000000,
+    },
+  },
+};
+
+const karmaDebugConfig = addDebugSettings ? karmaDebugSettings : {};
+
 export default function configKarma(karma: Object) {
   const karmaConfig = getKarmaConfig(karma, {
     basePath: __dirname,
@@ -16,6 +36,7 @@ export default function configKarma(karma: Object) {
 
   karma.set({
     ...karmaConfig,
+    ...karmaDebugConfig,
 
     files: [
       {

package.json

@@ -7,7 +7,7 @@
     "lint": "eslint --ext .js --ext .jsx src/ test/ *.js",
     "flow-typed": "rm -rf flow-typed && flow-typed install",
     "flow": "flow",
-    "karma": "cross-env NODE_ENV=test babel-node $(npm bin)/karma start",
+    "karma": "cross-env NODE_ENV=test babel-node ./node_modules/.bin/karma start",
     "format": "prettier --write --ignore-unknown .",
     "format:check": "prettier --check .",
     "test": "npm run format:check && npm run lint && npm run flow && npm run karma",
@@ -80,7 +80,7 @@
   "dependencies": {
     "@paypal/sdk-client": "^4.0.166",
     "@paypal/sdk-constants": "^1.0.128",
-    "@paypal/sdk-logos": "^2.1.0",
+    "@paypal/sdk-logos": "^2.2.12",
     "@krakenjs/belter": "^2.0.0",
     "@krakenjs/jsx-pragmatic": "^3.0.0",
     "@krakenjs/post-robot": "^11.0.0",

src/overlay/style.js

@@ -90,7 +90,7 @@ export function getContainerStyle({ uid }: {| uid: string |}): string {
 
             background-color: black;
             background-color: rgba(0, 0, 0, 0.8);
-            background: radial-gradient(50% 50%, ellipse closest-corner, rgba(0,0,0,0.6) 1%, rgba(0,0,0,0.8) 100%);
+            background: radial-gradient(84.48% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.75) 100%);
 
             color: #fff;
         }
@@ -113,18 +113,19 @@ export function getContainerStyle({ uid }: {| uid: string |}): string {
         }
 
         #${uid} .paypal-checkout-modal {
-            font-family: "HelveticaNeue", "HelveticaNeue-Light", "Helvetica Neue Light", helvetica, arial, sans-serif;
+            font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
             font-size: 14px;
             text-align: center;
 
             box-sizing: border-box;
             max-width: 350px;
+            width: 100%;
             top: 50%;
             left: 50%;
             position: absolute;
             transform: translateX(-50%) translateY(-50%);
             cursor: pointer;
-            text-align: center;
+            padding: 0 48px
         }
 
         #${uid}.paypal-overlay-loading .paypal-checkout-message, #${uid}.paypal-overlay-loading .paypal-checkout-continue {
@@ -141,46 +142,48 @@ export function getContainerStyle({ uid }: {| uid: string |}): string {
 
         #${uid} .paypal-checkout-modal .paypal-checkout-logo {
             cursor: pointer;
-            margin-bottom: 30px;
+            margin-bottom: 8px;
+            padding: 4px;
             display: inline-block;
         }
 
         #${uid} .paypal-checkout-modal .paypal-checkout-logo img {
-            height: 36px;
+            height: 38px;
         }
 
         #${uid} .paypal-checkout-modal .paypal-checkout-logo img.paypal-checkout-logo-pp {
             margin-right: 10px;
         }
 
         #${uid} .paypal-checkout-modal .paypal-checkout-message {
-            font-size: 15px;
-            line-height: 1.5;
-            padding: 10px 0;
+            font-size: 14px;
+            line-height: 18px;
+            padding: 8px 0;
+            font-weight: 400;
         }
 
         #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-message, #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-continue {
             display: none;
         }
 
         #${uid} .paypal-checkout-modal .paypal-checkout-continue {
-            font-size: 15px;
-            line-height: 1.35;
-            padding: 10px 0;
-            font-weight: bold;
+            font-size: 14px;
+            line-height: 18px;
+            padding: 8px 0;
+            font-weight: 500;
         }
 
         #${uid} .paypal-checkout-modal .paypal-checkout-continue a {
             border-bottom: 1px solid white;
         }
 
         #${uid} .paypal-checkout-close {
+            cursor: pointer;
             position: absolute;
             right: 16px;
             top: 16px;
-            width: 16px;
-            height: 16px;
-            opacity: 0.6;
+            width: 24px;
+            height: 24px;
         }
 
         #${uid}.paypal-overlay-loading .paypal-checkout-close {
@@ -193,9 +196,10 @@ export function getContainerStyle({ uid }: {| uid: string |}): string {
 
         #${uid} .paypal-checkout-close:before, .paypal-checkout-close:after {
             position: absolute;
-            left: 8px;
+            left: 11px;
+            top: 2px;
             content: ' ';
-            height: 16px;
+            height: 20px;
             width: 2px;
         }
 
@@ -208,9 +212,16 @@ export function getContainerStyle({ uid }: {| uid: string |}): string {
         }
 
         #${uid} .paypal-checkout-focus-warning {
+            font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
             font-size: 14px;
-            line-height: 1.35;
-            padding: 10px 0;
+            font-weight: 400;
+            line-height: 18px;
+            padding: 8px 0;
+            display: block;
+        }
+
+        #${uid} .paypal-checkout-focus-warning-hidden {
+            display: none;
         }
 
         #${uid} .paypal-checkout-iframe-container {
@@ -459,7 +470,7 @@ export function getVenmoContainerStyle({ uid }: {| uid: string |}): string {
 
             background-color: black;
             background-color: rgba(0, 0, 0, 0.8);
-            background: radial-gradient(50% 50%, ellipse closest-corner, rgba(0,0,0,0.6) 1%, rgba(0,0,0,0.8) 100%);
+            background: radial-gradient(84.48% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.75) 100%);
 
             color: #fff;
         }
@@ -490,7 +501,7 @@ export function getVenmoContainerStyle({ uid }: {| uid: string |}): string {
         }
 
         #${uid} .venmo-checkout-modal .venmo-interrogative-message {
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
             font-style: normal;
             font-size: 24px;
             line-height: 32px;
@@ -520,7 +531,7 @@ export function getVenmoContainerStyle({ uid }: {| uid: string |}): string {
         }
 
         #${uid} .venmo-checkout-modal .venmo-checkout-message {
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
             font-style: normal;
             font-weight: 400;
             font-size: 16px;
@@ -538,7 +549,7 @@ export function getVenmoContainerStyle({ uid }: {| uid: string |}): string {
             background: #0074DE;
             border-radius: 24px;
             border: none;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
             font-style: normal;
             font-weight: 700;
             font-size: 18px;
@@ -551,7 +562,7 @@ export function getVenmoContainerStyle({ uid }: {| uid: string |}): string {
         }
 
         #${uid} .venmo-checkout-close {
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
             font-style: normal;
             font-weight: 700;
             font-size: 18px;
@@ -567,6 +578,21 @@ export function getVenmoContainerStyle({ uid }: {| uid: string |}): string {
             display: none;
         }
 
+        #${uid} .venmo-checkout-focus-warning {
+            font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
+           font-style: normal;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 20px;
+            text-align: center;
+            margin-top: 16px;
+            display: block;
+        }
+
+        #${uid} .venmo-checkout-focus-warning-hidden {
+            display: none;
+        }
+
         #${uid} .venmo-checkout-iframe-container {
             display: none;
         }

src/overlay/template.jsx

@@ -18,8 +18,7 @@ import { EVENT, CONTEXT } from "@krakenjs/zoid/src";
 import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
 import {
   LOGO_COLOR,
-  PPLogo,
-  PayPalLogo,
+  PayPalRebrandLogo,
   VenmoLogo,
 } from "@paypal/sdk-logos/src";
 import { type ZalgoPromise } from "@krakenjs/zalgo-promise/src";
@@ -79,13 +78,14 @@ export function Overlay({
       document.getElementsByName(overlayIframeName)?.[0];
     const iframeDocument = overlayIframe?.contentWindow.document;
     const warningElement = iframeDocument?.getElementsByClassName(
-      "paypal-checkout-focus-warning"
+      "paypal-checkout-focus-warning-hidden"
     )?.[0];
 
     if (!warningElement) {
       return;
     }
     warningElement.innerText = `Still can't see it? Select "Window" in your toolbar to find "Log in to your PayPal account"`;
+    warningElement.classList.remove("paypal-checkout-focus-warning-hidden");
   }
 
   function focusCheckout(e) {
@@ -162,7 +162,6 @@ export function Overlay({
       </div>
     );
   }
-
   return (
     <div
       id={uid}
@@ -196,15 +195,14 @@ export function Overlay({
               {!fullScreen && (
                 <div class="paypal-checkout-modal">
                   <div class="paypal-checkout-logo" dir="ltr">
-                    <PPLogo logoColor={LOGO_COLOR.WHITE} />
-                    <PayPalLogo logoColor={LOGO_COLOR.WHITE} />
+                    <PayPalRebrandLogo logoColor={LOGO_COLOR.WHITE} />
                   </div>
                   {content.windowMessage && (
                     <div class="paypal-checkout-message">
                       {content.windowMessage}
                     </div>
                   )}
-                  <div class="paypal-checkout-focus-warning" />
+                  <div class="paypal-checkout-focus-warning paypal-checkout-focus-warning-hidden" />
                   {content.continueMessage && (
                     <div class="paypal-checkout-continue">
                       {/* This handler should be guarded with e.stopPropagation. 
@@ -261,19 +259,21 @@ export function VenmoOverlay({
     close();
   }
 
-  function displayFocusWarning() {
+  function displayFocusWarningVenmo() {
     const overlayIframe: ?HTMLIFrameElement =
       // $FlowFixMe
       document.getElementsByName(overlayIframeName)?.[0];
     const iframeDocument = overlayIframe?.contentWindow.document;
     const warningElement = iframeDocument?.getElementsByClassName(
-      "paypal-checkout-focus-warning"
+      "venmo-checkout-focus-warning-hidden"
     )?.[0];
 
     if (!warningElement) {
       return;
     }
+
     warningElement.innerText = `Still can't see it? Select "Window" in your toolbar to find "Log in to your Venmo account"`;
+    warningElement.classList.remove("venmo-checkout-focus-warning-hidden");
   }
 
   function focusCheckout(e) {
@@ -289,7 +289,7 @@ export function VenmoOverlay({
       // eslint-disable-next-line no-alert
       window.alert("Please switch tabs to reactivate the Venmo window");
     } else if (isFirefox()) {
-      displayFocusWarning();
+      displayFocusWarningVenmo();
     }
     focus();
   }
@@ -381,7 +381,7 @@ export function VenmoOverlay({
                       {content.interrogativeMessage}
                     </div>
                   )}
-                  <div class="paypal-checkout-focus-warning" />
+                  <div class="venmo-checkout-focus-warning venmo-checkout-focus-warning-hidden" />
                   {content.windowMessage && (
                     <div class="venmo-checkout-message">
                       {content.windowMessage}