From 2aedc275d4274fff98b32660938395a1f80cd6ce Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Wed, 29 Nov 2017 00:08:48 +0800
Subject: [PATCH] improve footer style

---
 site/theme/static/footer.less             | 21 ++++++++++++---------
 site/theme/template/Color/ColorPicker.jsx |  8 ++++----
 site/theme/template/Home/index.jsx        | 10 ----------
 site/theme/template/Layout/Footer.jsx     |  9 +++++----
 site/theme/zh-CN.js                       |  2 +-
 5 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/site/theme/static/footer.less b/site/theme/static/footer.less
index 815fcac59d..978e2d0a16 100644
--- a/site/theme/static/footer.less
+++ b/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;
     }
   }
 }
diff --git a/site/theme/template/Color/ColorPicker.jsx b/site/theme/template/Color/ColorPicker.jsx
index 8c91869ff8..5aec75ccb5 100644
--- a/site/theme/template/Color/ColorPicker.jsx
+++ b/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',
diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx
index 7604ce3c3b..0508966220 100644
--- a/site/theme/template/Home/index.jsx
+++ b/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;
-    }
   `;
 }
 
diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.jsx
index 01f338efee..b3cb7186f5 100644
--- a/site/theme/template/Layout/Footer.jsx
+++ b/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)' }}
             >
diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js
index 3e70ff4e51..dd6714d573 100644
--- a/site/theme/zh-CN.js
+++ b/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': ' 已正式发布，欢迎升级。',