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
2 years ago · c8bc3ce6c6
9 changed files with 23 additions and 47 deletions
--- a/.dumi/pages/index/components/BannerRecommends.tsx
+++ b/.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>
--- a/.dumi/pages/index/components/Theme/index.tsx
+++ b/.dumi/pages/index/components/Theme/index.tsx
@ -114,7 +114,7 @@ const useStyle = () => {
    `,

    menu: css`
-      margin-left: auto;
+      margin-inline-start: auto;
    `,

    darkSideMenu: css``,
--- a/.dumi/theme/common/styles/Reset.tsx
+++ b/.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')
--- a/.dumi/theme/locales/en-US.json
+++ b/.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",
--- a/.dumi/theme/locales/zh-CN.json
+++ b/.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": "加入我们",
--- a/.dumi/theme/slots/Footer/index.tsx
+++ b/.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: (
-            <img
-              src="https://gw.alipayobjects.com/zos/antfincdn/v2%24rh7lqpu/82f338dd-b0a6-41bc-9a86-58aaa9df217b.png"
-              alt="Egg"
-            />
-          ),
+          icon: <img src="https://www.eggjs.org/logo.svg" alt="Egg" />,
          title: 'Egg',
          url: 'https://eggjs.org',
          description: <FormattedMessage id="app.footer.egg.slogan" />,
--- a/.dumi/theme/slots/Header/Logo.tsx
+++ b/.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-left: 0;
+        padding-inline-start: 0;
+        padding-inline-end: 0;
      }
    `,
  };
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.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;
-        }
-      }
-
-      ${token.antCls}-row-rtl & {
-        > * {
-          &:last-child {
-            margin-right: 12px;
-            margin-left: 40px;
-          }
+          margin-inline-end: 40px;
        }
      }
    `,
--- a/package.json
+++ b/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",