fix(app): fix font size in parameters screen odd

the design team requested us to update the font size of value in parameters screen. close AUTH-218
Opentrons · Mar 19, 2024 · 2478a27 · 2478a27
1 parent 9f6b349
commit 2478a27
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/app/src/organisms/ProtocolSetupParameters/index.tsx b/app/src/organisms/ProtocolSetupParameters/index.tsx
@@ -7,12 +7,13 @@ import {
   Flex,
   SPACING,
 } from '@opentrons/components'
-import { ProtocolSetupStep, SetupScreens } from '../../pages/ProtocolSetup'
+import { ProtocolSetupStep } from '../../pages/ProtocolSetup'
 import { useMostRecentCompletedAnalysis } from '../LabwarePositionCheck/useMostRecentCompletedAnalysis'
 import { ChildNavigation } from '../ChildNavigation'
 import { ResetValuesModal } from './ResetValuesModal'
 
 import type { RunTimeParameter } from '@opentrons/shared-data'
+import type { SetupScreens } from '../../pages/ProtocolSetup'
 
 const mockData: RunTimeParameter[] = [
   {
@@ -230,6 +231,7 @@ export function ProtocolSetupParameters({
                 onClickSetupStep={() => console.log('TODO: wire this up')}
                 detail={getDefault(parameter)}
                 description={parameter.description}
+                hasLargeFont
               />
             </React.Fragment>
           )

diff --git a/app/src/pages/ProtocolSetup/index.tsx b/app/src/pages/ProtocolSetup/index.tsx
@@ -116,6 +116,8 @@ interface ProtocolSetupStepProps {
   description?: string
   //  optional removal of the icon
   hasIcon?: boolean
+  //  optional enlarge the font size
+  hasLargeFont?: boolean
 }
 
 export function ProtocolSetupStep({
@@ -128,6 +130,7 @@ export function ProtocolSetupStep({
   disabledReason,
   description,
   hasIcon = true,
+  hasLargeFont = false,
 }: ProtocolSetupStepProps): JSX.Element {
   const backgroundColorByStepStatus = {
     ready: COLORS.green35,
@@ -162,6 +165,8 @@ export function ProtocolSetupStep({
     }
   `
 
+  const isToggle = detail === 'On' || detail === 'Off'
+
   return (
     <Btn
       onClick={() =>
@@ -201,9 +206,15 @@ export function ProtocolSetupStep({
             {description}
           </StyledText>
         </Flex>
-        <Flex flex="1" justifyContent={JUSTIFY_END}>
+        <Flex
+          flex="1"
+          justifyContent={JUSTIFY_END}
+          padding={
+            isToggle ? `${SPACING.spacing12} ${SPACING.spacing10}` : 'undefined'
+          }
+        >
           <StyledText
-            as="p"
+            as={hasLargeFont ? 'h4' : 'p'}
             textAlign={TEXT_ALIGN_RIGHT}
             color={disabled ? COLORS.grey50 : COLORS.black90}
             maxWidth="20rem"