Styling updates for settings

.eslintrc

@@ -16,6 +16,7 @@
     "import/prefer-default-export": 0,
     "import/no-named-as-default": 0,
     "jsx-a11y/anchor-is-valid": 0,
+    "jsx-a11y/label-has-for": 0,
     "new-cap": 0,
     "no-nested-ternary": 0,
     "no-param-reassign": 0,

src/components/SettingsPage/Display.js

@@ -76,8 +76,8 @@ class TabProfile extends PureComponent<Props, State> {
 
     return (
       <form onSubmit={this.handleSubmit}>
-        <Card>
-          <Box>
+        <Card flow={3}>
+          <Box flow={1}>
             <Label>{t('settings.display.language')}</Label>
             <Select
               onChange={item => this.handleChangeInput('language')(item.key)}
@@ -86,8 +86,10 @@ class TabProfile extends PureComponent<Props, State> {
               items={languages}
             />
           </Box>
-          <Box>
-            <Button type="submit">Save</Button>
+          <Box horizontal justify="flex-end">
+            <Button primary type="submit">
+              Save
+            </Button>
           </Box>
         </Card>
       </form>

src/components/SettingsPage/Profile.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import styled from 'styled-components'
 import { connect } from 'react-redux'
 import bcrypt from 'bcryptjs'
 
@@ -17,11 +16,7 @@ import { unlock } from 'reducers/application'
 import Box, { Card } from 'components/base/Box'
 import Input from 'components/base/Input'
 import Button from 'components/base/Button'
-
-const Label = styled.label`
-  display: block;
-  text-transform: uppercase;
-`
+import Label from 'components/base/Label'
 
 type InputValue = SettingsProfile
 
@@ -87,17 +82,19 @@ class TabProfile extends PureComponent<Props, State> {
     const { inputValue } = this.state
     return (
       <form onSubmit={this.handleSubmit}>
-        <Card>
-          <Box horizontal>
-            <input
-              type="checkbox"
-              checked={get(inputValue, 'password.state', false)}
-              onChange={e => this.handleChangeInput('password.state')(e.target.checked)}
-            />{' '}
-            with password
-          </Box>
+        <Card flow={3}>
+          <label>
+            <Box horizontal align="center" flow={1}>
+              <input
+                type="checkbox"
+                checked={get(inputValue, 'password.state', false)}
+                onChange={e => this.handleChangeInput('password.state')(e.target.checked)}
+              />
+              <div>{' with password'}</div>
+            </Box>
+          </label>
           {get(inputValue, 'password.state') === true && (
-            <Box>
+            <Box flow={1}>
               <Label>Password</Label>
               <Input
                 value={get(inputValue, 'password.value', '')}
@@ -106,8 +103,10 @@ class TabProfile extends PureComponent<Props, State> {
               />
             </Box>
           )}
-          <Box>
-            <Button type="submit">Save</Button>
+          <Box horizontal justify="flex-end">
+            <Button primary type="submit">
+              Save
+            </Button>
           </Box>
         </Card>
       </form>

src/components/base/Label.js

@@ -1,6 +1,11 @@
 import styled from 'styled-components'
+import { fontSize } from 'styled-system'
 
-export default styled.label`
+export default styled.label.attrs({
+  fontSize: 0,
+})`
+  ${fontSize};
   display: block;
   text-transform: uppercase;
+  letter-spacing: 1px;
 `

src/components/base/Modal/index.js

@@ -27,7 +27,7 @@ type Props = {
 }
 
 const springConfig = {
-  stiffness: 400,
+  stiffness: 350,
 }
 
 const mapStateToProps = (state, { name, isOpened }) => ({
@@ -137,6 +137,7 @@ export class Modal extends PureComponent<Props> {
 export const ModalBody = ({
   children,
   onClose,
+  ...props
 }: {
   children: Element<any> | string,
   onClose?: Function,
@@ -147,7 +148,7 @@ export const ModalBody = ({
         <Icon fontSize={3} name="times" />
       </CloseContainer>
     )}
-    {children}
+    <Box {...props}>{children}</Box>
   </Body>
 )
 

src/components/modals/AddAccount.js

@@ -14,6 +14,8 @@ import { sendEvent } from 'renderer/events'
 
 import { addAccount } from 'actions/accounts'
 
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
 import Button from 'components/base/Button'
 import Input from 'components/base/Input'
 import Label from 'components/base/Label'
@@ -23,25 +25,31 @@ import Select from 'components/base/Select'
 const Steps = {
   createAccount: (props: Object) => (
     <form onSubmit={props.onSubmit}>
-      <div>
-        <Label>Currency</Label>
-        <Select
-          placeholder="Choose a wallet..."
-          onChange={item => props.onChangeInput('wallet')(item.key)}
-          renderSelected={item => item.name}
-          items={[
-            {
-              key: 'btc',
-              name: 'Bitcoin',
-            },
-          ]}
-        />
-      </div>
-      <div>
-        <Label>Account name</Label>
-        <Input onChange={props.onChangeInput('accountName')} value={props.value.accountName} />
-      </div>
-      <Button type="submit">Create account</Button>
+      <Box flow={3}>
+        <Box flow={1}>
+          <Label>Currency</Label>
+          <Select
+            placeholder="Choose a wallet..."
+            onChange={item => props.onChangeInput('wallet')(item.key)}
+            renderSelected={item => item.name}
+            items={[
+              {
+                key: 'btc',
+                name: 'Bitcoin',
+              },
+            ]}
+          />
+        </Box>
+        <Box flow={1}>
+          <Label>Account name</Label>
+          <Input onChange={props.onChangeInput('accountName')} value={props.value.accountName} />
+        </Box>
+        <Box horizontal justify="flex-end">
+          <Button primary type="submit">
+            Create account
+          </Button>
+        </Box>
+      </Box>
     </form>
   ),
   connectDevice: () => <div>Connect your Ledger</div>,
@@ -270,7 +278,10 @@ class AddAccountModal extends PureComponent<Props, State> {
         preventBackdropClick
         onClose={this.handleClose}
         render={({ onClose }) => (
-          <ModalBody onClose={onClose}>
+          <ModalBody onClose={onClose} flow={3}>
+            <Text fontSize={4} color="steel">
+              {'Add account'}
+            </Text>
             <Step {...this.getStepProps()} />
           </ModalBody>
         )}