Styling for radio groups

Opentrons · Jul 17, 2024 · e63d05a · e63d05a
1 parent d4ac1f4
commit e63d05a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx
@@ -151,7 +151,11 @@ export function DesktopRecoveryOptions({
           ({
             value: option,
             children: (
-              <StyledText role="label" htmlFor={option}>
+              <StyledText
+                desktopStyle="bodyDefaultRegular"
+                role="label"
+                htmlFor={option}
+              >
                 {getRecoveryOptionCopy(option)}
               </StyledText>
             ),

diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx
@@ -104,8 +104,8 @@ export function RecoveryODDOneDesktopTwoColumnContentWrapper({
 const STYLE = css`
   gap: ${SPACING.spacing24};
   width: 100%;
+  height: 100%;
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
     gap: none;
-    height: 100%;
   }
 `
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryRadioGroup.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/RecoveryRadioGroup.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
+
+import { css } from 'styled-components'
 import type { ChangeEventHandler } from 'react'
-import { RadioGroup } from '@opentrons/components'
+import { RadioGroup, SPACING, Flex } from '@opentrons/components'
 
 // note: this typescript stuff is so that e.currentTarget.value in the ChangeEventHandler
 // is deduced to a union of the values of the options passed to the radiogroup rather than
@@ -28,11 +30,14 @@ export function RecoveryRadioGroup<T extends string>(
 ): JSX.Element {
   return (
     <RadioGroup
+      css={css``}
       {...props}
       options={props.options.map(radioOption => ({
         name: '',
         value: radioOption.value,
-        children: radioOption.children,
+        children: (
+          <Flex marginY={SPACING.spacing4}>{radioOption.children}</Flex>
+        ),
       }))}
     />
   )