From e95ef0160fea9ccd73e6f1e3620060efaf4ef617 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 25 Nov 2016 17:20:16 +0100
Subject: [PATCH] Signer layouts to flexbox (#3600)

* Use variables for signer form widths

* Simplify signer layouts with flex

* Fix styling issues with Signer
---
 js/src/views/ParityBar/parityBar.css          |  4 +-
 js/src/views/Signer/_layout.css               | 24 +++++++++++
 .../components/SignRequest/SignRequest.css    | 24 ++++++-----
 .../TransactionFinished.css                   | 29 ++++++-------
 .../TransactionFinished.js                    | 30 +++++++------
 .../TransactionMainDetails.css                |  8 +++-
 .../TransactionMainDetails.js                 | 27 ++++--------
 .../TransactionPending/TransactionPending.css | 35 ++++------------
 .../TransactionPending/TransactionPending.js  | 42 +++++++++----------
 .../TransactionPendingForm.css                | 13 +++---
 .../TransactionPendingFormConfirm.css         |  2 +-
 .../TransactionPendingFormReject.css          |  1 +
 .../TransactionSecondaryDetails.css           | 22 +++++++++-
 .../TransactionSecondaryDetails.js            |  3 +-
 .../Signer/containers/Embedded/embedded.css   |  7 +++-
 .../containers/RequestsPage/RequestsPage.css  |  1 +
 16 files changed, 145 insertions(+), 127 deletions(-)
 create mode 100644 js/src/views/Signer/_layout.css

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 <http://www.gnu.org/licenses/>.
 */
+
 .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 <http://www.gnu.org/licenses/>.
+*/
+
+$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 <http://www.gnu.org/licenses/>.
 */
+
+@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 <http://www.gnu.org/licenses/>.
 */
 
+@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 (
       <div className={ `${styles.container} ${className || ''}` }>
-        <div className={ styles.mainContainer }>
-          <TransactionMainDetails
-            { ...this.props }
-            { ...this.state }
-            fromBalance={ fromBalance }
-            toBalance={ toBalance }
-            className={ styles.transactionDetails }
-          >
-            <TransactionSecondaryDetails
-              id={ id }
-              date={ date }
-            />
-          </TransactionMainDetails>
-          <div className={ styles.statusContainer }>
-            { this.renderStatus() }
-          </div>
+        <TransactionMainDetails
+          { ...this.props }
+          { ...this.state }
+          fromBalance={ fromBalance }
+          toBalance={ toBalance }
+          className={ styles.transactionDetails }
+        >
+          <TransactionSecondaryDetails
+            id={ id }
+            date={ date }
+          />
+        </TransactionMainDetails>
+        <div className={ styles.statusContainer }>
+          { this.renderStatus() }
         </div>
       </div>
     );
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 <http://www.gnu.org/licenses/>.
 */
+
+@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 (
-      <div className={ className }>
-        { this.renderTransfer() }
-        { this.renderContract() }
-        { children }
-      </div>
-    );
+    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 (
       <div className={ styles.transaction }>
@@ -101,16 +92,13 @@ export default class TransactionMainDetails extends Component {
               isTest={ isTest } />
           </div>
         </div>
+        { children }
       </div>
     );
   }
 
   renderContract () {
-    const { from, fromBalance, to, isTest } = this.props;
-
-    if (to) {
-      return;
-    }
+    const { children, from, fromBalance, isTest } = this.props;
 
     return (
       <div className={ styles.transaction }>
@@ -134,6 +122,7 @@ export default class TransactionMainDetails extends Component {
             Contract
           </div>
         </div>
+        { children }
       </div>
     );
   }
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 <http://www.gnu.org/licenses/>.
 */
+
+@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 (
       <div className={ `${styles.container} ${className || ''}` }>
-        <div className={ styles.mainContainer }>
-          <TransactionMainDetails
-            { ...this.props }
-            { ...this.state }
-            fromBalance={ fromBalance }
-            toBalance={ toBalance }
-            className={ styles.transactionDetails }
-            totalValue={ totalValue }>
-            <TransactionSecondaryDetails
-              id={ id }
-              date={ date }
-              data={ data }
-              gasPriceEthmDisplay={ gasPriceEthmDisplay }
-              gasToDisplay={ gasToDisplay }
-            />
-          </TransactionMainDetails>
-          <TransactionPendingForm
-            address={ from }
-            isSending={ this.props.isSending }
-            onConfirm={ this.onConfirm }
-            onReject={ this.onReject }
+        <TransactionMainDetails
+          { ...this.props }
+          { ...this.state }
+          fromBalance={ fromBalance }
+          toBalance={ toBalance }
+          className={ styles.transactionDetails }
+          totalValue={ totalValue }>
+          <TransactionSecondaryDetails
+            id={ id }
+            date={ date }
+            data={ data }
+            gasPriceEthmDisplay={ gasPriceEthmDisplay }
+            gasToDisplay={ gasToDisplay }
           />
-        </div>
+        </TransactionMainDetails>
+        <TransactionPendingForm
+          address={ from }
+          isSending={ this.props.isSending }
+          onConfirm={ this.onConfirm }
+          onReject={ this.onReject }
+        />
       </div>
     );
   }
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 <http://www.gnu.org/licenses/>.
 */
+
+@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 <http://www.gnu.org/licenses/>.
 */
 .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 <http://www.gnu.org/licenses/>.
 */
+
 /* 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 <http://www.gnu.org/licenses/>.
+*/
+
+.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 (
-      <div className={ className }>
+      <div className={ `${styles.container} ${className}` }>
         <div className={ styles.iconsContainer }>
           { 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 <http://www.gnu.org/licenses/>.
 */
+
+@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 <http://www.gnu.org/licenses/>.
 */
+
 .request {
 }