Use device mode specific share icon

Resolves #1325

src/core/App.tsx

@@ -1,6 +1,10 @@
 import { IonApp, setupIonicReact } from "@ionic/react";
 import { StoreProvider } from "../store";
-import { getAndroidNavMode, isInstalled } from "../helpers/device";
+import {
+  getAndroidNavMode,
+  getDeviceMode,
+  isInstalled,
+} from "../helpers/device";
 import TabbedRoutes from "../routes/TabbedRoutes";
 import Auth from "./Auth";
 import { AppContextProvider } from "../features/auth/AppContext";
@@ -9,7 +13,6 @@ import BeforeInstallPromptProvider from "../features/pwa/BeforeInstallPromptProv
 import { UpdateContextProvider } from "../routes/pages/settings/update/UpdateContext";
 import GlobalStyles from "./GlobalStyles";
 import ConfigProvider from "../services/app";
-import { getDeviceMode } from "../features/settings/settingsSlice";
 import { TabContextProvider } from "./TabContext";
 import { NavModes } from "capacitor-android-nav-mode";
 import { TextRecoveryStartupPrompt } from "../helpers/useTextRecovery";

src/features/comment/useCommentActions.ts

@@ -9,7 +9,6 @@ import {
   flagOutline,
   pencilOutline,
   personOutline,
-  shareOutline,
   textOutline,
   trashOutline,
 } from "ionicons/icons";
@@ -45,6 +44,7 @@ import { isDownvoteEnabledSelector } from "../auth/siteSlice";
 import { compact } from "lodash";
 import { isStubComment } from "./CommentHeader";
 import { getVoteErrorMessage } from "../../helpers/lemmyErrors";
