Skip to content

fix(ui): use curved arrow for share icon #332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bmanquen merged 1 commit into from
Aug 13, 2026
Merged

fix(ui): use curved arrow for share icon #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/eighty-donkeys-brake.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
23 changes: 0 additions & 23 deletions packages/ui/src/components/icons/box-arrow-up.tsx
View file
Open in desktop

This file was deleted.

8 changes: 3 additions & 5 deletions packages/ui/src/components/icons/share.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Comment thread
bmanquen marked this conversation as resolved.
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>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/verse-action-popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -439,7 +439,7 @@ export const VerseActionPopover: FC<VerseActionPopoverProps> = ({
onClick={onCopy}
/>
<ActionButton
icon={<BoxArrowUpIcon className="yv:size-5" />}
icon={<Share className="yv:size-5" />}
Comment thread
bmanquen marked this conversation as resolved.
label={t('share')}
onClick={onShare}
/>
Expand Down
Loading