update layout to new design

.roadhogrc

@@ -21,6 +21,9 @@
     "font-size-base": "14px",
     "badge-font-size": "12px",
     "btn-font-size-lg": "@font-size-base",
+    "@menu-dark-bg": "#000B14",
+    "@menu-dark-submenu-bg": "#00182E",
+    "@layout-sider-background": "#000B14",
     "layout-body-background": "#f5f5f5"
   }
 }

mock/utils.js

@@ -1,5 +1,5 @@
 export const imgMap = {
-  user: 'https://gw.alipayobjects.com/zos/rmsportal/YdMCpIJULitXfqHCFPbF.png',
+  user: 'https://gw.alipayobjects.com/zos/rmsportal/UjusLxePxWGkttaqqmUI.png',
   a: 'https://gw.alipayobjects.com/zos/rmsportal/ZrkcSjizAKNWwJTwcadT.png',
   b: 'https://gw.alipayobjects.com/zos/rmsportal/KYlwHMeomKQbhJDRUVvt.png',
   c: 'https://gw.alipayobjects.com/zos/rmsportal/gabvleTstEvzkbQRfjxu.png',

src/components/HeaderSearch/index.less

@@ -1,3 +1,5 @@
+@import "~antd/lib/style/themes/default.less";
+
 .input {
   transition: all .3s;
   width: 0;
@@ -10,15 +12,12 @@
     border: 0;
     padding-left: 0;
     padding-right: 0;
-    color: #fff;
-    &::placeholder {
-      color: rgba(255, 255, 255, .5);
-    }
+    box-shadow: none !important;
   }
   &,
   &:hover,
   &:focus {
-    border-bottom: 1px solid #fff;
+    border-bottom: 1px solid @border-color-base;
   }
   &.show {
     width: 210px;

src/layouts/BasicLayout.js

@@ -66,10 +66,12 @@ class BasicLayout extends React.PureComponent {
         return (
           <SubMenu
             title={
-              <span>
-                <Icon type={item.icon} />
-                <span>{item.name}</span>
-              </span>
+              item.icon ? (
+                <span>
+                  <Icon type={item.icon} />
+                  <span>{item.name}</span>
+                </span>
+              ) : item.name
             }
             key={item.key || item.path}
           >
@@ -80,7 +82,7 @@ class BasicLayout extends React.PureComponent {
       return (
         <Menu.Item key={item.key || item.path}>
           <Link to={itemPath}>
-            <Icon type={item.icon} />
+            {item.icon && <Icon type={item.icon} />}
             <span>{item.name}</span>
           </Link>
         </Menu.Item>

src/layouts/BasicLayout.less

@@ -1,9 +1,9 @@
 @import "~antd/lib/style/themes/default.less";
 
 .header {
-  background: @primary-color;
   padding: 0 16px 0 0;
-  color: #fff;
+  background: #fff;
+  border-bottom: 1px solid @border-color-split;
 }
 
 .logo {
@@ -12,7 +12,7 @@
   line-height: 64px;
   padding-left: 32px;
   transition: all .3s;
-  background: @primary-color;
+  background: #00284D;
   overflow: hidden;
   img {
     display: inline-block;
@@ -42,10 +42,9 @@
   line-height: 64px;
   cursor: pointer;
   transition: all .3s;
-  color: #fff;
   padding: 0 28px;
   &:hover {
-    background: @primary-7;
+    background: rgba(0, 0, 0, .04);
   }
 }
 
@@ -64,7 +63,7 @@
     }
     &:global(.ant-popover-open),
     &:hover {
-      background: @primary-7;
+      background: rgba(0, 0, 0, .04);
     }
   }
   .search:hover {