From 7ea14e1d9d8fa489ddf561890b9878b6ceb4be32 Mon Sep 17 00:00:00 2001
From: james-prado <jamesprado7@gmail.com>
Date: Wed, 7 Feb 2018 17:52:39 -0500
Subject: [PATCH] Center InlineSpinner

---
 common/components/GasLimitField.scss                  | 11 +++++++++++
 common/components/GasLimitField.tsx                   |  3 ++-
 common/components/NonceField.scss                     |  9 +++++++++
 common/components/NonceField.tsx                      |  2 +-
 .../components/TXMetaDataPanel/TXMetaDataPanel.scss   |  2 +-
 5 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 common/components/GasLimitField.scss

diff --git a/common/components/GasLimitField.scss b/common/components/GasLimitField.scss
new file mode 100644
index 00000000..cfc36f7a
--- /dev/null
+++ b/common/components/GasLimitField.scss
@@ -0,0 +1,11 @@
+@import 'common/sass/variables';
+
+.gaslimit {
+  &-label-wrapper {
+    align-items: center;
+    margin-bottom: $space-xs;
+    > label {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/common/components/GasLimitField.tsx b/common/components/GasLimitField.tsx
index 32c4183e..f5b1c8af 100644
--- a/common/components/GasLimitField.tsx
+++ b/common/components/GasLimitField.tsx
@@ -3,6 +3,7 @@ import { GasLimitFieldFactory } from './GasLimitFieldFactory';
 import translate from 'translations';
 import { gasLimitValidator } from 'libs/validators';
 import { InlineSpinner } from 'components/ui/InlineSpinner';
+import './GasLimitField.scss';
 
 interface Props {
   customLabel?: string;
@@ -13,7 +14,7 @@ export const GasLimitField: React.SFC<Props> = ({ customLabel, disabled }) => (
   <GasLimitFieldFactory
     withProps={({ gasLimit: { raw }, onChange, readOnly, gasEstimationPending }) => (
       <React.Fragment>
-        <div className="flex-wrapper">
+        <div className="gaslimit-label-wrapper flex-wrapper">
           {customLabel ? <label>{customLabel} </label> : <label>{translate('TRANS_gas')} </label>}
           <div className="flex-spacer" />
           <InlineSpinner active={gasEstimationPending} text="Calculating" />
diff --git a/common/components/NonceField.scss b/common/components/NonceField.scss
index 4a17f91f..0082106a 100644
--- a/common/components/NonceField.scss
+++ b/common/components/NonceField.scss
@@ -1,4 +1,13 @@
+@import 'common/sass/variables';
+
 .nonce {
+  &-label-wrapper {
+    align-items: center;
+    margin-bottom: $space-xs;
+    > label {
+      margin-bottom: 0;
+    }
+  }
   &-input-wrapper {
     position: relative;
   }
diff --git a/common/components/NonceField.tsx b/common/components/NonceField.tsx
index d8e7286d..9ebd3654 100644
--- a/common/components/NonceField.tsx
+++ b/common/components/NonceField.tsx
@@ -31,7 +31,7 @@ class NonceField extends React.Component<Props> {
         withProps={({ nonce: { raw, value }, onChange, readOnly, shouldDisplay }) => {
           return alwaysDisplay || shouldDisplay ? (
             <React.Fragment>
-              <div className="flex-wrapper">
+              <div className="nonce-label-wrapper flex-wrapper">
                 <label className="nonce-label">Nonce</label>
                 <Help
                   size={'x1'}
diff --git a/common/components/TXMetaDataPanel/TXMetaDataPanel.scss b/common/components/TXMetaDataPanel/TXMetaDataPanel.scss
index 5601f3b6..ecf38b5e 100644
--- a/common/components/TXMetaDataPanel/TXMetaDataPanel.scss
+++ b/common/components/TXMetaDataPanel/TXMetaDataPanel.scss
@@ -12,7 +12,7 @@
 .Calculating-limit {
   color: rgba(51, 51, 51, 0.7);
   display: flex;
-  align-items: baseline;
+  align-items: center;
   font-weight: 400;
   opacity: 0;
   pointer-events: none;