From 02a1a168dc91f6ab0b7a0db0e269c3ec4864655e Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Fri, 3 May 2024 13:45:29 -0400
Subject: [PATCH] fix(app): modify the space between icon and banner outline
 (#15085)

* fix(app): modify the space between icon and banner outline
---
 .../Devices/ProtocolRun/ProtocolRunHeader.tsx     | 15 +++++++++++----
 app/src/organisms/Devices/ReachableBanner.tsx     |  6 +++++-
 app/src/organisms/UpdateRobotBanner/index.tsx     |  2 +-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx
index 704c234401e..93b566ef4a9 100644
--- 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
index 8cef91f4101..fe600e868f6 100644
--- 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
index 86e2201bf84..e372b256627 100644
--- 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>