+import { getShareIcon } from "../../helpers/device";
 
 export interface CommentActionsProps {
   comment: CommentView | PersonMentionView | CommentReplyView;
@@ -262,7 +262,7 @@ export default function useCommentActions({
         },
         {
           text: "Share",
-          icon: shareOutline,
+          icon: getShareIcon(),
           handler: () => {
             share(comment);
           },

src/features/community/MoreActions.tsx

@@ -8,7 +8,6 @@ import {
   removeCircleOutline,
   tabletPortraitOutline,
   eyeOffOutline,
-  shareOutline,
 } from "ionicons/icons";
 import useHidePosts from "../feed/useHidePosts";
 import useCommunityActions from "./useCommunityActions";
@@ -17,6 +16,7 @@ import { useAppSelector } from "../../store";
 import { compact } from "lodash";
 import HeaderEllipsisIcon from "../shared/HeaderEllipsisIcon";
 import { useBuildTogglePostAppearanceButton } from "../feed/SpecialFeedMoreActions";
+import { getShareIcon } from "../../helpers/device";
 
 interface MoreActionsProps {
   community: CommunityView | undefined;
@@ -95,7 +95,7 @@ function MoreActionsWithCommunity({ community }: MoreActionsActionSheetProps) {
         buildTogglePostAppearanceButton(),
         {
           text: "Share",
-          icon: shareOutline,
+          icon: getShareIcon(),
           handler: () => {
             share();
           },

src/features/feed/SpecialFeedMoreActions.tsx

@@ -1,10 +1,5 @@
 import { IonButton, useIonActionSheet } from "@ionic/react";
-import {
-  eyeOffOutline,
-  imageOutline,
-  listOutline,
-  shareOutline,
-} from "ionicons/icons";
+import { eyeOffOutline, imageOutline, listOutline } from "ionicons/icons";
 import useHidePosts from "./useHidePosts";
 import HeaderEllipsisIcon from "../shared/HeaderEllipsisIcon";
 import { Share } from "@capacitor/share";
@@ -16,6 +11,7 @@ import {
   usePostAppearance,
   useSetPostAppearance,
 } from "../post/appearance/PostAppearanceProvider";
+import { getShareIcon } from "../../helpers/device";
 
 interface SpecialFeedMoreActionsProps {
   type: ListingType;
@@ -42,7 +38,7 @@ export default function SpecialFeedMoreActions({
         buildTogglePostAppearanceButton(),
         {
           text: "Share",
-          icon: shareOutline,
+          icon: getShareIcon(),
           handler: () => {
             const url = urlSelector(store.getState());
 

src/features/media/gallery/GalleryMoreActions.tsx

@@ -7,7 +7,6 @@ import {
   ellipsisHorizontal,
   peopleOutline,
   personOutline,
-  shareOutline,
 } from "ionicons/icons";
 import { useBuildGeneralBrowseLink } from "../../../helpers/routes";
 import { getHandle } from "../../../helpers/lemmy";
@@ -24,7 +23,7 @@ import {
 } from "../../../helpers/toastMessages";
 import { ActionButton } from "../../post/actions/ActionButton";
 import { StashMedia } from "capacitor-stash-media";
-import { isNative } from "../../../helpers/device";
+import { getShareIcon, isNative } from "../../../helpers/device";
 import { Share } from "@capacitor/share";
 import useAppToast from "../../../helpers/useAppToast";
 import { useOptimizedIonRouter } from "../../../helpers/useOptimizedIonRouter";
@@ -61,7 +60,7 @@ export default function GalleryMoreActions({
       buttons: compact([
         {
           text: "Share",
-          icon: shareOutline,
+          icon: getShareIcon(),
           handler: () => {
             (async () => {
               if (!isNative()) {

src/features/media/gallery/GalleryPostActions.tsx

@@ -1,7 +1,7 @@
 import { IonIcon } from "@ionic/react";
 import { VoteButton } from "../../post/shared/VoteButton";
 import { PostView } from "lemmy-js-client";
-import { chatbubbleOutline, shareOutline } from "ionicons/icons";
+import { chatbubbleOutline } from "ionicons/icons";
 import { useAppSelector } from "../../../store";
 import { useBuildGeneralBrowseLink } from "../../../helpers/routes";
 import MoreActions from "../../post/shared/MoreActions";
@@ -13,7 +13,7 @@ import { useLocation } from "react-router";
 import React, { useContext } from "react";
 import { GalleryContext } from "./GalleryProvider";
 import { OVoteDisplayMode } from "../../../services/db";
-import { isNative } from "../../../helpers/device";
+import { getShareIcon, isNative } from "../../../helpers/device";
 import GalleryMoreActions from "./GalleryMoreActions";
 import { StashMedia } from "capacitor-stash-media";
 import { Share } from "@capacitor/share";
@@ -116,7 +116,7 @@ export default function GalleryPostActions({
             <Amount>{post.counts.comments}</Amount>
           </Section>
         </div>
-        <IonIcon icon={shareOutline} onClick={shareImage} />
+        <IonIcon icon={getShareIcon()} onClick={shareImage} />
         {isNative() ? (
           <GalleryMoreActions post={post} imgSrc={imgSrc} />
         ) : (

src/features/post/actions/PostActions.tsx

@@ -1,11 +1,12 @@
 import { styled } from "@linaria/react";
 import { IonIcon } from "@ionic/react";
-import { arrowUndoOutline, linkOutline, shareOutline } from "ionicons/icons";
+import { arrowUndoOutline, linkOutline } from "ionicons/icons";
 import { PostView } from "lemmy-js-client";
 import { VoteButton } from "../shared/VoteButton";
 import { ActionButton } from "./ActionButton";
 import { SaveButton } from "../shared/SaveButton";
 import { share } from "../../../helpers/lemmy";
+import { getShareIcon } from "../../../helpers/device";
 
 const Container = styled.div`
   display: flex;
@@ -42,7 +43,7 @@ export default function PostActions({ post, onReply }: PostActionsProps) {
         <IonIcon icon={arrowUndoOutline} />
       </ActionButton>
       <ActionButton>
-        <IonIcon icon={shareOutline} onClick={() => share(post.post)} />
+        <IonIcon icon={getShareIcon()} onClick={() => share(post.post)} />
       </ActionButton>
     </Container>
   );

src/features/post/shared/usePostActions.tsx

@@ -13,7 +13,6 @@ import {
   peopleOutline,
   personOutline,
   repeatOutline,
-  shareOutline,
   textOutline,
   trashOutline,
 } from "ionicons/icons";
@@ -50,6 +49,7 @@ import { resolveObject } from "../../resolve/resolveSlice";
 import { compact } from "lodash";
 import { InFeedContext } from "../../feed/Feed";
 import { getVoteErrorMessage } from "../../../helpers/lemmyErrors";
+import { getShareIcon } from "../../../helpers/device";
 
 export default function usePostActions(post: PostView) {
   const inFeed = useContext(InFeedContext);
@@ -248,7 +248,7 @@ export default function usePostActions(post: PostView) {
         {
           text: "Share",
           data: "share",
-          icon: shareOutline,
+          icon: getShareIcon(),
           handler: () => {
             share(post.post);
           },

src/features/settings/general/other/backup/helpers.ts

@@ -1,8 +1,7 @@
 import { pickBy, without } from "lodash";
 import { db } from "../../../../../services/db";
 import { getAllObjectValuesDeep } from "../../../../../helpers/object";
-import { LOCALSTORAGE_KEYS } from "../../../settingsSlice";
-import { get, set } from "../../../storage";
+import { LOCALSTORAGE_KEYS, get, set } from "../../../storage";
 
 const BASE_BACKUP_JSON = {
   voyagerBackupVersion: 1,

src/features/settings/gestures/SwipeSettings.tsx

@@ -45,14 +45,13 @@ import {
   arrowDownOutline,
   arrowUndoOutline,
   arrowUpOutline,
-  shareOutline,
   bookmarkOutline,
   chevronCollapseOutline,
   eyeOffOutline,
   mailUnreadOutline,
   chevronDownOutline,
 } from "ionicons/icons";
-import { isNative } from "../../../helpers/device";
+import { getShareIcon, isNative } from "../../../helpers/device";
 
 export default function SwipeSettings() {
   const [open, setOpen] = useState(false);
@@ -180,7 +179,7 @@ const swipeIcons = {
   [OSwipeActionAll.CollapseToTop]: chevronCollapseOutline,
   [OSwipeActionAll.Collapse]: chevronDownOutline,
   [OSwipeActionAll.MarkUnread]: mailUnreadOutline,
-  [OSwipeActionAll.Share]: shareOutline,
+  [OSwipeActionAll.Share]: getShareIcon(),
 };
 
 interface SwipeListProps {

src/features/settings/settingsSlice.tsx

@@ -41,7 +41,7 @@ import {
   CommentsThemeType,
   VotesThemeType,
 } from "../../services/db";
-import { get, set } from "./storage";
+import { LOCALSTORAGE_KEYS, get, set } from "./storage";
 import { Mode } from "@ionic/core";
 import { SortType } from "lemmy-js-client";
 import { loggedInSelector } from "../auth/authSelectors";
@@ -141,20 +141,6 @@ interface SettingsState {
   };
 }
 
-export const LOCALSTORAGE_KEYS = {
-  FONT: {
-    FONT_SIZE_MULTIPLIER: "appearance--font-size-multiplier",
-    USE_SYSTEM: "appearance--font-use-system",
-  },
-  DARK: {
-    USE_SYSTEM: "appearance--dark-use-system",
-    USER_MODE: "appearance--dark-user-mode",
-    PURE_BLACK: "appearance--pure-black",
-  },
-  DEVICE_MODE: "appearance--device-mode",
-  THEME: "appearance--theme",
-} as const;
-
 export const initialState: SettingsState = {
   ready: false,
   databaseError: undefined,
@@ -948,8 +934,3 @@ export const {
 } = appearanceSlice.actions;
 
 export default appearanceSlice.reducer;
-
-export function getDeviceMode(): Mode {
-  // md mode is beta, so default ios for all devices
-  return get(LOCALSTORAGE_KEYS.DEVICE_MODE) ?? "ios";
-}

src/features/settings/storage.ts

@@ -1,3 +1,17 @@
+export const LOCALSTORAGE_KEYS = {
+  FONT: {
+    FONT_SIZE_MULTIPLIER: "appearance--font-size-multiplier",
+    USE_SYSTEM: "appearance--font-use-system",
+  },
+  DARK: {
+    USE_SYSTEM: "appearance--dark-use-system",
+    USER_MODE: "appearance--dark-user-mode",
+    PURE_BLACK: "appearance--pure-black",
+  },
+  DEVICE_MODE: "appearance--device-mode",
+  THEME: "appearance--theme",
+} as const;
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function get(key: string): any {
   const data = localStorage.getItem(key);

src/helpers/device.ts

@@ -2,6 +2,14 @@ import UAParser from "ua-parser-js";
 import { Capacitor } from "@capacitor/core";
 import { NavMode, NavModes } from "capacitor-android-nav-mode";
 import { memoize } from "lodash";
+import { shareOutline, shareSocialOutline } from "ionicons/icons";
+import { Mode } from "@ionic/core";
+import { LOCALSTORAGE_KEYS, get } from "../features/settings/storage";
+
+export function getDeviceMode(): Mode {
+  // md mode is beta, so default ios for all devices
+  return get(LOCALSTORAGE_KEYS.DEVICE_MODE) ?? "ios";
+}
 
 export const isNative = memoize(() => {
   return Capacitor.isNativePlatform();
@@ -64,6 +72,8 @@ export function getAndroidNavMode() {
   return promise;
 }
 
-export const isIosTheme = memoize(() =>
-  document.documentElement.classList.contains("ios"),
+export const isIosTheme = memoize(() => getDeviceMode() === "ios");
+
+export const getShareIcon = memoize(() =>
+  isIosTheme() ? shareOutline : shareSocialOutline,
 );

src/routes/pages/settings/InstallAppPage.tsx

@@ -11,10 +11,10 @@ import {
   addOutline,
   checkmarkCircleOutline,
   chevronBack,
-  shareOutline,
 } from "ionicons/icons";
 import AppContent from "../../../features/shared/AppContent";
 import {
+  getShareIcon,
   isAndroid,
   isAppleDeviceInstallable,
   isInstallable,
@@ -201,7 +201,7 @@ export default function InstallAppPage() {
           {showInstallwebAppDirections ? (
             <ol>
               <li>
-                Tap <IonIcon icon={shareOutline} color="primary" /> from the
+                Tap <IonIcon icon={getShareIcon()} color="primary" /> from the
                 Safari tab bar
               </li>
               <li>