From 0d94f74e6de719a11ad4c4b8b2f6d9f2da696e3b Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Thu, 9 May 2024 16:39:47 -0400
Subject: [PATCH] fix(app): update InputField styling (#15114)

* fix(app): update InputField styling
---
 app/src/atoms/InputField/index.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx
index f891b580c6c..fe1981d0c9e 100644
--- a/app/src/atoms/InputField/index.tsx
+++ b/app/src/atoms/InputField/index.tsx
@@ -59,7 +59,7 @@ export interface InputFieldProps {
   /** blur handler */
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown
   /** makes input field read-only */
-  readOnly?: boolean | undefined
+  readOnly?: boolean
   /** html tabindex property */
   tabIndex?: number
   /** automatically focus field on renders */
@@ -172,7 +172,9 @@ function Input(props: InputFieldProps): JSX.Element {
 
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
       height: ${size === 'small' ? '4.25rem' : '5rem'};
-      font-size: ${TYPOGRAPHY.fontSize28};
+      font-size: ${size === 'small'
+        ? TYPOGRAPHY.fontSize28
+        : TYPOGRAPHY.fontSize38};
       padding: ${SPACING.spacing16} ${SPACING.spacing24};
       border: 2px ${BORDERS.styleSolid}
         ${hasError ? COLORS.red50 : COLORS.grey50};
@@ -188,8 +190,17 @@ function Input(props: InputFieldProps): JSX.Element {
         flex: 1 1 auto;
         width: 100%;
         height: 100%;
-        font-size: ${TYPOGRAPHY.fontSize28};
-        line-height: ${TYPOGRAPHY.lineHeight36};
+        font-size: ${size === 'small'
+          ? TYPOGRAPHY.fontSize28
+          : TYPOGRAPHY.fontSize38};
+        line-height: ${size === 'small'
+          ? TYPOGRAPHY.lineHeight36
+          : TYPOGRAPHY.lineHeight48};
+      }
+
+      /* the size of dot for password is handled by font-size */
+      input[type='password'] {
+        font-size: ${size === 'small' ? '71px' : '77px'};
       }
     }
   `