Modal column boxing (#2651)

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>

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) {

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;
   }
 `);

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;