Merge pull request #102 from meriadec/master

New TobBar design

src/components/GlobalSearch.js

@@ -0,0 +1,41 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+import Icon from 'components/base/Icon'
+
+const Input = styled.input`
+  border: none;
+  background: transparent;
+  outline: none;
+  flex-grow: 1;
+
+  &::placeholder {
+    color: ${p => p.theme.colors.warmGrey};
+  }
+`
+
+class GlobalSearch extends PureComponent {
+  _input = null
+
+  focusInput = () => {
+    if (this._input) {
+      this._input.focus()
+    }
+  }
+
+  render() {
+    return (
+      <Box grow horizontal>
+        <Box justify="center" onClick={this.focusInput} pr={2}>
+          <Icon name="search" />
+        </Box>
+        <Input placeholder="Search" innerRef={input => (this._input = input)} />
+      </Box>
+    )
+  }
+}
+
+export default GlobalSearch

src/components/TopBar.js

@@ -7,20 +7,17 @@ import { ipcRenderer } from 'electron'
 
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux'
 
+import { rgba } from 'styles/helpers'
 import { getAccounts } from 'reducers/accounts'
 import { lock } from 'reducers/application'
 import { hasPassword } from 'reducers/settings'
 
 import Box from 'components/base/Box'
+import GlobalSearch from 'components/GlobalSearch'
+import Icon from 'components/base/Icon'
 
 const Container = styled(Box).attrs({
-  borderColor: 'argile',
-  borderWidth: 1,
-  borderBottom: true,
-  noShrink: true,
-  px: 3,
-  align: 'center',
-  horizontal: true,
+  px: 5,
 })`
   height: 60px;
   position: absolute;
@@ -31,6 +28,20 @@ const Container = styled(Box).attrs({
   z-index: 20;
 `
 
+const Inner = styled(Box).attrs({
+  horizontal: true,
+  grow: true,
+  borderBottom: true,
+  borderWidth: 1,
+  borderColor: p => rgba(p.theme.colors.black, 0.15),
+})``
+
+const Bar = styled.div`
+  height: 15px;
+  width: 1px;
+  background: ${p => p.theme.colors.warmGrey};
+`
+
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   hasAccounts: getAccounts(state).length > 0,
   hasPassword: hasPassword(state),
@@ -45,6 +56,7 @@ type Props = {
   hasPassword: boolean,
   lock: Function,
 }
+
 type State = {
   sync: {
     progress: null | boolean,
@@ -104,16 +116,35 @@ class TopBar extends PureComponent<Props, State> {
     const { sync } = this.state
 
     return (
-      <Container bg="cream">
-        <Box grow>
-          {hasAccounts &&
-            (sync.progress === true
-              ? 'Synchronizing...'
-              : sync.fail === true ? 'Synchronization fail :(' : 'Synchronisation finished!')}
-        </Box>
-        <Box justify="flex-end" horizontal>
-          {hasPassword && <LockApplication onLock={this.handleLock} />}
-        </Box>
+      <Container bg="cream" color="warmGrey">
+        <Inner>
+          <Box grow horizontal flow={4}>
+            <GlobalSearch />
+            <Box justify="center">
+              <Icon name="tablet-alt" />
+            </Box>
+            <Box justify="center">
+              <Icon name="chart-line" />
+            </Box>
+            <Box justify="center">
+              <Bar />
+            </Box>
+            <Box>
+              {hasAccounts &&
+                (sync.progress === true
+                  ? 'Synchronizing...'
+                  : sync.fail === true ? 'Synchronization fail :(' : 'Synchronisation finished!')}
+            </Box>
+            <Box justify="flex-end" horizontal>
+              {hasPassword && <LockApplication onLock={this.handleLock} />}
+            </Box>
+          </Box>
+          <Box horizontal noShrink>
+            <Box justify="center" px={4}>
+              {'Khalil Benihoud'}
+            </Box>
+          </Box>
+        </Inner>
       </Container>
     )
   }

src/components/Wrapper.js

@@ -50,7 +50,7 @@ class Wrapper extends Component<{}> {
             <Box shrink grow bg="cream" color="grey" relative>
               <TopBar />
               <UpdateNotifier />
-              <GrowScroll p={3} style={{ paddingTop: 80 }}>
+              <GrowScroll p={5} style={{ paddingTop: 80 }}>
                 <Route path="/" exact component={DashboardPage} />
                 <Route path="/settings" component={SettingsPage} />
                 <Route path="/account/:id" component={AccountPage} />

src/components/base/BoldToggle.js

@@ -0,0 +1,38 @@
+// @flow
+
+import React from 'react'
+
+import Text from 'components/base/Text'
+import Box from 'components/base/Box'
+
+type Props = {
+  boldWeight?: string | number,
+  normalWeight?: string | number,
+  isBold: boolean,
+  children: any,
+}
+
+function BoldToggle(props: Props) {
+  const { boldWeight, normalWeight, isBold, children, ...p } = props
+  return (
+    <Box relative>
+      <Text fontWeight={boldWeight} style={{ opacity: isBold ? 1 : 0 }} {...p}>
+        {children}
+      </Text>
+      {!isBold && (
+        <Box sticky align="center" justify="center">
+          <Text fontWeight={normalWeight} {...p}>
+            {children}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+BoldToggle.defaultProps = {
+  boldWeight: 600,
+  normalWeight: 400,
+}
+
+export default BoldToggle

src/components/base/Box/index.js

@@ -16,10 +16,10 @@ import {
 
 import Text from 'components/base/Text'
 
-const spacingScale = [0, 8, 16, 32, 64]
+import { space as spaceScale } from 'styles/theme'
 
 function getSpace(n) {
-  return `${spacingScale[n] || n}px`
+  return `${spaceScale[n] || n}px`
 }
 
 const Box = styled.div`

src/components/base/Pills/index.js

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 
 import { rgba } from 'styles/helpers'
 import Box, { Tabbable } from 'components/base/Box'
+import BoldToggle from 'components/base/BoldToggle'
 
 type Item = {
   key: string,
@@ -43,11 +44,14 @@ function Pills(props: Props) {
   const { items, activeKey, onChange, ...p } = props
   return (
     <Container {...p}>
-      {items.map(item => (
-        <Pill isActive={item.key === activeKey} onClick={() => onChange(item)} key={item.key}>
-          {item.label}
-        </Pill>
-      ))}
+      {items.map(item => {
+        const isActive = item.key === activeKey
+        return (
+          <Pill isActive={isActive} onClick={() => onChange(item)} key={item.key}>
+            <BoldToggle isBold={isActive}>{item.label}</BoldToggle>
+          </Pill>
+        )
+      })}
     </Container>
   )
 }

src/styles/theme.js

@@ -1,10 +1,14 @@
 // @flow
 
+export const space = [0, 5, 10, 15, 20, 30, 40, 50, 70]
+export const fontSizes = [8, 9, 10, 11, 13, 16, 18, 32]
+
 export default {
   sizes: {
     sideBarWidth: 250,
   },
-  fontSizes: [13, 14, 16, 20, 24, 32, 48, 64, 72],
+  space,
+  fontSizes,
   colors: {
     transparent: 'transparent',