Attempt at more polished UI.

Author: emiljoha

src/view/pay-lightning-supply-amount-mobile.js

@@ -6,71 +6,69 @@ import Background from '../component/background';
 import MainContent from '../component/main-content';
 import { NamedField, AmountInputField } from '../component/field';
 import { Header, Title } from '../component/header';
-import { CancelButton, BackButton, SmallGlasButton } from '../component/button';
+import { CancelButton, Button, SmallGlasButton } from '../component/button';
 import Card from '../component/card';
 import LightningBoltIcon from '../asset/icon/lightning-bolt';
-import { FormStretcher } from '../component/form';
+import { FormStretcher, FormSubText } from '../component/form';
 import { BalanceLabel, BalanceLabelUnit } from '../component/label';
 import { color } from '../component/style';
 
 const styles = StyleSheet.create({
   balance: {
-    marginBottom: 10,
-  },
-  numeral: {
-    color: color.blackText,
+    marginTop: 15,
   },
   unit: {
     color: color.blackText,
   },
-  totalLbl: {
-    marginTop: 5,
-  },
-  note: {
-    marginTop: 5,
-    borderBottomWidth: 0,
+  form: {
+    paddingTop: 10,
+    paddingBottom: 10,
   },
-  confirmBtn: {
-    marginTop: 20,
+  subText: {
+    paddingTop: 40,
+    paddingBottom: 40,
   },
 });
 
 const PayLightningSupplyAmountView = ({ store, nav, payment }) => (
   <Background color={color.purple}>
     <Header color={color.purple}>
-      <BackButton onPress={() => nav.goPay()} />
-      <Title title="Supply Lightning Payment Amount">
+      <Button disabled onPress={() => {}} />
+      <Title title="Payment Request For Any Amount">
         <LightningBoltIcon height={12} width={6.1} />
       </Title>
       <CancelButton onPress={() => nav.goHome()} />
     </Header>
     <MainContent>
-      <Card>
-        <FormStretcher>
-          <BalanceLabel style={styles.balance}>
-            <AmountInputField
-              style={styles.amountInput}
-              autoFocus={true}
-              value={store.payment.amount}
-              onChangeText={amount => payment.setAmount({ amount })}
-              onSubmitEditing={() =>
-                payment.estimateLightningFeeForAmount(payment.amount)
-              }
-            />
-            <BalanceLabelUnit style={styles.unit}>
-              {store.unitFiatLabel}
-            </BalanceLabelUnit>
-          </BalanceLabel>
+      <Card style={styles.card}>
+        <BalanceLabel style={styles.balance}>
+          <AmountInputField
+            autoFocus={true}
+            value={store.invoice.amount}
+            onChangeText={amount => payment.setAmount({ amount })}
+            onSubmitEditing={() =>
+              payment.estimateLightningFeeForAmount(payment.amount)
+            }
+          />
+          <BalanceLabelUnit style={styles.unit}>
+            {store.unitFiatLabel}
+          </BalanceLabelUnit>
+        </BalanceLabel>
+        <FormStretcher style={styles.form}>
           {store.payment.note ? (
             <NamedField name="Note" style={styles.note}>
               {store.payment.note}
             </NamedField>
           ) : null}
         </FormStretcher>
+        <FormSubText style={styles.subText}>
+          Payment Request did not specify an amount. This is often used for
+          tips/donations.
+        </FormSubText>
       </Card>
     </MainContent>
     <SmallGlasButton onPress={() => nav.goPayLightningConfirm()}>
-      Confirm
+      Pay
     </SmallGlasButton>
   </Background>
 );

src/view/pay-lightning-supply-amount.js

@@ -6,15 +6,10 @@ import Background from '../component/background';
 import MainContent from '../component/main-content';
 import { NamedField, AmountInputField } from '../component/field';
 import { Header, Title } from '../component/header';
-import {
-  MaxButton,
-  CancelButton,
-  BackButton,
-  PillButton,
-} from '../component/button';
+import { CancelButton, BackButton, PillButton } from '../component/button';
 import Card from '../component/card';
 import LightningBoltIcon from '../asset/icon/lightning-bolt';
-import { FormStretcher, FormText } from '../component/form';
+import { FormStretcher, FormSubText } from '../component/form';
 import { BalanceLabel, BalanceLabelUnit } from '../component/label';
 import { color } from '../component/style';
 
@@ -34,22 +29,25 @@ const styles = StyleSheet.create({
     marginTop: 20,
     backgroundColor: color.purple,
   },
+  subText: {
+    paddingTop: 20,
+    paddingBottom: 40,
+    paddingLeft: 40,
+    paddingRight: 40,
+  },
 });
 
 const PayLightningSupplyAmountView = ({ store, nav, payment }) => (
   <Background image="purple-gradient-bg">
     <Header color={color.purple}>
       <BackButton onPress={() => nav.goHome()} />
-      <Title title="Specify Amount to Send">
+      <Title title="Payment Request For Any Amount">
         <LightningBoltIcon height={12} width={6.1} />
       </Title>
       <CancelButton onPress={() => nav.goHome()} />
     </Header>
     <MainContent>
       <Card>
-        <FormText style={styles.description}>
-          The invoice did not specify an amount.
-        </FormText>
         <FormStretcher>
           <BalanceLabel style={styles.balance}>
             <AmountInputField
@@ -64,16 +62,15 @@ const PayLightningSupplyAmountView = ({ store, nav, payment }) => (
               {store.unitFiatLabel}
             </BalanceLabelUnit>
           </BalanceLabel>
-          <MaxButton
-            style={styles.maxBtn}
-            active={store.payment.sendAll}
-            onPress={() => payment.toggleMax()}
-          />
           {store.payment.note ? (
             <NamedField name="Note" style={styles.note}>
               {store.payment.note}
             </NamedField>
           ) : null}
+          <FormSubText style={styles.subText}>
+            Payment Request did not specify an amount. This is often used for
+            tips/donations.
+          </FormSubText>
         </FormStretcher>
         <PillButton
           style={styles.nextBtn}