refactor: 5.1 styling for UK Hub

content/modals/GB/short_term.json

@@ -6,6 +6,7 @@
         "maxAmount": "{maxAmount}",
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
+        "useV5Design": "false",
         "apr": "{apr}",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",

src/components/modal/v2/parts/Header.jsx

@@ -90,7 +90,7 @@ const Header = ({
                 <h2
                     // id used for aria-labelleby on modal container element
                     id="header__headline"
-                    className={`headline-${countryClassName}`}
+                    className={`headline-${countryClassName} ${useV5Design ? 'v5Design' : ''}`}
                     // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{ __html: headline }}
                 />

src/components/modal/v2/parts/views/ShortTerm/styles.scss

@@ -35,6 +35,7 @@
 
             @include mobile {
                 padding: 0 0 15px;
+                justify-content: space-between;
             }
 
             @include smallMobile {
@@ -44,18 +45,14 @@
             .checkout & {
                 padding: 0px;
             }
-            
+
             .v5Design & {
                 @include tablet {
                     margin-top: 20px;
                     margin-bottom: 20px;
                 }
             }
         }
-
-        &.checkout {
-            margin-bottom: 20px;
-        }
     }
 
     .learnMoreLink__container {
@@ -157,7 +154,7 @@
             padding-top: 24px;
             margin-top: auto !important;
         }
-        
+
         &.checkout {
             padding-bottom: 60px;
             @include mobile {

src/components/modal/v2/styles/components/_donut.scss

@@ -19,9 +19,6 @@ $donut-text-v5: #545d68;
 
     width: 80px;
 
-    svg {
-        max-width: 50px;
-    }
     &.donut__qualifying_payment {
         svg {
             text {
@@ -43,6 +40,7 @@ $donut-text-v5: #545d68;
     }
 
     svg {
+        max-width: 50px;
         width: 100%;
 
         text {
@@ -99,7 +97,6 @@ $donut-text-v5: #545d68;
 
             .checkout & {
                 font-size: 16px;
-                margin-top: -0.5rem;
             }
         }
 
@@ -132,7 +129,7 @@ $donut-text-v5: #545d68;
             display: flex;
             flex-direction: column;
             align-items: center;
-    
+
             &::after {
                 content: '';
                 flex-grow: 1;
@@ -159,10 +156,14 @@ $donut-text-v5: #545d68;
                 margin-bottom: 12px;
             }
         }
-        
+
         &__3 {
             @extend .donut__single_payment_line;
             .svg {
+                @include mobile {
+                    position: relative;
+                }
+
                 &::after {
                     max-width: 85px;
                     transform: translateX((100%));
@@ -172,8 +173,7 @@ $donut-text-v5: #545d68;
                         transform: translateX((75%));
                     }
                     @include mobile {
-                        max-width: min(70px, calc(100vw * 0.2));
-                        margin-left: auto;
+                        max-width: none;
                         padding-left: 2px;
                     }
                     @include smallMobile {

src/components/modal/v2/styles/components/_header.scss

@@ -308,6 +308,7 @@
                     }
                 }
             }
+
             &.headline-gb-preapproved {
                 max-width: 50%;
                 @include mobile {
@@ -320,6 +321,15 @@
                     max-width: 75%;
                 }
             }
+
+            &.v5Design {
+                &.headline-gb {
+                    font-family: $paypal-pro;
+                    font-weight: bold;
+                    font-size: 32px;
+                    line-height: 36px;
+                }
+            }
         }
 
         .subheadline_p {
@@ -387,7 +397,7 @@
                 }
             }
         }
-       
+
         &.checkout {
             background-color: $ql-gray;
 

src/components/modal/v2/styles/globals/_fonts.scss

@@ -1,3 +1,27 @@
+// PPUI 5.1
+@font-face {
+    font-family: 'PayPalPro';
+    src: url(https://www.paypalobjects.com/marketing/pp-com-components/fonts/SupremeLLTestSubWeb-Bold.woff)
+        format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'PayPalPro';
+    src: url(https://www.paypalobjects.com/marketing/pp-com-components/fonts/SupremeLLTestSubWeb-Black.woff)
+        format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'PayPalPro';
+    src: url(https://www.paypalobjects.com/marketing/pp-com-components/fonts/SupremeLLTestSubWeb-Book.woff)
+        format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+// TODO: Remove once all modals on 5.1
 @font-face {
     font-family: 'PayPalOpen';
     src: url(https://www.paypalobjects.com/paypal-ui/fonts/PayPalOpen-Bold.woff) format('woff');

src/components/modal/v2/styles/globals/_variables.scss

@@ -10,3 +10,4 @@ $content-wrapper-border-radius: 10px;
 $content-wrapper-border-radius-checkout: 32px;
 
 $paypal-open: PayPalOpen, Helvetica, Arial, Sans-Serif;
+$paypal-pro: PayPalPro, Helvetica, Arial, Sans-Serif;