Merge pull request #173 from meriadec/master

Styles updates on button & account page

src/components/AccountPage.js

@@ -19,6 +19,7 @@ import { openModal } from 'reducers/modals'
 import Box, { Card } from 'components/base/Box'
 import Button from 'components/base/Button'
 import Icon from 'components/base/Icon'
+import IconControls from 'icons/Controls'
 import ReceiveBox from 'components/ReceiveBox'
 import Text from 'components/base/Text'
 import TransactionsList from 'components/TransactionsList'
@@ -70,11 +71,13 @@ class AccountPage extends PureComponent<Props> {
               </Box>
             </Button>
             <Button
-              style={{ width: 50 }}
+              style={{ width: 40, padding: 0 }}
-              icon="sliders-h"
-              color="mouse"
               onClick={() => openModal(MODAL_SETTINGS_ACCOUNT, { account })}
-            />
+            >
+              <Box align="center">
+                <IconControls width={16} />
+              </Box>
+            </Button>
           </Box>
         </Box>
         <Box horizontal flow={3}>

src/components/Breadcrumb/Step.js

@@ -8,7 +8,7 @@ import Box from 'components/base/Box'
 const Wrapper = styled(Box).attrs({
   align: 'center',
   justify: 'center',
-  color: p => (p.isActive ? 'wallet' : 'mouse'),
+  color: p => (p.isActive ? 'wallet' : 'fog'),
 })`
   width: 40px;
   flex-shrink: 0;
@@ -19,7 +19,7 @@ const Wrapper = styled(Box).attrs({
 const Number = styled(Box).attrs({
   align: 'center',
   justify: 'center',
-  color: p => (p.isActive ? 'white' : 'mouse'),
+  color: p => (p.isActive ? 'white' : 'fog'),
   bg: p => (p.isActive ? 'wallet' : 'pearl'),
 })`
   width: 20px;

src/components/DashboardPage/AccountCard.js

@@ -36,7 +36,7 @@ const AccountCard = ({
           </Box>
         </Box>
       </Box>
-      <Bar size={1} color="argile" />
+      <Bar size={2} color="fog" />
       <Box grow justifyContent="center" color="dark">
         <FormattedVal
           alwaysShowSign={false}

src/components/ReceiveBox.js

@@ -24,7 +24,7 @@ export const AddressBox = styled(Box).attrs({
   p: 2,
 })`
   border-radius: 3px;
-  border: 1px solid ${p => p.theme.colors.mouse};
+  border: 1px solid ${p => p.theme.colors.fog};
   cursor: text;
   text-align: center;
   user-select: text;
@@ -33,7 +33,7 @@ export const AddressBox = styled(Box).attrs({
 
 const Action = styled(Box).attrs({
   alignItems: 'center',
-  color: 'mouse',
+  color: 'fog',
   flex: 1,
   flow: 1,
   fontSize: 0,

src/components/SelectAccount/index.js

@@ -29,7 +29,7 @@ const renderItem = item => (
       </Text>
     </Box>
     <Box>
-      <Text color="mouse" fontSize={4}>
+      <Text color="fog" fontSize={4}>
         {formatBTC(item.balance)}
       </Text>
     </Box>

src/components/TopBar.js

@@ -46,7 +46,7 @@ const Inner = styled(Box).attrs({
 const Bar = styled.div`
   height: 15px;
   width: 1px;
-  background: #ff0000;
+  background: ${p => p.theme.colors.fog};
 `
 
 const Activity = styled.div`

src/components/TransactionsList/index.js

@@ -58,7 +58,7 @@ const TransactionRaw = styled(Box).attrs({
   horizontal: true,
   alignItems: 'center',
 })`
-  border-bottom: 1px solid ${p => p.theme.colors.argile};
+  border-bottom: 1px solid ${p => p.theme.colors.fog};
   height: 68px;
 
   &:last-child {

src/components/base/Button/index.js

@@ -5,6 +5,8 @@ import styled from 'styled-components'
 import { space, fontSize, fontWeight, color } from 'styled-system'
 import noop from 'lodash/noop'
 
+import { darken, lighten } from 'styles/helpers'
+
 import Box from 'components/base/Box'
 import Icon from 'components/base/Icon'
 
@@ -14,11 +16,19 @@ const Base = styled.button`
   ${fontSize};
   ${fontWeight};
   border-radius: 5px;
-  border: ${p => (p.primary ? '' : `1px solid ${p.theme.colors.mouse}`)};
+  border: ${p =>
+    p.primary ? 'none' : `2px solid ${p.disabled ? 'transparent' : p.theme.colors.grey}`};
   cursor: ${p => (p.disabled ? 'default' : 'pointer')};
   height: 40px;
-  box-shadow: ${p => (p.withShadow ? 'rgba(0, 0, 0, 0.2) 0 3px 10px' : '')};
   outline: none;
+
+  &:hover {
+    background: ${p => (p.primary ? lighten(p.theme.colors.wallet, 0.05) : '')};
+  }
+
+  &:active {
+    background: ${p => (p.primary ? darken(p.theme.colors.wallet, 0.1) : '')};
+  }
 `
 
 type Props = {
@@ -33,6 +43,7 @@ function getProps({ disabled, icon, primary }: Object) {
   const props = (predicate, props, defaults = {}) => (predicate ? props : defaults)
 
   return {
+    color: 'grey',
     ...props(
       icon,
       {
@@ -49,7 +60,6 @@ function getProps({ disabled, icon, primary }: Object) {
       {
         color: 'white',
         bg: 'wallet',
-        withShadow: true,
       },
       {
         bg: 'transparent',
@@ -57,13 +67,14 @@ function getProps({ disabled, icon, primary }: Object) {
     ),
     ...props(disabled, {
       color: 'white',
-      bg: 'argile',
+      bg: 'fog',
-      withShadow: false,
     }),
   }
 }
 
-const Button = ({ children, onClick, primary, icon, disabled, ...props }: Props) => {
+const Button = (props: Props) => {
+  const { onClick, primary, icon, disabled } = props
+  let { children } = props
   children = icon ? (
     <Box alignItems="center" justifyContent="center">
       <Icon name={icon} />

src/components/base/Button/stories.js

@@ -2,10 +2,51 @@
 
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import styled from 'styled-components'
 
 import Button from 'components/base/Button'
 
 const stories = storiesOf('Components/Button', module)
 
-stories.add('basic', () => <Button>{'Do some action'}</Button>)
+const Th = styled.th`
-stories.add('primary', () => <Button primary>{'Validate'}</Button>)
+  padding: 20px;
+`
+
+const Td = styled.td`
+  padding: 20px;
+  min-width: 150px;
+`
+
+stories.add('all', () => (
+  <table border={1}>
+    <thead>
+      <tr>
+        <Th />
+        <Th>normal</Th>
+        <Th>disabled</Th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <Td>normal</Td>
+        <Td>
+          <Button>Normal button</Button>
+        </Td>
+        <Td>
+          <Button disabled>Normal button</Button>
+        </Td>
+      </tr>
+      <tr>
+        <Td>primary</Td>
+        <Td>
+          <Button primary>Primary button</Button>
+        </Td>
+        <Td>
+          <Button primary disabled>
+            Primary button
+          </Button>
+        </Td>
+      </tr>
+    </tbody>
+  </table>
+))

src/components/base/CheckBox/index.js

@@ -36,7 +36,7 @@ const Base = styled(Tabbable).attrs({
   transition: all ease-in 0.1s;
 
   &:focus {
-    border-color: ${p => p.theme.colors.mouse};
+    border-color: ${p => p.theme.colors.fog};
   }
 `
 

src/components/base/Input/index.js

@@ -12,7 +12,7 @@ const Base = styled.input.attrs({
 })`
   ${space};
   ${fontFamily};
-  border: 1px solid ${p => p.theme.colors.mouse};
+  border: 1px solid ${p => p.theme.colors.fog};
   border-radius: 3px;
   display: flex;
   width: 100%;
@@ -20,7 +20,7 @@ const Base = styled.input.attrs({
   background: ${p => p.theme.colors.white};
 
   &::placeholder {
-    color: ${p => p.theme.colors.mouse};
+    color: ${p => p.theme.colors.fog};
   }
 
   &:focus {

src/components/base/Modal/index.js

@@ -94,7 +94,7 @@ const Body = styled(Box).attrs({
 
 const CloseContainer = styled(Box).attrs({
   p: 4,
-  color: 'mouse',
+  color: 'fog',
 })`
   cursor: pointer;
   position: absolute;

src/components/base/Select/Triangles.js

@@ -28,6 +28,6 @@ const Triangles = ({ size, color }: { size?: number, color?: string }) => (
   </Box>
 )
 
-Triangles.defaultProps = { size: 5, color: 'mouse' }
+Triangles.defaultProps = { size: 5, color: 'fog' }
 
 export default Triangles

src/components/base/Select/index.js

@@ -41,7 +41,7 @@ const TriggerBtn = styled(Box).attrs({
 })`
   min-height: 64px;
   ${space};
-  border: 1px solid ${p => p.theme.colors.mouse};
+  border: 1px solid ${p => p.theme.colors.fog};
   border-radius: 3px;
   display: flex;
   width: 100%;
@@ -63,7 +63,7 @@ const Item = styled(Box).attrs({
 
 const ItemWrapper = styled(Box)`
   & + & {
-    border-top: 1px solid ${p => p.theme.colors.mouse};
+    border-top: 1px solid ${p => p.theme.colors.fog};
   }
 `
 
@@ -71,7 +71,7 @@ const Dropdown = styled(Box).attrs({
   mt: 1,
 })`
   border-radius: 3px;
-  border: 1px solid ${p => p.theme.colors.mouse};
+  border: 1px solid ${p => p.theme.colors.fog};
   box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
   left: 0;
   position: absolute;
@@ -246,7 +246,7 @@ class Select extends PureComponent<Props> {
                     {selectedItem && renderSelected ? (
                       renderSelected(selectedItem)
                     ) : (
-                      <Text color="mouse">{placeholder}</Text>
+                      <Text color="fog">{placeholder}</Text>
                     )}
                   </Box>
                   <FloatingTriangles>

src/components/base/Tabs/index.js

@@ -10,7 +10,7 @@ import Box, { Tabbable } from 'components/base/Box'
 const WrapperTab = styled(Box).attrs({
   horizontal: true,
 })`
-  border-bottom: 1px solid ${p => p.theme.colors.argile};
+  border-bottom: 1px solid ${p => p.theme.colors.fog};
 `
 
 const Tab = styled(Tabbable).attrs({

src/icons/Controls.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default props => (
+  <svg viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      d="M3.417 14a.75.75 0 1 1-1.5 0V9.333a.75.75 0 1 1 1.5 0V14zm0-7.333a.75.75 0 0 1-1.5 0V2a.75.75 0 1 1 1.5 0v4.667zM8.75 14a.75.75 0 1 1-1.5 0V8a.75.75 0 0 1 1.5 0v6zm0-8.667a.75.75 0 1 1-1.5 0V2a.75.75 0 0 1 1.5 0v3.333zM14.083 14a.75.75 0 1 1-1.5 0v-3.333a.75.75 0 0 1 1.5 0V14zm0-6a.75.75 0 1 1-1.5 0V2a.75.75 0 0 1 1.5 0v6zM.667 10.083a.75.75 0 1 1 0-1.5h4a.75.75 0 0 1 0 1.5h-4zm5.333-4a.75.75 0 1 1 0-1.5h4a.75.75 0 1 1 0 1.5H6zm5.333 5.334a.75.75 0 0 1 0-1.5h4a.75.75 0 1 1 0 1.5h-4z"
+    />
+  </svg>
+)

src/styles/helpers.js

@@ -11,6 +11,16 @@ export const rgba = (c: string, a: number) =>
     .rgb()
     .toString()
 
+export const darken = (c: string, a: number) =>
+  Color(c)
+    .darken(a)
+    .toString()
+
+export const lighten = (c: string, a: number) =>
+  Color(c)
+    .lighten(a)
+    .toString()
+
 export const ff = (v: string) => {
   const [font, type = 'Regular'] = v.split('|')
   const { style, weight } = fontFamilies[font][type]

src/styles/theme.js

@@ -63,8 +63,6 @@ export const fontFamilies = {
 export const colors = {
   transparent: 'transparent',
 
-  argile: '#ff0000',
-  mouse: '#ff0000',
   pearl: '#ff0000',
 
   // new colors