Modal cleanups (#4855)

* Modal cleanups

* Revert header

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

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'

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

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;

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