fix(app): fix RobotSettingsButtons layout and inline notification pos…

…ition (#13362)

* fix(app): fix software update InlineNotification layout

app/src/assets/localization/en/app_settings.json

@@ -33,7 +33,7 @@
   "discovery_timeout": "Discovery timed out.",
   "download_update": "Download app update",
   "enable_dev_tools_description": "Enabling this setting opens Developer Tools on app launch, enables additional logging and gives access to feature flags.",
-  "enable_dev_tools": "Enable Developer Tools",
+  "enable_dev_tools": "Developer Tools",
   "error_boundary_description": "You need to restart your robot. Then download the robot logs from the Opentrons App and send them to [email protected] for assistance.",
   "error_boundary_title": "An unknown error has occurred",
   "feature_flags": "Feature Flags",

app/src/assets/localization/en/device_settings.json

@@ -71,7 +71,7 @@
   "deck_calibration_modal_title": "Are you sure you want to calibrate?",
   "deck_calibration_recommended": "Deck calibration recommended",
   "deck_calibration_title": "Deck Calibration",
-  "dev_tools_description": "Enable additional logging and allow access to feature flags.",
+  "dev_tools_description": "Access additional logging and feature flags.",
   "device_reset_description": "Reset labware calibration, boot scripts, and/or robot calibration to factory settings.",
   "device_reset_slideout_description": "Select individual settings to only clear specific data types.",
   "device_reset": "Device Reset",

app/src/pages/AppSettings/__test__/AdvancedSettings.test.tsx

@@ -138,7 +138,7 @@ describe('AdvancedSettings', () => {
     getByText('Additional Custom Labware Source Folder')
     getByText('Prevent Robot Caching')
     getByText('Clear Unavailable Robots')
-    getByText('Enable Developer Tools')
+    getByText('Developer Tools')
     getByText('OT-2 Advanced Settings')
     getByText('Tip Length Calibration Method')
     getByText('USB-to-Ethernet Adapter Information')

app/src/pages/OnDeviceDisplay/RobotSettingsDashboard/RobotSettingButton.tsx

@@ -51,7 +51,7 @@ interface RobotSettingButtonProps {
   robotName?: string
   isUpdateAvailable?: boolean
   enabledDevTools?: boolean
-  enabledHistoricOffests?: boolean
+  enabledHistoricOffsets?: boolean
   devToolsOn?: boolean
   historicOffsetsOn?: boolean
   ledLights?: boolean
@@ -70,7 +70,7 @@ export function RobotSettingButton({
   isUpdateAvailable,
   iconName,
   enabledDevTools,
-  enabledHistoricOffests,
+  enabledHistoricOffsets,
   devToolsOn,
   historicOffsetsOn,
   ledLights,
@@ -93,7 +93,7 @@ export function RobotSettingButton({
       setCurrentOption(currentOption)
     } else if (Boolean(enabledDevTools)) {
       dispatch(toggleDevtools())
-    } else if (Boolean(enabledHistoricOffests)) {
+    } else if (Boolean(enabledHistoricOffsets)) {
       dispatch(toggleHistoricOffsets())
     } else if (Boolean(ledLights)) {
       if (toggleLights != null) toggleLights()
@@ -108,22 +108,22 @@ export function RobotSettingButton({
       onClick={handleClick}
       display={DISPLAY_FLEX}
       flexDirection={DIRECTION_ROW}
-      gridGap={SPACING.spacing24}
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       alignItems={ALIGN_CENTER}
     >
       <Flex
         flexDirection={DIRECTION_ROW}
         gridGap={SPACING.spacing24}
         alignItems={ALIGN_CENTER}
+        width="100%"
+        whiteSpace="nowrap"
       >
         <Icon name={iconName} size="3rem" color={COLORS.darkBlack100} />
         <Flex
           flexDirection={DIRECTION_COLUMN}
           gridGap={SPACING.spacing2}
           alignItems={ALIGN_FLEX_START}
           justifyContent={JUSTIFY_CENTER}
-          width="46.25rem"
         >
           <StyledText as="h4" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
             {settingName}
@@ -146,21 +146,21 @@ export function RobotSettingButton({
           gridGap={SPACING.spacing12}
           alignItems={ALIGN_CENTER}
           backgroundColor={COLORS.transparent}
-          padding={`${SPACING.spacing12} ${SPACING.spacing4}`}
+          padding={`${SPACING.spacing10} ${SPACING.spacing12}`}
           borderRadius={BORDERS.borderRadiusSize4}
         >
           <StyledText as="h4" fontWeight={TYPOGRAPHY.fontWeightRegular}>
             {Boolean(devToolsOn) ? t('shared:on') : t('shared:off')}
           </StyledText>
         </Flex>
       ) : null}
-      {enabledHistoricOffests != null ? (
+      {enabledHistoricOffsets != null ? (
         <Flex
           flexDirection={DIRECTION_ROW}
           gridGap={SPACING.spacing12}
           alignItems={ALIGN_CENTER}
           backgroundColor={COLORS.transparent}
-          padding={`${SPACING.spacing12} ${SPACING.spacing4}`}
+          padding={`${SPACING.spacing10} ${SPACING.spacing12}`}
           borderRadius={BORDERS.borderRadiusSize4}
         >
           <StyledText as="h4" fontWeight={TYPOGRAPHY.fontWeightRegular}>
@@ -174,7 +174,7 @@ export function RobotSettingButton({
           gridGap={SPACING.spacing12}
           alignItems={ALIGN_CENTER}
           backgroundColor={COLORS.transparent}
-          padding={`${SPACING.spacing12} ${SPACING.spacing4}`}
+          padding={`${SPACING.spacing10} ${SPACING.spacing12}`}
           borderRadius={BORDERS.borderRadiusSize4}
         >
           <StyledText
@@ -186,7 +186,7 @@ export function RobotSettingButton({
           </StyledText>
         </Flex>
       ) : null}
-      <Flex gridGap={SPACING.spacing40} alignItems={ALIGN_CENTER}>
+      <Flex gridGap={SPACING.spacing24} alignItems={ALIGN_CENTER}>
         {isUpdateAvailable ?? false ? (
           <InlineNotification
             type="alert"
@@ -213,7 +213,7 @@ export function RobotSettingButton({
           </Flex>
         ) : null}
         {enabledDevTools == null &&
-        enabledHistoricOffests == null &&
+        enabledHistoricOffsets == null &&
         ledLights == null &&
         enabledHomeGantry == null ? (
           <Icon name="more" size="3rem" color={COLORS.darkBlack100} />

app/src/pages/OnDeviceDisplay/RobotSettingsDashboard/RobotSettingsList.tsx

@@ -127,7 +127,7 @@ export function RobotSettingsList(props: RobotSettingsListProps): JSX.Element {
           settingName={t('apply_historic_offsets')}
           settingInfo={t('historic_offsets_description')}
           iconName="reticle"
-          enabledHistoricOffests
+          enabledHistoricOffsets
           historicOffsetsOn={historicOffsetsOn}
         />
         <RobotSettingButton

app/src/pages/OnDeviceDisplay/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx

@@ -138,8 +138,8 @@ describe('RobotSettingsDashboard', () => {
     getByText('Update Channel')
     getByText('Apply labware offsets')
     getByText('Use stored data when setting up a protocol.')
-    getByText('Enable Developer Tools')
-    getByText('Enable additional logging and allow access to feature flags.')
+    getByText('Developer Tools')
+    getByText('Access additional logging and feature flags.')
     expect(getAllByText('Off').length).toBe(3) // LED & DEV tools & historic offsets
   })
 
@@ -243,7 +243,7 @@ describe('RobotSettingsDashboard', () => {
 
   it('should call a mock function when tapping enable dev tools', () => {
     const [{ getByText }] = render()
-    const button = getByText('Enable Developer Tools')
+    const button = getByText('Developer Tools')
     fireEvent.click(button)
     expect(mockToggleDevtools).toHaveBeenCalled()
   })

components/src/ui-style-constants/spacing.ts

@@ -2,6 +2,7 @@ export const spacing2 = '0.125rem' as const // 2px
 export const spacing4 = '0.25rem' as const // 4px
 export const spacing6 = '0.375rem' as const // 6px
 export const spacing8 = '0.5rem' as const // 8px
+export const spacing10 = '0.625rem' as const // 10px
 export const spacing12 = '0.75rem' as const // 12px
 export const spacing16 = '1rem' as const // 16px
 export const spacing20 = '1.25rem' as const // 20px