diff --git a/src/components/account/account.css b/src/components/account/account.css index af2aea1f84..5026243ecd 100644 --- a/src/components/account/account.css +++ b/src/components/account/account.css @@ -92,7 +92,7 @@ .peer { font-size: 16px; float: left; - margin: 50px 0px; + margin: 5vh 0px; /* stylelint-disable-line */ } @media (--medium-viewport) { diff --git a/src/components/app/app.css b/src/components/app/app.css index 53e1c0fa0a..3ee5e3a592 100644 --- a/src/components/app/app.css +++ b/src/components/app/app.css @@ -15,7 +15,6 @@ body { .bodyWrapper { position: absolute; width: 100%; - height: 100%; left: 0; top: 0; align-items: center; diff --git a/src/components/app/variables.css b/src/components/app/variables.css index 91f0e4159a..27918da5b1 100644 --- a/src/components/app/variables.css +++ b/src/components/app/variables.css @@ -65,7 +65,7 @@ or "warn/action" ineastd of "red/green" --sidebar-width: 162px; --sidebar-width-xl: 192px; --main-box-width: 1291px; - --main-box-height: 788px; + --main-box-height: 75vh; /* stylelint-disable-line */ --border-radius-normal: 3px; --m-menu-bar-height: 72px; --s-menu-bar-height: 62px; diff --git a/src/components/box/box.css b/src/components/box/box.css index df690adeeb..054a77d602 100644 --- a/src/components/box/box.css +++ b/src/components/box/box.css @@ -1,9 +1,8 @@ -@import '../app/variables.css'; +@import './../app/variables.css'; .wrapper { position: relative; width: 100%; - height: var(--main-box-height); display: flex; box-sizing: border-box; background: var(--color-white); @@ -14,13 +13,10 @@ overflow: auto; overflow-x: hidden; margin: 0px; + height: var(--main-box-height); & footer { - position: absolute; - bottom: 0; - right: 0; - left: 0; - padding: 50px 30px 20px; + padding: 50px 0px; text-align: center; & :global .subTitle { diff --git a/src/components/header/header.css b/src/components/header/header.css index 89310f48c9..e7a63c12ca 100644 --- a/src/components/header/header.css +++ b/src/components/header/header.css @@ -11,9 +11,9 @@ } .wrapper { - padding: 8px; + padding: 0px 8px; float: right; - margin: 50px 0px; + margin: 5vh 0px; /* stylelint-disable-line */ } .logoWrapper { diff --git a/src/components/mainMenu/mainMenu.css b/src/components/mainMenu/mainMenu.css index bf47cf9a10..c919bbb540 100644 --- a/src/components/mainMenu/mainMenu.css +++ b/src/components/mainMenu/mainMenu.css @@ -41,7 +41,7 @@ box-shadow: none; width: 100% !important; border: none !important; - padding: 25px 10px !important; + padding: 20px 10px !important; } .navigationContainer { diff --git a/src/components/send/index.js b/src/components/send/index.js index 5da2fe8d1a..a1d2853cb9 100644 --- a/src/components/send/index.js +++ b/src/components/send/index.js @@ -36,7 +36,8 @@ class Send extends React.Component { onClick={this.setSendIsActive.bind(this, false)}> {t('Close')} - + 1024}/> diff --git a/src/components/send/styles.css b/src/components/send/styles.css index bcb6e64b86..60acaadfd7 100644 --- a/src/components/send/styles.css +++ b/src/components/send/styles.css @@ -64,3 +64,9 @@ font-size: 18px; } } + +.wrapper { + display: flex; + height: 100%; + justify-content: space-between; +} diff --git a/src/components/sendReadable/send.css b/src/components/sendReadable/send.css index f9a66800d4..a35df79dbf 100644 --- a/src/components/sendReadable/send.css +++ b/src/components/sendReadable/send.css @@ -4,6 +4,16 @@ --tab-inactive-color: --color-grayscale-dark; } +.wrapper { + padding: 0px 30px 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + overflow-y: hidden; + box-sizing: border-box; +} + .fee { text-align: right; margin-top: -12px; diff --git a/src/components/sendReadable/send.js b/src/components/sendReadable/send.js index b1c1e5ce36..4bc0fd32b1 100644 --- a/src/components/sendReadable/send.js +++ b/src/components/sendReadable/send.js @@ -93,7 +93,7 @@ class SendReadable extends React.Component { render() { return ( -
+

{this.props.t('Confirm transfer')}

@@ -105,7 +105,7 @@ class SendReadable extends React.Component {
-
+ -
-
-
-
-
- -
{this.props.t('Transactions can’t be reversed')}
-
-
-
+
+
+
+
+
+ +
{this.props.t('Transactions can’t be reversed')}
+
+
+
); } diff --git a/src/components/sendReadable/send.test.js b/src/components/sendReadable/send.test.js index f440fbbc96..7226765110 100644 --- a/src/components/sendReadable/send.test.js +++ b/src/components/sendReadable/send.test.js @@ -51,7 +51,7 @@ describe('Send Readable Component', () => { it('allows to send a transaction', () => { wrapper.find('.amount input').simulate('change', { target: { value: '120.25' } }); wrapper.find('.recipient input').simulate('change', { target: { value: '11004588490103196952L' } }); - wrapper.find('.send-button button').simulate('submit'); + wrapper.find('.send-button button').simulate('click'); expect(props.sent).to.have.been.calledWith({ account: props.account, activePeer: {}, diff --git a/src/components/sendWritable/send.css b/src/components/sendWritable/send.css index 5d66a67ba6..4730bcf377 100644 --- a/src/components/sendWritable/send.css +++ b/src/components/sendWritable/send.css @@ -77,8 +77,13 @@ input:read-only { } } -.header { - height: 300px; +.sendWrapper { + display: flex; + flex-flow: column wrap; + justify-content: space-between; + width: 100%; + height: 100%; + box-sizing: border-box; } @media (--small-viewport) { diff --git a/src/components/sendWritable/send.js b/src/components/sendWritable/send.js index 454adf01a8..7b71d59e3f 100644 --- a/src/components/sendWritable/send.js +++ b/src/components/sendWritable/send.js @@ -72,7 +72,7 @@ class SendWritable extends React.Component { render() { return ( -
+

Transfer

@@ -103,21 +103,20 @@ class SendWritable extends React.Component { theme={styles} onChange={this.handleChange.bind(this, 'amount')} />
{this.props.t('Fee: {{fee}} LSK', { fee: fromRawLsk(this.fee) })}
- -
- -
{this.props.t('Confirmation in the next step.')}
-
+
); } diff --git a/test/e2e/forging.feature b/test/e2e/forging.feature index 8748e3f4a9..1123509f69 100644 --- a/test/e2e/forging.feature +++ b/test/e2e/forging.feature @@ -3,7 +3,7 @@ Feature: Forging page Given I'm logged in as "delegate" When I click "forging" menu Then I should see forging center - And I should see table with 20 lines - And I scroll to the bottom of "forging" And I should see table with 40 lines + And I scroll to the bottom of "forging" + And I should see table with 60 lines diff --git a/test/integration/wallet.test.js b/test/integration/wallet.test.js index 39a34ac194..688e83ce86 100644 --- a/test/integration/wallet.test.js +++ b/test/integration/wallet.test.js @@ -111,7 +111,7 @@ describe('@integration: Wallet', () => { step('And I click "send next button"', clickStep.bind(null, 'send next button')); step('When I click "send button"', () => { requestToActivePeerStub.withArgs(match.any, 'transactions', match.any).returnsPromise().rejects({}); - wrapper.find('form').simulate('submit'); + wrapper.find('.send-button button').simulate('click'); }); step(`Then I should see text ${errorMessage} in "result box message" element`, shouldContainMessage.bind(this, 'result box message', errorMessage)); }); @@ -121,7 +121,7 @@ describe('@integration: Wallet', () => { step('And I fill in "1" to "amount" field', fillInputField.bind(null, '1', 'amount')); step('And I fill in "537318935439898807L" to "recipient" field', fillInputField.bind(null, '537318935439898807L', 'recipient')); step('And I click "send next button"', clickStep.bind(null, 'send next button')); - step('When I click "send button"', () => { wrapper.find('form').simulate('submit'); }); + step('When I click "send button"', () => { wrapper.find('.send-button button').simulate('click'); }); step(`Then I should see text ${successMessage} in "result box message" element`, shouldContainMessage.bind(this, 'result box message', successMessage)); }); @@ -132,7 +132,7 @@ describe('@integration: Wallet', () => { step('And I fill in "537318935439898807L" to "recipient" field', fillInputField.bind(null, '537318935439898807L', 'recipient')); step('And I click "send next button"', clickStep.bind(null, 'send next button')); step('And I fill in passphrase of "genesis" to "passphrase" field', fillInputField.bind(null, passphrase, 'passphrase')); - step('When I click "send button"', () => { wrapper.find('form').simulate('submit'); }); + step('When I click "send button"', () => { wrapper.find('.send-button button').simulate('click'); }); step(`Then I should see text ${successMessage} in "result box message" element`, shouldContainMessage.bind(this, 'result box message', successMessage)); }); @@ -143,7 +143,7 @@ describe('@integration: Wallet', () => { step('And I fill in "537318935439898807L" to "recipient" field', fillInputField.bind(null, '537318935439898807L', 'recipient')); step('And I click "send next button"', clickStep.bind(null, 'send next button')); step('And I fill in second passphrase of "second passphrase account" to "second passphrase" field', fillInputField.bind(null, secondPassphrase, 'second-passphrase')); - step('When I click "send button"', () => { wrapper.find('form').simulate('submit'); }); + step('When I click "send button"', () => { wrapper.find('.send-button button').simulate('click'); }); step(`Then I should see text ${successMessage} in "result box message" element`, shouldContainMessage.bind(this, 'result box message', successMessage)); }); @@ -155,7 +155,7 @@ describe('@integration: Wallet', () => { step('And I click "send next button"', clickStep.bind(null, 'send next button')); step('And I fill in passphrase of "second passphrase account" to "passphrase" field', fillInputField.bind(null, passphrase, 'passphrase')); step('And I fill in second passphrase of "second passphrase account" to "second passphrase" field', fillInputField.bind(null, secondPassphrase, 'second-passphrase')); - step('When I click "send button"', () => { wrapper.find('form').simulate('submit'); }); + step('When I click "send button"', () => { wrapper.find('.send-button button').simulate('click'); }); step(`Then I should see text ${successMessage} in "result box message" element`, shouldContainMessage.bind(this, 'result box message', successMessage)); }); });