theme fix

Author: mydearxym

components/Button/index.js

@@ -4,17 +4,20 @@
  *
  */
 
-import React from 'react'
-import PropTypes from 'prop-types'
+import { Button as MButton } from 'antd'
 
-import MButton from './styles'
+export default MButton
 
+// import React from 'react'
+// import PropTypes from 'prop-types'
+
+// import MButton from './styles'
+
+/*
 // import styled from 'styled-components'
 
 import { makeDebugger } from '../../utils/functions'
-/* eslint-disable no-unused-vars */
 const debug = makeDebugger('c:Button:index')
-/* eslint-enable no-unused-vars */
 
 const Button = ({ children, size }) => {
   return <MButton size={size}>{children}</MButton>
@@ -23,11 +26,15 @@ const Button = ({ children, size }) => {
 MButton.propTypes = {
   children: PropTypes.string,
   size: PropTypes.oneOf(['default', 'large', 'small']),
+  type: PropTypes.oneOf(['solid', 'danger', 'hollow']),
 }
 
 MButton.defaultProps = {
   children: '..?..',
   size: 'default',
+  type: 'solid',
 }
 
 export default Button
+
+*/

components/Button/styles/index.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+
 import { Button } from 'antd'
 
 import { theme } from '../../../utils/themes'
@@ -7,6 +8,10 @@ const MButton = styled(Button)`
   color: ${theme('button.fg')};
   background: ${theme('button.bg')};
   border-color: ${theme('button.border')};
+  color: ${props =>
+    props.hollow ? theme('button.border') : theme('button.fg')};
+  background: ${props => (props.hollow ? 'transparent' : theme('button.bg'))};
+
   &:hover {
     color: ${theme('button.fg')};
     border-color: ${theme('button.border')};

containers/Banner/index.js

@@ -6,7 +6,9 @@
 
 import React from 'react'
 import { inject, observer } from 'mobx-react'
+import { Tabs } from 'antd'
 
+import styled from 'styled-components'
 // import Link from 'next/link'
 
 import {
@@ -21,6 +23,18 @@ import { Banner, BannerLogo } from './styles'
 
 const debug = makeDebugger('C:Banner')
 
+const { TabPane } = Tabs
+
+const MTabs = styled(Tabs)`
+  position: absolute;
+  bottom: -17px;
+  width: 80vw;
+`
+
+function callback(key) {
+  console.log('callback: ', key)
+}
+
 class BannerContainer extends React.Component {
   componentWillMount() {
     debug('mount')
@@ -37,6 +51,11 @@ class BannerContainer extends React.Component {
     return (
       <Banner>
         <BannerLogo path={getSVGIconPath(iconKey)} />
+        <MTabs onChange={callback}>
+          <TabPane tab="帖子" key="1" />
+          <TabPane tab="教程" key="2" />
+          <TabPane tab="用户" key="3" />
+        </MTabs>
       </Banner>
     )
   }

containers/Banner/styles/index.js

@@ -1,15 +1,21 @@
 import styled from 'styled-components'
 import ReactSVG from 'react-svg'
 
+import { theme } from '../../../utils/themes'
+
 export const Banner = styled.div`
-  padding: 5px;
+  position: relative;
   padding-left: 80px;
-  height: 15vh;
+  height: 16vh;
   border-bottom: 1px solid tomato;
+  display: flex;
+  flex-direction: column;
+  background: ${theme('banner.bg')};
+  border-bottom: ${theme('banner.spliter')};
 `
 
 export const BannerLogo = styled(ReactSVG)`
   margin-top: 2em;
-  width: 100px;
-  height: 100px;
+  width: 80px;
+  height: 80px;
 `

containers/Header/index.js

@@ -50,7 +50,9 @@ class HeaderContainer extends React.Component {
       <Header id="whereCallShowDoraemon">
         <Router>Javascript / Elixir / go</Router>
         <Admin>
-          <Button>管理页</Button>
+          <Button size="small" type="primary">
+            管理页
+          </Button>
         </Admin>
         <Search onClick={logic.openDoraemon}>
           <HeaderIcon path={getSVGIconPath('header_search')} />

containers/Header/styles/index.js

@@ -1,38 +1,41 @@
 import styled from 'styled-components'
-
 import ReactSVG from 'react-svg'
 
-// import { theme } from '../../../utils/themes'
+import { theme } from '../../../utils/themes'
+
 export const Header = styled.div`
   padding: 5px;
   padding-top: 8px;
   line-height: 2vh;
-  border-bottom: 1px solid tomato;
   display: flex;
   flex-direction: row;
+  background: ${theme('header.bg')};
+  border-bottom: ${theme('header.spliter')};
 `
 
 export const Router = styled.div`flex-grow: 1;`
 
 export const Admin = styled.div`
   margin-right: 10px;
   font-size: xx-small;
+  &:after {
+    content: '⁝';
+    color: ${theme('header.fg')};
+    margin-left: 5px;
+  }
 `
 
-export const Search = styled.div`
-  color: grey;
-  margin-right: 10px;
-`
+export const Search = styled.div`color: ${theme('header.fg')};`
+
+export const Notification = styled.div``
 
-export const Notification = styled.div`
-  color: grey;
-  margin-right: 10px;
-`
 export const HeaderIcon = styled(ReactSVG)`
-  fill: grey;
-  width: 22px;
-  height: 22px;
+  fill: ${theme('header.fg')};
+  width: 20px;
+  height: 20px;
   cursor: pointer;
+  margin-top: 2px;
+  margin-right: 12px;
 `
 export const User = styled.div`
   color: grey;

containers/Preview/index.js

@@ -15,6 +15,8 @@ import * as logic from './logic'
 import ThemeSelector from '../../components/ThemeSelector'
 
 import {
+  TheTitle,
+  ColorBottom,
   PreviewOverlay,
   PreviewWrapper,
   PreviewCloser,
@@ -35,6 +37,22 @@ const CloseBtn = ({ type }) => (
   </PreviewCloser>
 )
 
+const AccountViewer = ({ themeKeys, curTheme }) => {
+  return (
+    <div>
+      <TheTitle>
+        <ColorBottom />
+        <span>--主题---</span>
+      </TheTitle>
+      <ThemeSelector
+        themeKeys={themeKeys}
+        curTheme={curTheme}
+        changeTheme={logic.changeTheme}
+      />
+    </div>
+  )
+}
+
 class PreviewContainer extends React.Component {
   componentWillMount() {
     debug('mount')
@@ -54,11 +72,7 @@ class PreviewContainer extends React.Component {
             <PreviewBody>
               <h2>Preview body</h2>
               {type === 'account' ? (
-                <ThemeSelector
-                  themeKeys={themeKeys}
-                  curTheme={curTheme}
-                  changeTheme={logic.changeTheme}
-                />
+                <AccountViewer themeKeys={themeKeys} curTheme={curTheme} />
               ) : (
                 <div>post previewer</div>
               )}

containers/Preview/styles/index.js

@@ -44,18 +44,15 @@ export const PreviewContent = styled.div`
   width: 90%;
   background-color: ${theme('preview.bg')};
   height: 100%;
-  box-shadow: -5px 0px 14px 0px rgba(189, 189, 189, 0.37);
+  box-shadow: ${theme('preview.shadow')};
   padding: 20px;
 `
 export const PreviewHeader = styled.div`
   border-bottom: 1px solid tomato;
   text-align: center;
   line-height: 30px;
 `
-export const PreviewBody = styled.div`
-  text-align: center;
-  margin-top: 20%;
-`
+export const PreviewBody = styled.div`margin-top: 20%;`
 
 export const PreviewCloser = styled.div`width: 10%;`
 
@@ -90,4 +87,21 @@ export const Closer = styled.div`
   }
 `
 
-// right: ${props => (props.visible ? '0' : '40%')};
+// TODO: move to
+export const ColorBottom = styled.span`
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  left: 0;
+  bottom: 0;
+  background: tomato;
+  z-index: 1;
+`
+
+export const TheTitle = styled.span`
+  font-size: 1.5rem;
+  padding: 0.2em;
+  color: black;
+  position: relative;
+  display: inline-block;
+`

containers/Sidebar/styles/index.js

@@ -12,6 +12,7 @@ export const Sidebar = styled.div`
   height: 100vh;
   top: 0;
   width: ${props => (props.open ? '250px' : '56px')};
+  box-shadow: ${props => (props.open ? '3px 0 20px rgba(0, 0, 0, 0.2); ' : '')};
   background: ${theme('sidebar.bg')};
   border-color: ${theme('sidebar.border_color')};
   z-index: 1000;

containers/ThemeWrapper/index.js

@@ -38,6 +38,7 @@ import globalStyles from '../../utils/global_styles'
  */
 
 // ${selection({ backgroundColor: 'tomato' }, '*')};
+
 const Container = styled.div`
   *::-moz-selection {
     background-color: ${theme('selection_bg')};
@@ -46,6 +47,43 @@ const Container = styled.div`
   *::selection {
     background-color: ${theme('selection_bg')};
   }
+
+  .ant-btn-background-ghost.ant-btn-primary {
+    color: ${theme('button.primary')};
+    border-color: ${theme('button.primary')};
+  }
+
+  .ant-btn:focus,
+  .ant-btn:hover {
+    background-color: ${theme('button.hoverBg')};
+  }
+  .ant-btn:active {
+    background-color: ${theme('button.activeBg')};
+  }
+
+  .ant-btn-primary {
+    color: ${theme('button.fg')};
+    background-color: ${theme('button.primary')};
+    border-color: ${theme('button.primary')};
+  }
+
+  .ant-btn-clicked:after {
+    border: ${theme('button.clicked')};
+  }
+
+  .ant-tabs-bar {
+    border-bottom: ${theme('taber.baseline')};
+  }
+  .ant-tabs-ink-bar {
+    background-color: ${theme('taber.bottom_bar')};
+  }
+  .ant-tabs-nav .ant-tabs-tab {
+    color: ${theme('taber.normalText')};
+  }
+  .ant-tabs-nav .ant-tabs-tab-active {
+    color: ${theme('taber.activeText')};
+    font-weight: bold;
+  }
 `
 const ThemeObserver = ({ children, theme }) => (
   <ThemeProvider theme={theme.themeData}>

docs/ideas.md

@@ -32,6 +32,7 @@
 
 ## TODO
 
+- [ ] use styled-component extend to refator
 - [ ] Component -> PureComponent
 - [ ] Offline Plugin [example](https://insight.io/github.com/Sly777/ran/blob/master/next.config.js?source=0)
 - [ ] Cache SSR pages in [server.js](https://github.com/zeit/next.js/blob/master/examples/ssr-caching/server.js)