wip

Author: mydearxym

containers/Header/index.js

@@ -7,6 +7,7 @@
 import React from 'react'
 import { inject, observer } from 'mobx-react'
 import keydown from 'react-keydown'
+import { Row, Col } from 'antd'
 
 // import Link from 'next/link'
 import { Button } from '../../components'
@@ -25,6 +26,7 @@ import {
   Search,
   Notification,
   HeaderIcon,
+  StateIcon,
   User,
 } from './styles'
 
@@ -59,7 +61,12 @@ class HeaderContainer extends React.Component {
             ghost
             onClick={logic.openPreview.bind(this, 'mst-state')}
           >
-            state
+            <Row>
+              <Col span={9}>
+                <StateIcon path={getSVGIconPath('header_state')} />
+              </Col>
+              <Col span={12}>State</Col>
+            </Row>
           </Button>
         </Admin>
         <Search onClick={logic.openDoraemon}>

containers/Header/styles/index.js

@@ -16,11 +16,15 @@ export const Router = styled.div`
 `
 
 export const Admin = styled.div`
-  margin-right: 10px;
+  margin-right: 25px;
   font-size: xx-small;
-  margin-top: 0.8vh;
+  position: relative;
+  margin-top: 1px;
   &:after {
     content: '⁝';
+    position: absolute;
+    top: 12px;
+    font-size: large;
     color: ${theme('header.fg')};
     margin-left: 5px;
   }
@@ -35,6 +39,14 @@ export const Notification = styled.div`
   margin-top: 0.8vh;
 `
 
+export const StateIcon = styled(ReactSVG)`
+  width: 12px;
+  height: 100%;
+  cursor: pointer;
+  margin-right: 10px;
+  margin-top: 1px;
+`
+
 export const HeaderIcon = styled(ReactSVG)`
   fill: ${theme('header.fg')};
   width: 20px;