Fix Bug 65332

packages/common/components/Article/sub-components/article-apps.js

@@ -3,7 +3,6 @@ import MacOSReactSvgUrl from "PUBLIC_DIR/images/macOS.react.svg?url";
 import LinuxReactSvgUrl from "PUBLIC_DIR/images/linux.react.svg?url";
 import AndroidReactSvgUrl from "PUBLIC_DIR/images/android.react.svg?url";
 import IOSReactSvgUrl from "PUBLIC_DIR/images/iOS.react.svg?url";
-import IOSHoverReactSvgUrl from "PUBLIC_DIR/images/iOSHover.react.svg?url";
 
 import React from "react";
 import styled, { css } from "styled-components";
@@ -99,13 +98,12 @@ const ArticleApps = React.memo(({ theme, showText, withDevTools }) => {
           title={t("Translations:MobileAndroid")}
         />
         <IconButton
+          onClick={() => window.open(iosLink)}
           iconName={IOSReactSvgUrl}
-          iconHoverName={IOSHoverReactSvgUrl}
           size="32"
-          isFill={false}
+          isFill={true}
+          hoverColor={theme.filesArticleBody.downloadAppList.iosHoverColor}
           title={t("Translations:MobileIos")}
-          onMouseDown={() => window.open(iosLink)}
-          isClickable={true}
         />
       </div>
     </StyledArticleApps>

packages/components/themes/base.js

@@ -2067,11 +2067,12 @@ const Base = {
     fill: grayMain,
     expanderColor: "dimgray",
     downloadAppList: {
-      color: "#83888d",
+      color: "#CDCFD1",
       winHoverColor: "#3785D3",
       macHoverColor: "#000",
       linuxHoverColor: "#FFB800",
       androidHoverColor: "#9BD71C",
+      iosHoverColor: "#000",
     },
     thirdPartyList: {
       color: "#818b91",

packages/components/themes/dark.js

@@ -2063,11 +2063,12 @@ const Dark = {
     expanderColor: "#C4C4C4",
 
     downloadAppList: {
-      color: "#C4C4C4",
+      color: "#5C5C5C",
       winHoverColor: "#3785D3",
-      macHoverColor: "#000",
+      macHoverColor: "#fff",
       linuxHoverColor: "#FFB800",
       androidHoverColor: "#9BD71C",
+      iosHoverColor: "#fff",
     },
 
     thirdPartyList: {