From bc2fa843cd7f2860d2d11921c9e20848f8bf3892 Mon Sep 17 00:00:00 2001
From: Brenden Manquen <bmanquen1993@gmail.com>
Date: Wed, 12 Aug 2026 21:52:56 -0500
Subject: [PATCH] fix(ui): use curved arrow for share icon

- Replace iOS box-arrow-up glyph, which reads as "upload" off Apple platforms
- Apply to Verse of the Day and the verse action popover
- Remove now-unused BoxArrowUpIcon
---
 .changeset/eighty-donkeys-brake.md            |  5 ++++
 .../ui/src/components/icons/box-arrow-up.tsx  | 23 -------------------
 packages/ui/src/components/icons/share.tsx    |  8 +++----
 .../src/components/verse-action-popover.tsx   |  4 ++--
 4 files changed, 10 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/eighty-donkeys-brake.md
 delete mode 100644 packages/ui/src/components/icons/box-arrow-up.tsx

diff --git a/.changeset/eighty-donkeys-brake.md b/.changeset/eighty-donkeys-brake.md
new file mode 100644
index 00000000..e904f8dd
--- /dev/null
+++ b/.changeset/eighty-donkeys-brake.md
@@ -0,0 +1,5 @@
+---
+'@youversion/platform-react-ui': patch
+---
+
+Replace the iOS-style box-arrow-up share glyph with a curved forward arrow in `VerseOfTheDay` and the verse action popover, so the share affordance reads as "share" on non-Apple platforms too.
diff --git a/packages/ui/src/components/icons/box-arrow-up.tsx b/packages/ui/src/components/icons/box-arrow-up.tsx
deleted file mode 100644
index c1f9bf5c..00000000
--- a/packages/ui/src/components/icons/box-arrow-up.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { ComponentProps, ReactElement } from 'react';
-
-export function BoxArrowUpIcon(props: ComponentProps<'svg'>): ReactElement {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M16.1213 9.18728C15.7307 9.57781 15.0976 9.57781 14.707 9.18728L13 7.48023V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V7.34819L9.12126 9.22693C8.73074 9.61746 8.09757 9.61746 7.70705 9.22693C7.31652 8.83641 7.31652 8.20324 7.70705 7.81272L11.2269 4.29289C11.6174 3.90237 12.2506 3.90237 12.6411 4.29289L16.1213 7.77307C16.5118 8.16359 16.5118 8.79676 16.1213 9.18728Z"
-        fill="currentColor"
-      />
-      <path
-        d="M6 12C5.44772 12 5 12.4478 5 13V18C5 19.1046 5.89543 20 7 20H17C18.1046 20 19 19.1046 19 18V13C19 12.4478 18.5523 12 18 12C17.4477 12 17 12.4478 17 13V17.5C17 17.7762 16.7761 18 16.5 18H7.5C7.22386 18 7 17.7762 7 17.5V13C7 12.4478 6.55228 12 6 12Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/ui/src/components/icons/share.tsx b/packages/ui/src/components/icons/share.tsx
index 8b8f278b..42232307 100644
--- a/packages/ui/src/components/icons/share.tsx
+++ b/packages/ui/src/components/icons/share.tsx
@@ -11,11 +11,9 @@ const SvgComponent = (props: SVGProps<SVGSVGElement>): React.ReactElement => (
   >
     <path
       fill="currentColor"
-      d="M16.121 9.187a1 1 0 0 1-1.414 0L13 7.48V15a1 1 0 1 1-2 0V7.348L9.121 9.227a1 1 0 1 1-1.414-1.414l3.52-3.52a1 1 0 0 1 1.414 0l3.48 3.48a1 1 0 0 1 0 1.414Z"
-    />
-    <path
-      fill="currentColor"
-      d="M6 12a1 1 0 0 0-1 1v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5a1 1 0 0 0-2 0v4.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V13a1 1 0 0 0-1-1Z"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.99996 6.41473V9.00052H15C12.74076 9.00052 10.00517 9.78697 7.82946 11.40919C6.59681 12.32832 5.55042 13.50864 4.86458 14.96772C5.96929 13.79064 7.07424 12.92904 8.2515 12.31704C10.31354 11.24513 12.48192 11.00052 15 11.00052H15.99996V13.58604L19.5858 10.00051L15.99996 6.41473ZM14.00004 4.60406C14.00004 3.49044 15.34644 2.93273 16.13388 3.72018L21.35352 8.93986C21.93936 9.52564 21.93936 10.47539 21.35352 11.06118L16.13388 16.28088C15.35064 17.064 14.00004 16.51728 14.00004 15.39768V13.017C12.0858 13.08264 10.5759 13.36284 9.17396 14.0916C7.53131 14.94552 5.92151 16.476 4.01352 19.28544C3.43438 20.13828 1.97237 19.80468 2.00503 18.63948C2.11673 14.65452 4.06847 11.71868 6.63397 9.80581C8.86255 8.14417 11.56888 7.23862 14.00004 7.04168V4.60406Z"
     />
   </svg>
 );
diff --git a/packages/ui/src/components/verse-action-popover.tsx b/packages/ui/src/components/verse-action-popover.tsx
index 95197a9e..0d6b5a76 100644
--- a/packages/ui/src/components/verse-action-popover.tsx
+++ b/packages/ui/src/components/verse-action-popover.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import i18n from '@/i18n';
 import { cn } from '../lib/utils';
 import { BoxStackIcon } from './icons/box-stack';
-import { BoxArrowUpIcon } from './icons/box-arrow-up';
+import { Share } from './icons/share';
 import { CheckIcon } from './icons/check';
 import { buildVerseActionSwatches } from '@/lib/highlight-colors';
 import { hexToRgba, HIGHLIGHT_FILL_OPACITY_DARK, isDarkHighlightHex } from './verse';
@@ -439,7 +439,7 @@ export const VerseActionPopover: FC<VerseActionPopoverProps> = ({
               onClick={onCopy}
             />
             <ActionButton
-              icon={<BoxArrowUpIcon className="yv:size-5" />}
+              icon={<Share className="yv:size-5" />}
               label={t('share')}
               onClick={onShare}
             />