fix(app): modify the space between icon and banner outline (#15085)

* fix(app): modify the space between icon and banner outline
Opentrons · May 3, 2024 · 02a1a16 · 02a1a16
1 parent 8fef724
commit 02a1a16
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx
@@ -353,17 +353,23 @@ export function ProtocolRunHeader({
           <ProtocolAnalysisErrorBanner errors={analysisErrors} />
         )}
         {runStatus === RUN_STATUS_BLOCKED_BY_OPEN_DOOR ? (
-          <Banner type="warning">{t('close_door_to_resume')}</Banner>
+          <Banner type="warning" iconMarginLeft={SPACING.spacing4}>
+            {t('close_door_to_resume')}
+          </Banner>
         ) : null}
         {runStatus === RUN_STATUS_STOPPED ? (
-          <Banner type="warning">{t('run_canceled')}</Banner>
+          <Banner type="warning" iconMarginLeft={SPACING.spacing4}>
+            {t('run_canceled')}
+          </Banner>
         ) : null}
         {/* Note: This banner is for before running a protocol */}
         {isDoorOpen &&
         runStatus !== RUN_STATUS_BLOCKED_BY_OPEN_DOOR &&
         runStatus != null &&
         CANCELLABLE_STATUSES.includes(runStatus) ? (
-          <Banner type="warning">{t('shared:close_robot_door')}</Banner>
+          <Banner type="warning" iconMarginLeft={SPACING.spacing4}>
+            {t('shared:close_robot_door')}
+          </Banner>
         ) : null}
         {mostRecentRunId === runId ? (
           <TerminalRunBanner
@@ -833,6 +839,7 @@ function TerminalRunBanner(props: TerminalRunProps): JSX.Element | null {
         type="success"
         onCloseClick={handleRunSuccessClick}
         isCloseActionLoading={isClosingCurrentRun}
+        iconMarginLeft={SPACING.spacing4}
       >
         <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} width="100%">
           {t('run_completed')}
@@ -843,7 +850,7 @@ function TerminalRunBanner(props: TerminalRunProps): JSX.Element | null {
 
   const buildErrorBanner = (): JSX.Element => {
     return (
-      <Banner type="error">
+      <Banner type="error" iconMarginLeft={SPACING.spacing4}>
         <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} width="100%">
           <StyledText>
             {t('error_info', {

diff --git a/app/src/organisms/Devices/ReachableBanner.tsx b/app/src/organisms/Devices/ReachableBanner.tsx
@@ -16,7 +16,11 @@ export function ReachableBanner(
   const { robot } = props
   const { t } = useTranslation('shared')
   return robot.status === REACHABLE && robot.serverHealthStatus === 'ok' ? (
-    <Banner type="error" marginRight={SPACING.spacing24}>
+    <Banner
+      type="error"
+      marginRight={SPACING.spacing24}
+      iconMarginLeft={SPACING.spacing4}
+    >
       {t('robot_is_reachable_but_not_responding', {
         hostname: robot.ip,
       })}

diff --git a/app/src/organisms/UpdateRobotBanner/index.tsx b/app/src/organisms/UpdateRobotBanner/index.tsx
@@ -38,7 +38,7 @@ export function UpdateRobotBanner(
       onClick={(e: React.MouseEvent) => e.stopPropagation()}
       flexDirection={DIRECTION_COLUMN}
     >
-      <Banner type="error" {...styleProps}>
+      <Banner type="error" {...styleProps} iconMarginLeft={SPACING.spacing4}>
         <StyledText as="p" marginRight={SPACING.spacing4}>
           {t('branded:robot_software_update_required')}
         </StyledText>