Updated code to account for edge cases with APM buttons, Apple Pay, and the menu button. New functions created in styleUtils to calculate the css properties for these cases according to break points

Author: delbarrow

Diff for: src/ui/buttons/styles/responsive.js

@@ -365,10 +365,14 @@ const generateDisableMaxHeightStyles = ({
     .map((disableMaxHeightSize) => {
       const {
         disableHeightStyle,
+        buttonHeight,
         labelHeight,
         fontSize,
         marginTop,
         spinnerSize,
+        pillBorderRadius,
+        APMHeight,
+        applePayHeight,
       } = getDisableMaxHeightResponsiveStyleVariables({
         fundingEligibility,
         experiment,
@@ -398,6 +402,57 @@ const generateDisableMaxHeightStyles = ({
                 margin: 0 4vw;
                 height: ${labelHeight}px;
               }
+
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.APPLEPAY}] 
+              .${CLASS.BUTTON_LABEL} {
+                height: ${applePayHeight}px;
+              }
+
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.APPLEPAY}] 
+              .${CLASS.BUTTON_LABEL} .${CLASS.TEXT} {
+                line-height: ${applePayHeight}px;
+              }
+
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] 
+              .${CLASS.BUTTON_LABEL},
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] 
+              .${CLASS.BUTTON_LABEL} {
+                height: ${APMHeight}px;
+              }
+
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] 
+              .${CLASS.BUTTON_LABEL} .${CLASS.TEXT},
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] 
+              .${CLASS.BUTTON_LABEL} .${CLASS.SPACE},
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] 
+              .${CLASS.BUTTON_LABEL} .${CLASS.TEXT},
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] 
+              .${CLASS.BUTTON_LABEL} .${CLASS.SPACE} {
+                line-height: ${APMHeight}px;
+              }
+
+              .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
+                border-radius: ${pillBorderRadius}px;
+              }
+
+              .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} 
+              .menu-button {
+                border-top-right-radius: ${pillBorderRadius}px;
+                border-bottom-right-radius: ${pillBorderRadius}px;
+              }
+
+              .${CLASS.BUTTON_ROW}.${CLASS.WALLET}.${CLASS.WALLET_MENU} 
+              .${CLASS.BUTTON} {
+                width: calc(100% - ${buttonHeight + 2}px);
+                border-top-right-radius: 0px;
+                border-bottom-right-radius: 0px;
+              }
+
+              .menu-button {
+                height: 100%;
+                width: auto;
+                aspect-ratio: 1;
+              }
             }
           `;
     })

Diff for: src/ui/buttons/styles/styleUtils.js

@@ -66,6 +66,18 @@ function getSpinnerSize({ height }: {| height: number |}): number {
   return parseInt(spinner, 10);
 }
 
+function getAPMButtonHeight({ height }: {| height: number |}): number {
+  const buttonHeight = perc(height, 50) + 5;
+
+  return parseInt(buttonHeight, 10);
+}
+
+function getApplePayButtonHeight({ height }: {| height: number |}): number {
+  const buttonHeight = perc(height, 80) + 5;
+
+  return parseInt(buttonHeight, 10);
+}
+
 export function getResponsiveStyleVariables({
   height,
   fundingEligibility,
@@ -169,13 +181,25 @@ export function getDisableMaxHeightResponsiveStyleVariables({
   const spinnerSize = getSpinnerSize({
     height: buttonHeight,
   });
+  const APMHeight = getAPMButtonHeight({
+    height: buttonHeight,
+  });
+  const applePayHeight = getApplePayButtonHeight({
+    height: buttonHeight,
+  });
+
+  const pillBorderRadius = Math.ceil(buttonHeight / 2);
 
   const styleVariables = {
     disableHeightStyle,
+    buttonHeight,
     labelHeight,
     fontSize,
     marginTop,
     spinnerSize,
+    pillBorderRadius,
+    APMHeight,
+    applePayHeight,
   };
 
   return styleVariables;