diff --git a/js/src/views/ParityBar/parityBar.css b/js/src/views/ParityBar/parityBar.css
index d2f894546..5b01613d4 100644
--- a/js/src/views/ParityBar/parityBar.css
+++ b/js/src/views/ParityBar/parityBar.css
@@ -14,6 +14,7 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see .
*/
+
.bar, .expanded {
position: fixed;
bottom: 0;
@@ -42,8 +43,7 @@
.expanded {
right: 16px;
- width: 964px;
- height: 300px;
+ max-height: 300px;
border-radius: 4px 4px 0 0;
overflow-y: auto;
display: flex;
diff --git a/js/src/views/Signer/_layout.css b/js/src/views/Signer/_layout.css
new file mode 100644
index 000000000..3970a7e02
--- /dev/null
+++ b/js/src/views/Signer/_layout.css
@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity. If not, see .
+*/
+
+$pendingHeight: 190px;
+$finishedHeight: 120px;
+
+$embedWidth: 920px;
+$statusWidth: 260px;
+
+$accountPadding: 75px;
diff --git a/js/src/views/Signer/components/SignRequest/SignRequest.css b/js/src/views/Signer/components/SignRequest/SignRequest.css
index 03ae73009..4361e0626 100644
--- a/js/src/views/Signer/components/SignRequest/SignRequest.css
+++ b/js/src/views/Signer/components/SignRequest/SignRequest.css
@@ -14,31 +14,35 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see .
*/
+
+@import '../../_layout.css';
+
.container {
- position: relative;
- padding: 25px 0 15px;
+ display: flex;
+ padding: 1.5em 0 1em;
}
.actions, .signDetails {
- display: inline-block;
vertical-align: middle;
- min-height: 120px;
+ min-height: $pendingHeight;
}
.signDetails {
- border-right: 1px solid #eee;
- margin-right: 2rem;
- /* TODO [todr] mess - just to align with transaction */
- width: 430px;
+ flex: 1;
}
.address, .info {
+ box-sizing: border-box;
display: inline-block;
+ width: 50%;
+}
+
+.address {
+ padding-right: $accountPadding;
}
.info {
padding: 0 30px;
- width: 250px;
color: #E53935;
vertical-align: top;
}
@@ -63,7 +67,7 @@
.actions {
display: inline-block;
- min-height: 120px;
+ min-height: $finishedHeight;
}
.signDetails img {
diff --git a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css
index 0db00d7e4..3617f666a 100644
--- a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css
+++ b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css
@@ -15,31 +15,26 @@
/* along with Parity. If not, see .
*/
+@import '../../_layout.css';
+
.container {
- padding: 25px 0 15px;
-}
+ display: flex;
+ padding: 1.5em 0 1em;
-.mainContainer {
- position: relative;
-}
-
-.mainContainer > * {
- vertical-align: middle;
- min-height: 120px;
+ & > * {
+ vertical-align: middle;
+ min-height: $finishedHeight;
+ }
}
.statusContainer {
- width: 220px;
- padding: 0 40px 0 40px;
- /*border-left: 1px solid #aaa;*/
- position: absolute;
- top: 0;
- right: 0;
- box-sizing: content-box;
+ box-sizing: border-box;
+ float: right;
+ padding: 0 1em;
+ flex: 0 0 $statusWidth;
}
.transactionDetails {
- padding-right: 321px;
width: 100%;
box-sizing: border-box;
}
diff --git a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js
index dcfdb5e00..f24481e57 100644
--- a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js
+++ b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js
@@ -63,22 +63,20 @@ export default class TransactionFinished extends Component {
return (
-
-
-
-
-
- { this.renderStatus() }
-
+
+
+
+
+ { this.renderStatus() }
);
diff --git a/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css b/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css
index 78263e91b..6612d960e 100644
--- a/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css
+++ b/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css
@@ -14,7 +14,11 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see
.
*/
+
+@import '../../_layout.css';
+
.transaction {
+ flex: 1;
}
.transaction > * {
@@ -30,11 +34,11 @@
}
.from .account {
- padding-right: 75px;
+ padding-right: $accountPadding;
}
.to .account {
- padding-left: 75px;
+ padding-left: $accountPadding;
}
.from img, .to img {
diff --git a/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js b/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js
index f86150e48..6e83e0c7e 100644
--- a/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js
+++ b/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js
@@ -33,7 +33,6 @@ export default class TransactionMainDetails extends Component {
isTest: PropTypes.bool.isRequired,
to: PropTypes.string, // undefined if it's a contract
toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
- className: PropTypes.string,
children: PropTypes.node
};
@@ -60,23 +59,15 @@ export default class TransactionMainDetails extends Component {
}
render () {
- const { className, children } = this.props;
+ const { to } = this.props;
- return (
-
- { this.renderTransfer() }
- { this.renderContract() }
- { children }
-
- );
+ return to
+ ? this.renderTransfer()
+ : this.renderContract();
}
renderTransfer () {
- const { from, fromBalance, to, toBalance, isTest } = this.props;
-
- if (!to) {
- return;
- }
+ const { children, from, fromBalance, to, toBalance, isTest } = this.props;
return (
@@ -101,16 +92,13 @@ export default class TransactionMainDetails extends Component {
isTest={ isTest } />
+ { children }
);
}
renderContract () {
- const { from, fromBalance, to, isTest } = this.props;
-
- if (to) {
- return;
- }
+ const { children, from, fromBalance, isTest } = this.props;
return (
@@ -134,6 +122,7 @@ export default class TransactionMainDetails extends Component {
Contract
+ { children }
);
}
diff --git a/js/src/views/Signer/components/TransactionPending/TransactionPending.css b/js/src/views/Signer/components/TransactionPending/TransactionPending.css
index 9574826a3..5cd2d10f5 100644
--- a/js/src/views/Signer/components/TransactionPending/TransactionPending.css
+++ b/js/src/views/Signer/components/TransactionPending/TransactionPending.css
@@ -14,33 +14,14 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see .
*/
+
+@import '../../_layout.css';
+
.container {
- padding: 25px 0 15px;
-}
+ display: flex;
+ padding: 1.5em 0 1em;
-.transactionDetails {
- padding-right: 321px;
- width: 100%;
- box-sizing: border-box;
-}
-
-.mainContainer {
- position: relative;
-}
-
-.mainContainer:after {
- clear: both;
-}
-
-.mainContainer > * {
- vertical-align: middle;
- min-height: 190px;
-}
-
-.inputs {
- margin-right: 30px;
- margin-left: 30px;
- width: 180px;
- position: relative;
- top: -15px; /* due to material ui weird styling */
+ & > * {
+ vertical-align: middle;
+ }
}
diff --git a/js/src/views/Signer/components/TransactionPending/TransactionPending.js b/js/src/views/Signer/components/TransactionPending/TransactionPending.js
index 0742c2c76..013d887a5 100644
--- a/js/src/views/Signer/components/TransactionPending/TransactionPending.js
+++ b/js/src/views/Signer/components/TransactionPending/TransactionPending.js
@@ -70,29 +70,27 @@ export default class TransactionPending extends Component {
return (
);
}
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css
index 37c1a8317..aaea1de8d 100644
--- a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css
@@ -14,14 +14,13 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see .
*/
+
+@import '../../_layout.css';
+
.container {
- width: 220px;
- padding: 20px 40px 0 40px;
- /*border-left: 1px solid #aaa;*/
- position: absolute;
- top: 0;
- right: 0;
- box-sizing: content-box;
+ box-sizing: border-box;
+ padding: 1em 1em 0 1em;
+ flex: 0 0 $statusWidth;
}
.rejectToggle {
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css
index d10e634ae..7ab5a46a6 100644
--- a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css
@@ -15,7 +15,7 @@
/* along with Parity. If not, see .
*/
.confirmForm {
- margin-top: -45px;
+ margin-top: -2em;
}
.confirmButton {
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css
index 39c7f377a..9e91456ca 100644
--- a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css
@@ -14,6 +14,7 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see .
*/
+
/* the rejection button itself, once .reject has been pressed */
.rejectButton {
display: block !important;
diff --git a/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.css b/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.css
index 3504c7028..ae71b1004 100644
--- a/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.css
+++ b/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.css
@@ -1,3 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity. If not, see .
+*/
+
+.container {
+ display: block;
+}
+
.iconsContainer {
display: block;
text-align: center;
@@ -67,4 +88,3 @@
.expandedContainer:empty {
padding: 0;
}
-
diff --git a/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js b/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js
index fb0a329e0..283712ed0 100644
--- a/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js
+++ b/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js
@@ -27,7 +27,6 @@ import styles from './TransactionSecondaryDetails.css';
import * as tUtil from '../util/transaction';
export default class TransactionSecondaryDetails extends Component {
-
static propTypes = {
id: PropTypes.object.isRequired,
date: PropTypes.instanceOf(Date),
@@ -45,7 +44,7 @@ export default class TransactionSecondaryDetails extends Component {
const className = this.props.className || '';
return (
-
+
{ this.renderGasPrice() }
{ this.renderData() }
diff --git a/js/src/views/Signer/containers/Embedded/embedded.css b/js/src/views/Signer/containers/Embedded/embedded.css
index cbe12d6dc..94e0f3933 100644
--- a/js/src/views/Signer/containers/Embedded/embedded.css
+++ b/js/src/views/Signer/containers/Embedded/embedded.css
@@ -14,8 +14,13 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see .
*/
+
+@import '../../_layout.css';
+
.signer {
- width: 916px;
+ box-sizing: border-box;
+ padding: 0;
+ width: $embedWidth;
}
.pending {
diff --git a/js/src/views/Signer/containers/RequestsPage/RequestsPage.css b/js/src/views/Signer/containers/RequestsPage/RequestsPage.css
index 3dbf1cf48..3701c3097 100644
--- a/js/src/views/Signer/containers/RequestsPage/RequestsPage.css
+++ b/js/src/views/Signer/containers/RequestsPage/RequestsPage.css
@@ -14,6 +14,7 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see .
*/
+
.request {
}