From 27cc785dbbea27e2aa97e572fb908ca3a88ad2bb Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 19 Mar 2021 12:56:29 +0100
Subject: [PATCH] Modal cleanups (#4855)

* Modal cleanups

* Revert header
---
 packages/page-accounts/src/modals/Import.tsx     | 4 +++-
 packages/page-accounts/src/modals/Transfer.tsx   | 9 +++------
 packages/react-components/src/Modal/Columns.tsx  | 4 ++--
 packages/react-components/src/Modal/index.tsx    | 6 +++---
 packages/react-components/src/styles/semantic.ts | 8 ++++++--
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/page-accounts/src/modals/Import.tsx b/packages/page-accounts/src/modals/Import.tsx
index 61cc0ac83c..4dbc809c41 100644
--- a/packages/page-accounts/src/modals/Import.tsx
+++ b/packages/page-accounts/src/modals/Import.tsx
@@ -134,7 +134,9 @@ function Import ({ className = '', onClose, onStatusChange }: Props): React.Reac
             value={password}
           />
         </Modal.Columns>
-        <ExternalWarning />
+        <Modal.Columns>
+          <ExternalWarning />
+        </Modal.Columns>
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
         <Button
diff --git a/packages/page-accounts/src/modals/Transfer.tsx b/packages/page-accounts/src/modals/Transfer.tsx
index a29a6b0a93..28d9fb82cd 100644
--- a/packages/page-accounts/src/modals/Transfer.tsx
+++ b/packages/page-accounts/src/modals/Transfer.tsx
@@ -140,12 +140,7 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
               <MarkError content={t<string>('The recipient is associated with a known phishing site on {{url}}', { replace: { url: recipientPhish } })} />
             )}
           </Modal.Columns>
-          <Modal.Columns hint={
-            <>
-              <p>{t<string>('If the recipient account is new, the balance needs to be more than the existential deposit. Likewise if the sending account balance drops below the same value, the account will be removed from the state.')}</p>
-              <p>{t('With the keep-alive option set, the account is protected against removal due to low balances.')}</p>
-            </>
-          }>
+          <Modal.Columns hint={t<string>('If the recipient account is new, the balance needs to be more than the existential deposit. Likewise if the sending account balance drops below the same value, the account will be removed from the state.')}>
             {canToggleAll && isAll
               ? (
                 <InputBalance
@@ -176,6 +171,8 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
                 </>
               )
             }
+          </Modal.Columns>
+          <Modal.Columns hint={t('With the keep-alive option set, the account is protected against removal due to low balances.')}>
             {isFunction(api.tx.balances.transferKeepAlive) && (
               <Toggle
                 className='typeToggle'
diff --git a/packages/react-components/src/Modal/Columns.tsx b/packages/react-components/src/Modal/Columns.tsx
index 0e6b92d240..55da24b27f 100644
--- a/packages/react-components/src/Modal/Columns.tsx
+++ b/packages/react-components/src/Modal/Columns.tsx
@@ -18,7 +18,7 @@ function Columns ({ children, className = '', hint }: ColumnsProps): React.React
 }
 
 export default React.memo(styled(Columns)`
-  align-items: center;
+  align-items: flex-start;
   display: flex;
   justify-content: space-between;
 
@@ -52,7 +52,7 @@ export default React.memo(styled(Columns)`
         flex: 0 34%;
         font-size: 0.95rem;
         opacity: 0.75;
-        padding: 0.25em 0.5rem;
+        padding: 0.75rem 0 0.25rem 0.5rem;
       }
     }
   }
diff --git a/packages/react-components/src/Modal/index.tsx b/packages/react-components/src/Modal/index.tsx
index db621c7236..75ae278e00 100644
--- a/packages/react-components/src/Modal/index.tsx
+++ b/packages/react-components/src/Modal/index.tsx
@@ -15,7 +15,6 @@ type ModalType = React.FC<ModalProps> & {
   Actions: React.FC<ActionsProps>;
   Columns: React.FC<ColumnsProps>;
   Content: typeof SUIModal.Content;
-  Header: typeof SUIModal.Header;
   Description: typeof SUIModal.Description;
 };
 
@@ -31,7 +30,9 @@ function ModalBase (props: ModalProps): React.ReactElement<ModalProps> {
       open={open}
     >
       {header && (
-        <SUIModal.Header>{header}</SUIModal.Header>
+        <div className='header'>
+          <h1>{header}</h1>
+        </div>
       )}
       {children}
     </SUIModal>
@@ -43,7 +44,6 @@ const Modal = React.memo(ModalBase) as unknown as ModalType;
 Modal.Actions = Actions;
 Modal.Columns = Columns;
 Modal.Content = SUIModal.Content;
-Modal.Header = SUIModal.Header;
 Modal.Description = SUIModal.Description;
 
 export default Modal;
diff --git a/packages/react-components/src/styles/semantic.ts b/packages/react-components/src/styles/semantic.ts
index 34d2d310b2..036259f793 100644
--- a/packages/react-components/src/styles/semantic.ts
+++ b/packages/react-components/src/styles/semantic.ts
@@ -149,12 +149,16 @@ export default (_theme: ThemeDef): string => `
       font-size: 1.75rem;
       font-weight: var(--font-weight-normal);
       line-height: 1.25rem;
-      padding: 1.5rem 1.75rem 0;
+      padding: 0.75rem 1.5rem 0;
       text-transform: lowercase;
 
       > label {
         margin-top: 0.5rem;
       }
+
+      > h1 {
+        line-height: 1;
+      }
     }
 
     .description {
@@ -199,7 +203,7 @@ export default (_theme: ThemeDef): string => `
 
   /* modals aligned to top, not center */
   .ui.dimmer {
-    background-color: rgba(0,0,0,0.5);
+    background-color: rgba(96, 96, 96, 0.5);
     justify-content: flex-start;
   }