site: fix home page rtl style and footer icons (#40003)

* docs: fix home page rtl style

* style: fix rtl style

* Update package.json

* style: fix card text align

* style: update footer icons

.dumi/pages/index/components/BannerRecommends.tsx

@@ -76,7 +76,7 @@ const RecommendItem = ({ extra, index, icons, itemCss }: RecommendItemProps) =>
       <Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
         {extra.description}
       </Typography.Paragraph>
-      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <Typography.Text>{extra.date}</Typography.Text>
         {icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
       </div>

.dumi/pages/index/components/Theme/index.tsx

@@ -114,7 +114,7 @@ const useStyle = () => {
     `,
 
     menu: css`
-      margin-left: auto;
+      margin-inline-start: auto;
     `,
 
     darkSideMenu: css``,

.dumi/theme/common/styles/Reset.tsx

@@ -10,7 +10,7 @@ export default () => {
       styles={css`
         @font-face {
           font-weight: normal;
-          font-family: PuHuiTi;
+          font-family: AlibabaPuHuiTi;
           src: url('//at.alicdn.com/t/webfont_6e11e43nfj.woff2') format('woff2'),
             url('//at.alicdn.com/t/webfont_6e11e43nfj.woff') format('woff'),
             /* chrome、firefox */ url('//at.alicdn.com/t/webfont_6e11e43nfj.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
@@ -19,7 +19,7 @@ export default () => {
 
         @font-face {
           font-weight: bold;
-          font-family: PuHuiTi;
+          font-family: AlibabaPuHuiTi;
           src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),
             url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),
             /* chrome、firefox */ url('//at.alicdn.com/t/webfont_exesdog9toj.ttf')

.dumi/theme/locales/en-US.json

@@ -78,8 +78,6 @@
   "app.footer.data-vis": "Data Visualization",
   "app.footer.eggjs": "Enterprise Node Framework",
   "app.footer.motion": "Motion Solution",
-  "app.footer.antd-library": "Axure library",
-  "app.footer.antux": "Sitemap Template",
   "app.footer.community": "Community",
   "app.footer.help": "Help",
   "app.footer.change-log": "Change Log",

.dumi/theme/locales/zh-CN.json

@@ -77,8 +77,6 @@
   "app.footer.data-vis": "数据可视化",
   "app.footer.eggjs": "企业级 Node 开发框架",
   "app.footer.motion": "设计动效",
-  "app.footer.antd-library": "Axure 部件库",
-  "app.footer.antux": "页面逻辑素材",
   "app.footer.community": "社区",
   "app.footer.help": "帮助",
   "app.footer.change-log": "更新日志",
@@ -89,7 +87,7 @@
   "app.footer.segmentfault": "SegmentFault",
   "app.footer.discussions": "讨论区",
   "app.footer.bug-report": "报告 Bug",
-  "app.footer.issues": "讨论列表",
+  "app.footer.issues": "议题",
   "app.footer.version": "文档版本：",
   "app.footer.author": "蚂蚁集团体验技术部出品 @ XTech",
   "app.footer.work_with_us": "加入我们",

.dumi/theme/slots/Footer/index.tsx

@@ -10,11 +10,11 @@ import {
   HistoryOutlined,
   IssuesCloseOutlined,
   MediumOutlined,
-  ProfileOutlined,
   QuestionCircleOutlined,
   TwitterOutlined,
   UsergroupAddOutlined,
   ZhihuOutlined,
+  MessageOutlined,
 } from '@ant-design/icons';
 import { css } from '@emotion/react';
 import { TinyColor } from '@ctrl/tinycolor';
@@ -67,6 +67,10 @@ const useStyle = () => {
         }
       }
 
+      .rc-footer-item-icon {
+        top: -1.5px;
+      }
+
       .rc-footer-container {
         max-width: 1208px;
         margin-inline: auto;
@@ -252,7 +256,7 @@ const Footer = () => {
           LinkComponent: Link,
         },
         {
-          icon: <ProfileOutlined />,
+          icon: <QuestionCircleOutlined />,
           title: <FormattedMessage id="app.footer.faq" />,
           url: getLink('/docs/react/faq'),
           LinkComponent: Link,
@@ -270,7 +274,7 @@ const Footer = () => {
           openExternal: true,
         },
         {
-          icon: <QuestionCircleOutlined />,
+          icon: <MessageOutlined />,
           title: <FormattedMessage id="app.footer.discussions" />,
           url: 'https://github.com/ant-design/ant-design/discussions',
           openExternal: true,
@@ -324,12 +328,7 @@ const Footer = () => {
           openExternal: true,
         },
         {
-          icon: (
+          icon: <img src="https://www.eggjs.org/logo.svg" alt="Egg" />,
-            <img
-              src="https://gw.alipayobjects.com/zos/antfincdn/v2%24rh7lqpu/82f338dd-b0a6-41bc-9a86-58aaa9df217b.png"
-              alt="Egg"
-            />
-          ),
           title: 'Egg',
           url: 'https://eggjs.org',
           description: <FormattedMessage id="app.footer.egg.slogan" />,

.dumi/theme/slots/Header/Logo.tsx

@@ -7,17 +7,17 @@ import useSiteToken from '../../../hooks/useSiteToken';
 const useStyle = () => {
   const { token } = useSiteToken();
 
-  const { antCls, headerHeight, colorTextHeading, fontFamily, mobileMaxWidth } = token;
+  const { headerHeight, colorTextHeading, fontFamily, mobileMaxWidth } = token;
 
   return {
     logo: css`
       height: ${headerHeight}px;
-      padding-left: 40px;
+      padding-inline-start: 40px;
       overflow: hidden;
       color: ${colorTextHeading};
       font-weight: bold;
       font-size: 18px;
-      font-family: PuHuiTi, ${fontFamily}, sans-serif;
+      font-family: AlibabaPuHuiTi, ${fontFamily}, sans-serif;
       line-height: ${headerHeight}px;
       letter-spacing: -0.18px;
       white-space: nowrap;
@@ -29,26 +29,15 @@ const useStyle = () => {
         color: ${colorTextHeading};
       }
 
-      ${antCls}-row-rtl & {
-        float: right;
-        padding-right: 40px;
-        padding-left: 0;
-      }
-
       img {
         height: 32px;
-        margin-right: 12px;
+        margin-inline-end: 12px;
         vertical-align: middle;
-
-        ${antCls}-row-rtl & {
-          margin-right: 0;
-          margin-left: 16px;
-        }
       }
 
       @media only screen and (max-width: ${mobileMaxWidth}px) {
-        padding-right: 0;
+        padding-inline-start: 0;
-        padding-left: 0;
+        padding-inline-end: 0;
       }
     `,
   };

.dumi/theme/slots/Header/index.tsx

@@ -102,19 +102,11 @@ const useStyle = () => {
 
       > * {
         flex: none;
-        margin: 0 12px 0 0;
+        margin: 0;
+        margin-inline-end: 12px;
 
         &:last-child {
-          margin-right: 40px;
+          margin-inline-end: 40px;
-        }
-      }
-
-      ${token.antCls}-row-rtl & {
-        > * {
-          &:last-child {
-            margin-right: 12px;
-            margin-left: 40px;
-          }
         }
       }
     `,

package.json

@@ -246,7 +246,7 @@
     "prismjs": "^1.29.0",
     "progress": "^2.0.3",
     "qs": "^6.10.1",
-    "rc-footer": "^0.6.6",
+    "rc-footer": "^0.6.8",
     "rc-tween-one": "^3.0.3",
     "rc-virtual-list": "^3.4.11",
     "react": "^18.0.0",