From a0294031b2f1f215afe1f202204030b7bd2ba900 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Mon, 26 Nov 2018 12:21:31 +0100
Subject: [PATCH] style(home): new layout for wallet settings form

---
 app/components/Home/Home.js                   |   4 +-
 app/components/Home/WalletLauncher.js         |  28 ++---
 .../Home/WalletSettingsFormLocal.js           | 103 ++++++++----------
 app/components/UI/DataRow.js                  |   8 +-
 stories/containers/home.stories.js            |   8 +-
 .../__snapshots__/PaySummaryRow.spec.js.snap  |   2 -
 .../UI/__snapshots__/Button.spec.js.snap      |   1 +
 .../UI/__snapshots__/Sidebar.spec.js.snap     |   4 +-
 8 files changed, 71 insertions(+), 87 deletions(-)

diff --git a/app/components/Home/Home.js b/app/components/Home/Home.js
index d946d6a8..03a79d5c 100644
--- a/app/components/Home/Home.js
+++ b/app/components/Home/Home.js
@@ -71,8 +71,8 @@ class Home extends React.Component {
           </Box>
         </Sidebar.small>
 
-        <MainContent width={1 / 2}>
-          <Box px={3} mt={72}>
+        <MainContent>
+          <Box px={5} mt={72}>
             <Switch>
               <Route
                 exact
diff --git a/app/components/Home/WalletLauncher.js b/app/components/Home/WalletLauncher.js
index 090b1b4c..9a02d251 100644
--- a/app/components/Home/WalletLauncher.js
+++ b/app/components/Home/WalletLauncher.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { withRouter } from 'react-router-dom'
 import { Box, Flex } from 'rebass'
-import { Bar, Button, Heading } from 'components/UI'
+import { Bar, Button, Heading, Text } from 'components/UI'
 import { WalletSettingsFormLocal, WalletSettingsFormRemote, WalletHeader } from '.'
 
 class WalletLauncher extends React.Component {
@@ -62,7 +62,7 @@ class WalletLauncher extends React.Component {
 
     return (
       <React.Fragment>
-        <Flex mb={4} alignItems="center">
+        <Flex mb={5} alignItems="center">
           <Box width="75%" mr={3}>
             <WalletHeader title={walletName} />
           </Box>
@@ -75,8 +75,8 @@ class WalletLauncher extends React.Component {
 
         {wallet.type === 'local' && (
           <>
-            <Heading.h2 mb={4}>Settings</Heading.h2>
-            <Bar my={2} />
+            <Heading.h1 mb={5}>Settings</Heading.h1>
+
             <WalletSettingsFormLocal
               key={wallet.id}
               id={`wallet-settings-form-${wallet.id}`}
@@ -96,15 +96,17 @@ class WalletLauncher extends React.Component {
             />
           </>
         )}
-        <Button
-          variant="secondary"
-          type="button"
-          size="small"
-          onClick={this.handleDelete}
-          ml="auto"
-        >
-          delete
-        </Button>
+
+        <Text mt={4} fontWeight="normal">
+          Delete
+        </Text>
+        <Bar my={2} />
+
+        <Flex justifyContent="center" my={4}>
+          <Button size="small" onClick={this.handleDelete}>
+            Delete wallet
+          </Button>
+        </Flex>
       </React.Fragment>
     )
   }
diff --git a/app/components/Home/WalletSettingsFormLocal.js b/app/components/Home/WalletSettingsFormLocal.js
index d15ae78f..8623a522 100644
--- a/app/components/Home/WalletSettingsFormLocal.js
+++ b/app/components/Home/WalletSettingsFormLocal.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Flex } from 'rebass'
-import { DataRow, Form, Input, Label, Range, Toggle } from 'components/UI'
+import { Bar, DataRow, Form, Input, Label, Range, Text, Toggle } from 'components/UI'
 import * as yup from 'yup'
 
 class WalletSettingsFormLocal extends React.Component {
@@ -18,51 +18,6 @@ class WalletSettingsFormLocal extends React.Component {
     }
   }
 
-  validateAutopilotAllocation = value => {
-    try {
-      yup
-        .number()
-        .required()
-        .positive()
-        .min(0)
-        .max(100)
-        .typeError('A number is required')
-        .validateSync(value)
-    } catch (error) {
-      return error.message
-    }
-  }
-
-  validateAutopilotMaxchannels = value => {
-    try {
-      yup
-        .number()
-        .required()
-        .positive()
-        .integer()
-        .max(100)
-        .typeError('A number is required')
-        .validateSync(value)
-    } catch (error) {
-      return error.message
-    }
-  }
-
-  validateAutopilotChansize = value => {
-    try {
-      yup
-        .number()
-        .required()
-        .positive()
-        .integer()
-        .max(100000000)
-        .typeError('A number is required')
-        .validateSync(value)
-    } catch (error) {
-      return error.message
-    }
-  }
-
   preSubmit = values => {
     if (values.autopilotAllocation) {
       values.autopilotAllocation = values.autopilotAllocation / 100
@@ -93,14 +48,53 @@ class WalletSettingsFormLocal extends React.Component {
       >
         {({ formState }) => (
           <React.Fragment>
+            <Text fontWeight="normal">Naming</Text>
+            <Bar mt={2} mb={4} />
+
             <DataRow
               py={2}
-              left={<Label htmlFor="alias">Alias</Label>}
+              left={
+                <>
+                  <Label htmlFor="name" mb={2}>
+                    Wallet name
+                  </Label>
+                  <Text color="gray" fontWeight="light">
+                    The wallet name is only visible for you inside Zap.
+                  </Text>
+                </>
+              }
+              right={
+                <Input
+                  field="name"
+                  id="name"
+                  initialValue={wallet.name}
+                  placeholder="Enter name"
+                  width={1}
+                  ml="auto"
+                  justifyContent="right"
+                  css={{ 'text-align': 'right' }}
+                />
+              }
+            />
+
+            <DataRow
+              py={2}
+              left={
+                <>
+                  <Label htmlFor="alias" mb={2}>
+                    Alias
+                  </Label>
+                  <Text color="gray" fontWeight="light">
+                    The alias will be visible for others on the network.
+                  </Text>
+                </>
+              }
               right={
                 <Input
                   field="alias"
                   id="alias"
                   initialValue={wallet.alias}
+                  placeholder="Enter alias"
                   width={1}
                   ml="auto"
                   justifyContent="right"
@@ -111,10 +105,13 @@ class WalletSettingsFormLocal extends React.Component {
 
             <DataRow
               py={2}
+              mt={4}
               left={<Label htmlFor="autopilot">Autopilot</Label>}
               right={<Toggle field="autopilot" id="autopilot" initialValue={wallet.autopilot} />}
             />
 
+            <Bar mt={2} mb={4} />
+
             {formState.values.autopilot ? (
               <React.Fragment>
                 <DataRow
@@ -136,11 +133,10 @@ class WalletSettingsFormLocal extends React.Component {
                         field="autopilotAllocation"
                         id="autopilotAllocation"
                         type="number"
-                        variant="thin"
                         min="0"
                         max="100"
                         step="1"
-                        width={50}
+                        width={70}
                         ml={2}
                         justifyContent="right"
                         css={{ 'text-align': 'right' }}
@@ -156,11 +152,10 @@ class WalletSettingsFormLocal extends React.Component {
                     <Input
                       field="autopilotMaxchannels"
                       id="autopilotMaxchannels"
-                      variant="thin"
                       type="number"
                       initialValue={wallet.autopilotMaxchannels}
                       step="1"
-                      width={100}
+                      width={150}
                       ml="auto"
                       justifyContent="right"
                       css={{ 'text-align': 'right' }}
@@ -175,13 +170,12 @@ class WalletSettingsFormLocal extends React.Component {
                     <Input
                       field="autopilotMinchansize"
                       id="autopilotMinchansize"
-                      variant="thin"
                       type="number"
                       min="0"
                       max="100000000"
                       step="1"
                       initialValue={wallet.autopilotMinchansize}
-                      width={100}
+                      width={150}
                       ml="auto"
                       justifyContent="right"
                       css={{ 'text-align': 'right' }}
@@ -196,13 +190,12 @@ class WalletSettingsFormLocal extends React.Component {
                     <Input
                       field="autopilotMaxchansize"
                       id="autopilotMaxchansize"
-                      variant="thin"
                       type="number"
                       min="0"
                       max="100000000"
                       step="1"
                       initialValue={wallet.autopilotMaxchansize}
-                      width={100}
+                      width={150}
                       ml="auto"
                       justifyContent="right"
                       css={{ 'text-align': 'right' }}
diff --git a/app/components/UI/DataRow.js b/app/components/UI/DataRow.js
index ec3dfecb..6f1c11d4 100644
--- a/app/components/UI/DataRow.js
+++ b/app/components/UI/DataRow.js
@@ -5,12 +5,8 @@ import { Text } from 'components/UI'
 
 const DataRow = ({ left, right, ...rest }) => (
   <Flex alignItems="center" py={3} {...rest} justifyContent="space-between">
-    <Text width={1 / 2} fontWeight="normal">
-      {left}
-    </Text>
-    <Text width={1 / 2} textAlign="right">
-      {right}
-    </Text>
+    <Text fontWeight="normal">{left}</Text>
+    <Text textAlign="right">{right}</Text>
   </Flex>
 )
 
diff --git a/stories/containers/home.stories.js b/stories/containers/home.stories.js
index c2163b71..9cebef93 100644
--- a/stories/containers/home.stories.js
+++ b/stories/containers/home.stories.js
@@ -30,13 +30,7 @@ const store = new Store({
     },
     {
       id: 2,
-      autopilot: true,
-      autopilotAllocation: 0.9,
-      autopilotMaxchannels: 10,
-      autopilotMaxchansize: 16777215,
-      autopilotMinchansize: 20000,
-      autopilotMinconfs: 1,
-      autopilotPrivate: false,
+      autopilot: false,
       chain: 'bitcoin',
       network: 'mainnet',
       type: 'local'
diff --git a/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap b/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
index d35dd621..9563e65f 100644
--- a/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
+++ b/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
@@ -8,13 +8,11 @@ exports[`component.Form.DataRow should render correctly 1`] = `
 >
   <Text
     fontWeight="normal"
-    width={0.5}
   >
     left contnet
   </Text>
   <Text
     textAlign="right"
-    width={0.5}
   >
     right content
   </Text>
diff --git a/test/unit/components/UI/__snapshots__/Button.spec.js.snap b/test/unit/components/UI/__snapshots__/Button.spec.js.snap
index 9d87670c..21e3d7be 100644
--- a/test/unit/components/UI/__snapshots__/Button.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Button.spec.js.snap
@@ -32,6 +32,7 @@ exports[`component.UI.Button should render correctly 1`] = `
   border-radius: 5;
   font-weight: 300;
   line-height: '18px';
+  white-space: nowrap;
 }
 
 .c0:disabled {
diff --git a/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap b/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap
index 977da21c..98041ddf 100644
--- a/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`component.UI.Sidebar should render correctly 1`] = `
 .c0 {
-  width: 33.33333333333333%;
+  width: 25%;
   color: primaryText;
   background-color: tertiaryColor;
   position: relative;
@@ -12,6 +12,6 @@ exports[`component.UI.Sidebar should render correctly 1`] = `
 <aside
   className="c0"
   color="primaryText"
-  width={0.3333333333333333}
+  width={0.25}
 />
 `;