fix(app): update InputField styling (#15114)

* fix(app): update InputField styling
Opentrons · May 9, 2024 · 0d94f74 · 0d94f74
1 parent de2ada8
commit 0d94f74
Showing 1 changed file with 15 additions and 4 deletions.
diff --git 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'};
  }
  }
  `