Merge remote-tracking branch 'pkova/release/next-userspace'

pkg/btc-wallet/src/js/components/lib/balance.js

@@ -28,15 +28,7 @@ export default class Balance extends Component {
 
   copyAddress(arg) {
     let address = this.props.state.address;
-    function listener(e) {
+    navigator.clipboard.writeText(address);
-      e.clipboardData.setData('text/plain', address);
-      e.preventDefault();
-    }
-
-    document.addEventListener('copy', listener);
-    document.execCommand('copy');
-    document.removeEventListener('copy', listener);
-
     this.props.api.btcWalletCommand({'gen-new-address': null});
 
     if (arg === 'button'){
@@ -122,8 +114,7 @@ export default class Balance extends Component {
                      style={{cursor: sendDisabled ? "default" : "pointer" }}
                      borderColor="none"
                      borderRadius="24px"
-                     py="24px"
+                     height="48px"
-                     px="24px"
                      onClick={() => this.setState({sending: true})}
              />
              <Button children={(this.state.copiedButton) ? "Address Copied!" : "Copy Address"}
@@ -136,8 +127,7 @@ export default class Balance extends Component {
                      style={{cursor: (this.state.copiedButton) ? "default" : "pointer"}}
                      borderColor="none"
                      borderRadius="24px"
-                     py="24px"
+                     height="48px"
-                     px="24px"
                      onClick={() => {this.copyAddress('button')}}
              />
            </Row>

pkg/btc-wallet/src/js/components/lib/body.js

@@ -23,6 +23,9 @@ export default class Body extends Component {
   }
 
   render() {
+
+    const cardWidth = window.innerWidth <= 475 ? '350px' : '400px'
+
     if (!this.props.loaded) {
       return (
         <Box display="flex" width="100%" height="100%" alignItems="center" justifyContent="center">
@@ -41,7 +44,7 @@ export default class Body extends Component {
             <Col
              display='flex'
              flexDirection='column'
-             width='400px'
+             width={cardWidth}
             >
               <Header settings={true} state={this.props.state}/>
               <Settings state={this.props.state}
@@ -54,7 +57,7 @@ export default class Body extends Component {
             <Col
              display='flex'
              flexDirection='column'
-             width='400px'
+             width={cardWidth}
             >
               <Header settings={false} state={this.props.state}/>
               { (!this.props.warning) ? null : <Warning api={this.props.api}/>}

pkg/btc-wallet/src/js/components/lib/bridgeInvoice.js

@@ -221,10 +221,12 @@ export default class BridgeInvoice extends Component {
                 mr={3}
                 fontSize={1}
                 borderRadius='24px'
-                py='24px'
+                border='none'
-                px='24px'
+                height='48px'
                 onClick={() => this.sendBitcoin(txHex)}
-                disabled={!this.state.ready || error}
+                disabled={!this.state.ready || error || this.state.broadcasting}
+                color={(this.state.ready && !error && !this.state.broadcasting) ? "white" : "lighterGray"}
+                backgroundColor={(this.state.ready && !error && !this.state.broadcasting) ? "green" : "veryLightGray"}
                 style={{cursor: (this.state.ready && !error) ? "pointer" : "default"}}
               />
               {this.state.broadcasting ? <LoadingSpinner mr={3}/> : null}

pkg/btc-wallet/src/js/components/lib/invoice.js

@@ -276,8 +276,7 @@ export default class Invoice extends Component {
                 borderRadius='24px'
                 color={(this.state.ready && !error && !this.state.broadcasting) ? "white" : "lighterGray"}
                 backgroundColor={(this.state.ready && !error && !this.state.broadcasting) ? "green" : "veryLightGray"}
-                py='24px'
+                height='48px'
-                px='24px'
                 onClick={() => this.sendBitcoin(this.state.masterTicket, psbt)}
                 disabled={!this.state.ready || error || this.state.broadcasting}
                 style={{cursor: (this.state.ready && !error && !this.state.broadcasting) ? "pointer" : "default"}}

pkg/btc-wallet/src/js/components/lib/send.js

@@ -430,8 +430,7 @@ export default class Send extends Component {
                 fontWeight='bold'
                 borderRadius='24px'
                 mr={2}
-                py='24px'
+                height='48px'
-                px='24px'
                 onClick={() => this.toggleSignMethod(choosingSignMethod)}
                 color={signReady ? 'white' : 'lighterGray'}
                 backgroundColor={signReady ? 'rgba(33, 157, 255, 0.2)' : 'veryLightGray'}

pkg/btc-wallet/src/js/components/lib/signer.js

@@ -20,8 +20,7 @@ export default function Signer(props) {
         fontWeight='bold'
         cursor='pointer'
         color={(signMethod === 'masterTicket') ? 'blue' : 'lightBlue'}
-        py='24px'
+        height='48px'
-        px='24px'
         onClick={() => setSignMethod('masterTicket')}
         children='Sign with Master Ticket' />
       <Button
@@ -30,8 +29,7 @@ export default function Signer(props) {
         fontWeight='bold'
         cursor='pointer'
         color={(signMethod === 'bridge') ? 'blue' : 'lightBlue'}
-        py='24px'
+        height='48px'
-        px='24px'
         onClick={() => setSignMethod('bridge')}
         children='Sign with Bridge' />
     </Box>
@@ -42,8 +40,7 @@ export default function Signer(props) {
       fontSize={1}
       fontWeight='bold'
       borderRadius='24px'
-      py='24px'
+      height='48px'
-      px='24px'
       onClick={initPayment}
       color={signReady ? 'white' : 'lighterGray'}
       backgroundColor={signReady ? 'blue' : 'veryLightGray'}