Merge pull request #177 from LiskHQ/175-change-send-modal-style

Change the style of Send modal to make it similar to other modals - Closes #175

src/app/components/send/send.less

@@ -33,4 +33,20 @@ send {
   md-card-title md-menu {
     margin: -8px -14px;
   }
+
+  md-dialog-actions .md-button {
+    margin-left: -8px;
+  }
+
+  md-menu.max-funds {
+    &:after {
+      content: '';
+      display: inline-block;
+      vertical-align: middle;
+      height: 100%;
+    }
+    button {
+      vertical-align: middle;
+    }
+  }
 }

src/app/components/send/send.pug

@@ -1,33 +1,36 @@
-md-dialog.dialog-send(aria-label='Transfering', style='width: 700px; max-width: 700px')
-  md-card.offline-hide
-    md-card-title
-      md-card-title-text
-        span.md-title Send
-      md-menu(md-position-mode='target-right target')
-        md-button.md-icon-button(ng-click='$mdOpenMenu()')
-          i.material-icons more_vert
-        md-menu-content(width='4')
-          md-menu-item
-            md-button(ng-click='$ctrl.setMaxAmount()')
-              div(layout='row', flex='')
-                p(flex='') Set maximum amount
-    md-card-content
-      form(name='$ctrl.sendForm')
-        md-content(flex='100', flex-gt-sm='70', flex-offset-gt-sm='15')
+div.dialog-send(aria-label='Send funds')
+  form(name='$ctrl.sendForm')
+    md-toolbar
+      .md-toolbar-tools
+        h2 Send
+    md-dialog-content
+      .md-dialog-content
+        div
           md-input-container.md-block
             label Recipient Address
             input(type='text', name='recipient', ng-model='$ctrl.recipient.value', required, ng-pattern='$ctrl.recipient.regexp', ng-disabled='$ctrl.loading')
             div(ng-messages='$ctrl.sendForm.recipient.$error')
               div(ng-message='required') Required
               div(ng-message='pattern') Invalid
-          md-input-container.md-block
-            label Transaction Amount
-            input(type='text', name='amount', ng-model='$ctrl.amount.value', required, ng-pattern='$ctrl.amount.regexp', ng-disabled='$ctrl.loading', ng-max='$ctrl.amount.max')
-            div.fee(ng-show='$ctrl.amount.value') Fee: 0.1 LSK
-            div(ng-messages='$ctrl.sendForm.amount.$error')
-              div(ng-message='required') Required
-              div(ng-message='pattern') Invalid
-              div(ng-message='max') Insufficient funds
-      md-content(layout='row', layout-align='center center')
-        md-button.md-raised.md-secondary(ng-disabled='$ctrl.loading', ng-click='$ctrl.cancel()') {{ 'Cancel' }}
-        md-button.md-raised.md-primary(ng-disabled='!$ctrl.sendForm.$valid || $ctrl.loading', ng-click='$ctrl.go()') {{ $ctrl.loading ? 'Sending...' : 'Send' }}
+          <div layout="row">
+            md-input-container.md-block.flex-95
+              label Transaction Amount
+              input(type='text', name='amount', ng-model='$ctrl.amount.value', required, ng-pattern='$ctrl.amount.regexp', ng-disabled='$ctrl.loading', ng-max='$ctrl.amount.max')
+              div.fee(ng-show='$ctrl.amount.value') Fee: 0.1 LSK
+              div(ng-messages='$ctrl.sendForm.amount.$error')
+                div(ng-message='required') Required
+                div(ng-message='pattern') Invalid
+                div(ng-message='max') Insufficient funds
+            md-menu.flex-5.max-funds(md-position-mode='target-right target')
+              md-button.md-icon-button(ng-click='$mdOpenMenu()')
+                i.material-icons more_vert
+              md-menu-content(width='4')
+                md-menu-item
+                  md-button(ng-click='$ctrl.setMaxAmount()')
+                    div(layout='row', flex='')
+                      p(flex='') Set maximum amount
+
+    md-dialog-actions(layout='row')
+      md-button.md-raised.md-secondary(ng-disabled='$ctrl.loading', ng-click='$ctrl.cancel()') {{ 'Cancel' }}
+      span(flex)
+      md-button.md-raised.md-primary(ng-disabled='!$ctrl.sendForm.$valid || $ctrl.loading', ng-click='$ctrl.go()') {{ $ctrl.loading ? 'Sending...' : 'Send' }}

src/app/components/send/sendModalService.js

@@ -6,7 +6,8 @@ app.factory('SendModal', ($mdDialog) => {
   };
 
   const show = (recipientId, amount) => ($mdDialog.show({
-    template: '<send recipient-id="ms.recipientId" transfer-amount="ms.amount"></send>',
+    template: '<md-dialog flex="80" ><send recipient-id="ms.recipientId" transfer-amount="ms.amount"></send></md-dialog>',
+    parent: angular.element('#main'),
     locals: {
       recipientId, amount,
     },

src/test/components/forging/forging.spec.js

@@ -41,10 +41,23 @@ describe('Forging component', () => {
       vote: '9999982470000000',
     };
 
-    account.set({
+    const network = {
+      address: 'http://localhost:4000',
+      custom: true,
+      name: 'Custom Node',
+      nethash: '198f2b61a8eb95fbeed58b8216780b68f697f26b849acf00c8c93bb9b24f783d',
+      node: 'localhost',
+      port: '4000',
+      ssl: false,
+      testnet: true,
+    };
+    const testAcount = {
       passphrase: delegate.passphrase,
       balance: lsk.from(100),
-    });
+      network,
+    };
+
+    account.set(testAcount);
 
     $scope = $rootScope.$new();
     element = $compile('<forging></forging>')($scope);
@@ -70,7 +83,7 @@ describe('Forging component', () => {
     forgingServiceMock.expects('getForgedStats').returns(deferred.promise).exactly(5);
     deferred.resolve({ });
 
-    controller.$scope.$emit('onAccountChange');
+    controller.$scope.$emit('onAccountChange', testAcount);
     $scope.$digest();
   });
 

src/test/components/send/send.spec.js

@@ -35,7 +35,7 @@ describe('Send component', () => {
 
   const HEADER_TEXT = 'Send';
   it(`should contain header saying "${HEADER_TEXT}"`, () => {
-    expect(element.find('.md-title').text()).to.equal(HEADER_TEXT);
+    expect(element.find('form md-toolbar .md-toolbar-tools h2').text()).to.equal(HEADER_TEXT);
   });
 
   const RECIPIENT_LABEL_TEXT = 'Recipient Address';