site: update footer style

site/theme/en-US.js

@@ -32,15 +32,14 @@ module.exports = {
     'app.home.learn-more': 'Learn more',
     'app.home.sub-slogan': 'A Little Happiness in Hand',
     'app.home.vision': 'This is a design language dedicated to improve the user and design experience.',
-    'app.footer.repo': 'Repository',
+    'app.footer.repo': 'GitHub Repository',
     'app.footer.awesome': 'Awesome Ant Design',
-    'app.footer.customize-theme': 'Customize Theme',
+    'app.footer.primary-color-changed': 'Change primary color successfully!',
     'app.footer.scaffold': 'Scaffold',
     'app.footer.scaffolds': 'Scaffold Market',
     'app.footer.dev-tools': 'Developer Tools',
     'app.footer.dva': 'Framework',
-    'app.footer.links': 'Links',
-    'app.footer.mobile': 'Mobile UI',
+    'app.footer.resources': 'Resources',
     'app.footer.data-vis': 'Data Visualization',
     'app.footer.eggjs': 'Enterprise Node Framework',
     'app.footer.encloseio': 'Node.js Compiler',

site/theme/static/footer.less

@@ -16,7 +16,7 @@ footer {
       padding: 24px 2%;
       > h2 {
         font-size: 14px;
-        margin: 0 auto 12px;
+        margin: 0 auto 16px;
         font-weight: 500;
         position: relative;
         > .anticon {
@@ -28,7 +28,7 @@ footer {
         }
       }
       > div {
-        margin: 6px 0;
+        margin-bottom: 8px;
       }
     }
   }

site/theme/template/Color/ColorPicker.jsx

@@ -45,8 +45,8 @@ export default class ColorPicker extends Component {
 
     const styles = {
       color: {
-        width: small ? '80px' : '120px',
-        height: small ? '18px' : '24px',
+        width: small ? '60px' : '120px',
+        height: small ? '12px' : '24px',
         borderRadius: '2px',
         background: this.state.color,
       },
@@ -79,17 +79,19 @@ export default class ColorPicker extends Component {
         <div style={styles.swatch} onClick={this.handleClick}>
           <div style={styles.color} />
         </div>
-        {this.state.displayColorPicker ? <div style={styles.popover}>
-          <div style={styles.cover} onClick={this.handleClose} />
-          <div style={styles.wrapper}>
-            <Picker
-              {...this.props}
-              color={this.state.color}
-              onChange={this.handleChange}
-              onChangeComplete={this.handleChangeComplete}
-            />
+        {this.state.displayColorPicker ? (
+          <div style={styles.popover}>
+            <div style={styles.cover} onClick={this.handleClose} />
+            <div style={styles.wrapper}>
+              <Picker
+                {...this.props}
+                color={this.state.color}
+                onChange={this.handleChange}
+                onChangeComplete={this.handleChangeComplete}
+              />
+            </div>
           </div>
-        </div> : null}
+        ) : null}
       </div>
     );
   }

site/theme/template/Layout/Footer.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Modal, Icon } from 'antd';
+import { Modal, Icon, message } from 'antd';
 import reqwest from 'reqwest';
 import { isLocalStorageNameSupported } from '../utils';
 import ColorPicker from '../Color/ColorPicker';
@@ -32,6 +32,7 @@ class Footer extends React.Component {
   }
 
   handleColorChange = (color) => {
+    const { messages } = this.props.intl;
     reqwest({
       url: 'https://ant-design-theme.now.sh/compile',
       method: 'post',
@@ -41,6 +42,7 @@ class Footer extends React.Component {
         },
       },
     }).then((data) => {
+      message.success(messages['app.footer.primary-color-changed']);
       this.setState({ color });
       const head = document.querySelector('head');
       const style = document.createElement('style');
@@ -78,23 +80,26 @@ class Footer extends React.Component {
       <footer id="footer">
         <ul>
           <li>
-            <h2><Icon type="github" /> GitHub</h2>
+            <h2><Icon type="github" /> Ant Design</h2>
             <div>
               <a target="_blank " href="https://github.com/ant-design/ant-design">
-                <FormattedMessage id="app.footer.repo" />
+                GitHub
               </a>
             </div>
             <div>
-              <a target="_blank " href="https://ant.design/docs/react/customize-theme">
-                <FormattedMessage id="app.footer.customize-theme" />
-              </a>
+              <a href="http://mobile.ant.design">Ant Design Mobile</a>
+            </div>
+            <div>
+              <a href="http://ng.ant.design">NG-ZORRO</a>
+              <span> - </span>
+              Ant Design of Angular
             </div>
             <div>
               <a target="_blank " href="https://github.com/websemantics/awesome-ant-design">
                 <FormattedMessage id="app.footer.awesome" />
               </a>
             </div>
-            <div>
+            <div style={{ marginTop: 12 }}>
               <ColorPicker
                 type="sketch"
                 small
@@ -108,24 +113,13 @@ class Footer extends React.Component {
                   '#7265e6',
                   '#ffbf00',
                   '#00a2ae',
-                  '#bfbfbf',
                 ]}
                 onChangeComplete={this.handleColorChange}
               />
             </div>
           </li>
           <li>
-            <h2><Icon type="link" /> <FormattedMessage id="app.footer.links" /></h2>
-            <div>
-              <a href="http://mobile.ant.design">Ant Design Mobile</a>
-              <span> - </span>
-              <FormattedMessage id="app.footer.mobile" />
-            </div>
-            <div>
-              <a href="http://ng.ant.design">NG-ZORRO</a>
-              <span> - </span>
-              Ant Design of Angular
-            </div>
+            <h2><Icon type="link" /> <FormattedMessage id="app.footer.resources" /></h2>
             <div>
               <a href="http://scaffold.ant.design">Scaffolds</a>
               <span> - </span>

site/theme/zh-CN.js

@@ -32,15 +32,14 @@ module.exports = {
     'app.home.learn-more': '了解更多',
     'app.home.sub-slogan': '微小·确定·幸福',
     'app.home.vision': '这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。',
-    'app.footer.repo': '源码仓库',
+    'app.footer.repo': 'GitHub 仓库',
     'app.footer.awesome': 'Awesome Ant Design',
-    'app.footer.customize-theme': '定制主题',
+    'app.footer.primary-color-changed': '修改主题色成功！',
     'app.footer.scaffold': '脚手架',
     'app.footer.scaffolds': '脚手架市场',
     'app.footer.dev-tools': '开发工具',
     'app.footer.dva': '应用框架',
-    'app.footer.links': '相关站点',
-    'app.footer.mobile': '移动版',
+    'app.footer.resources': '资源链接',
     'app.footer.data-vis': '数据可视化',
     'app.footer.eggjs': '企业级 Node 开发框架',
     'app.footer.encloseio': 'Node.js 编译器',