From 038d459e89982628cff0a022b2d1c7ddca0a3123 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 28 Apr 2020 21:28:33 +0200
Subject: [PATCH] Modal column boxing (#2651)

---
 .../page-staking/src/Actions/Account/Nominate.tsx   | 13 ++++++++-----
 packages/react-components/src/Modal/Column.tsx      |  5 ++++-
 packages/react-components/src/Modal/Columns.tsx     |  5 +++--
 packages/react-components/src/styles/semantic.ts    |  1 -
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/page-staking/src/Actions/Account/Nominate.tsx b/packages/page-staking/src/Actions/Account/Nominate.tsx
index 18ffe2ea50..f5382f5975 100644
--- a/packages/page-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/page-staking/src/Actions/Account/Nominate.tsx
@@ -95,16 +95,19 @@ function Nominate ({ className, controllerId, next, nominating, onClose, stashId
       <Modal.Content className='ui--signer-Signer-Content'>
         <Modal.Columns>
           <Modal.Column>
-            <InputAddress
-              defaultValue={controllerId}
-              isDisabled
-              label={t('controller account')}
-            />
             <InputAddress
               defaultValue={stashId}
               isDisabled
               label={t('stash account')}
             />
+            <InputAddress
+              defaultValue={controllerId}
+              isDisabled
+              label={t('controller account')}
+            />
+          </Modal.Column>
+          <Modal.Column>
+            <p>{t('The stash that is to be affected. The transaction will be sent from the associated controller account.')}</p>
           </Modal.Column>
         </Modal.Columns>
         <Modal.Columns>
diff --git a/packages/react-components/src/Modal/Column.tsx b/packages/react-components/src/Modal/Column.tsx
index cf3cd61849..087a78cea1 100644
--- a/packages/react-components/src/Modal/Column.tsx
+++ b/packages/react-components/src/Modal/Column.tsx
@@ -19,16 +19,19 @@ export default React.memo(styled(Column)`
   }
 
   &:nth-child(2) {
+    background: #eee;
+    border-radius: 0.5rem;
     display: none;
     flex: 0%;
     font-size: 0.95rem;
     opacity: 0.75;
+    padding: 0.75em 1rem;
   }
 
   @media only screen and (min-width: 1024px) {
     &:nth-child(1),
     &:only-child {
-      flex: 0 66%;
+      flex: 0 65%;
     }
 
     &:nth-child(2) {
diff --git a/packages/react-components/src/Modal/Columns.tsx b/packages/react-components/src/Modal/Columns.tsx
index 5d402c76fe..d946d04300 100644
--- a/packages/react-components/src/Modal/Columns.tsx
+++ b/packages/react-components/src/Modal/Columns.tsx
@@ -14,11 +14,12 @@ function Columns ({ children, className }: ColumnProps): React.ReactElement<Colu
 }
 
 export default React.memo(styled(Columns)`
+  align-items: center;
   display: flex;
   flex-layout: row;
-  align-items: center;
+  justify-content: space-between;
 
   &+& {
-    margin-top: 1rem;
+    margin-top: 0.5rem;
   }
 `);
diff --git a/packages/react-components/src/styles/semantic.ts b/packages/react-components/src/styles/semantic.ts
index 3728c0e181..8027cd0edf 100644
--- a/packages/react-components/src/styles/semantic.ts
+++ b/packages/react-components/src/styles/semantic.ts
@@ -28,7 +28,6 @@ export default css`
   .ui.dropdown {
     &.disabled {
       background: transparent;
-      border-color: #eee;
       border-style: dashed;
       opacity: 1;