improve footer style

site/theme/static/footer.less

@@ -1,12 +1,12 @@
 @import './colors';
 
-@padding-space: 114px;
+@padding-space: 144px;
 
 footer.dark {
   background-color: #000;
   color: rgba(255, 255, 255, 0.65);
   a {
-    color: #fff;
+    color: rgba(255, 255, 255, 0.9);
   }
   h2 {
     color: rgba(255, 255, 255, 1);
@@ -23,7 +23,7 @@ footer.dark {
 footer {
   border-top: 1px solid @border-color;
   clear: both;
-  font-size: 12px;
+  font-size: 14px;
   background: #fff;
   position: relative;
   z-index: 100;
@@ -35,10 +35,15 @@ footer {
       display: inline-block;
       text-align: left;
       > h2 {
-        font-size: 14px;
+        font-size: 16px;
         margin: 0 auto 24px;
         font-weight: 500;
         position: relative;
+
+        > .title-icon {
+          width: 27px;
+          margin-right: 16px;
+        }
         > .anticon {
           font-size: 16px;
           position: absolute;
@@ -54,14 +59,14 @@ footer {
   }
   .footer-wrap {
     position: relative;
-    padding: 86px @padding-space 70px @padding-space;
+    padding: 86px @padding-space 93px @padding-space;
   }
   .bottom-bar {
     border-top: 1px solid @border-color;
     text-align: right;
-    padding: 20px @padding-space;
+    padding: 16px @padding-space;
     margin: 0;
-    line-height: 24px;
+    line-height: 32px;
     a {
       color: rgba(255, 255, 255, 0.65);
       &:hover {
@@ -70,8 +75,6 @@ footer {
     }
     .translate-button {
       text-align: left;
-      width: 200px;
-      margin: 0 auto;
     }
   }
 }

site/theme/template/Color/ColorPicker.jsx

@@ -46,15 +46,15 @@ export default class ColorPicker extends Component {
 
     const styles = {
       color: {
-        width: small ? '60px' : '120px',
-        height: small ? '12px' : '24px',
+        width: small ? '80px' : '120px',
+        height: small ? '16px' : '24px',
         borderRadius: '2px',
         background: this.state.color,
       },
       swatch: {
-        padding: '5px',
+        padding: '4px',
         background: '#fff',
-        borderRadius: '1px',
+        borderRadius: '2px',
         boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
         display: 'inline-block',
         cursor: 'pointer',

site/theme/template/Home/index.jsx

@@ -101,16 +101,6 @@ function getStyle() {
       border-left-color: rgba(235, 237, 238, .5);
       transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
     }
-    #footer {
-      background: #000;
-    }
-    #footer,
-    #footer h2 {
-      color: #999;
-    }
-    #footer a {
-      color: #eee;
-    }
   `;
 }
 

site/theme/template/Layout/Footer.jsx

@@ -131,7 +131,7 @@ class Footer extends React.Component {
                     <FormattedMessage id="app.footer.chinamirror" />
                   </a>
                 </div>
-                <div style={{ marginTop: 12 }}>
+                <div style={{ marginTop: 16 }}>
                   <ColorPicker
                     type="sketch"
                     small
@@ -236,6 +236,7 @@ class Footer extends React.Component {
             <Col lg={6} sm={24} xs={24}>
               <div className="footer-center">
                 <h2>
+                  <img className="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="" />
                   <FormattedMessage id="app.footer.more-product" />
                 </h2>
                 <div>
@@ -258,14 +259,14 @@ class Footer extends React.Component {
           </Row>
         </div>
         <Row className="bottom-bar">
-          <Col lg={6} sm={24}>
+          <Col lg={4} sm={24}>
             <div className="translate-button">
-              <Button ghost size="small" onClick={this.handleLangChange}>
+              <Button ghost onClick={this.handleLangChange}>
                 <FormattedMessage id="app.header.lang" />
               </Button>
             </div>
           </Col>
-          <Col lg={18} sm={24}>
+          <Col lg={20} sm={24}>
             <span
               style={{ lineHeight: '16px', paddingRight: 12, marginRight: 11, borderRight: '1px solid rgba(255, 255, 255, 0.55)' }}
             >

site/theme/zh-CN.js

@@ -65,7 +65,7 @@ module.exports = {
     'app.footer.privacy': '隐私权政策',
     'app.footer.commitment': '权益保障承诺书',
     'app.footer.company': '蚂蚁金融服务集团',
-    'app.footer.ant-design': '蚂蚁 UI 设计体系',
+    'app.footer.ant-design': '蚂蚁 UI 体系',
     'app.publish.title': 'antd@2.0.0 发布！',
     'app.publish.greeting': '你好，',
     'app.publish.intro': ' 已正式发布，欢迎升级。',