From e2bc55cf3dc218e597beb5879bf4e408f8357d6d Mon Sep 17 00:00:00 2001
From: at-susie <atsuboy@gmail.com>
Date: Wed, 31 Jan 2024 15:08:43 +0100
Subject: [PATCH] chore: Refine the Popover arrow position for VR to align the
 stroke appearance (#1916)

---
 src/popover/arrow.scss |  4 ++++
 src/popover/arrow.tsx  | 17 +++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/popover/arrow.scss b/src/popover/arrow.scss
index ea6c32b04e..0d4b42b93d 100644
--- a/src/popover/arrow.scss
+++ b/src/popover/arrow.scss
@@ -65,6 +65,10 @@
   &-inner {
     top: 2px;
 
+    &.refresh {
+      top: 3px;
+    }
+
     &::after {
       border-radius: 1px 0 0 0;
       background-color: awsui.$color-background-popover;
diff --git a/src/popover/arrow.tsx b/src/popover/arrow.tsx
index 377871d33e..7b803db847 100644
--- a/src/popover/arrow.tsx
+++ b/src/popover/arrow.tsx
@@ -5,16 +5,21 @@ import clsx from 'clsx';
 
 import styles from './styles.css.js';
 import { InternalPosition } from './interfaces';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 
 export interface ArrowProps {
   position: InternalPosition | null;
 }
 
-const Arrow = (props: ArrowProps) => (
-  <div className={clsx(styles.arrow, props.position && styles[`arrow-position-${props.position}`])}>
-    <div className={styles['arrow-outer']} />
-    <div className={styles['arrow-inner']} />
-  </div>
-);
+const Arrow = (props: ArrowProps) => {
+  const isVisualRefresh = useVisualRefresh();
+
+  return (
+    <div className={clsx(styles.arrow, props.position && styles[`arrow-position-${props.position}`])}>
+      <div className={styles['arrow-outer']} />
+      <div className={clsx(styles['arrow-inner'], isVisualRefresh && styles.refresh)} />
+    </div>
+  );
+};
 
 export default React.memo(Arrow);