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>
+        <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)}
-            />{' '}
-            with password
+              />
+              <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,7 +25,8 @@ import Select from 'components/base/Select'
 const Steps = {
   createAccount: (props: Object) => (
     <form onSubmit={props.onSubmit}>
-      <div>
+      <Box flow={3}>
+        <Box flow={1}>
           <Label>Currency</Label>
           <Select
             placeholder="Choose a wallet..."
@@ -36,12 +39,17 @@ const Steps = {
               },
             ]}
           />
-      </div>
-      <div>
+        </Box>
+        <Box flow={1}>
           <Label>Account name</Label>
           <Input onChange={props.onChangeInput('accountName')} value={props.value.accountName} />
-      </div>
-      <Button type="submit">Create account</Button>
+        </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>
         )}