referrer modal styling

ui/modal/modalSetReferrer/view.jsx

@@ -4,6 +4,7 @@ import { FormField, Form } from 'component/common/form';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 import HelpLink from 'component/common/help-link';
+import Card from 'component/common/card';
 
 type Props = {
   closeModal: () => void,
@@ -40,12 +41,18 @@ class ModalSetReferrer extends React.PureComponent<Props, State> {
     const { referrer } = this.state;
 
     return (
-      <Modal isOpen title={__('Enter Invitee')} contentLabel={__('Enter Invitee')} type="custom" onAborted={closeModal}>
-        <Form onSubmit={this.handleSubmit}>
-          <p>
+      <Modal isOpen contentLabel={__('Enter Invitee')} type="card" onAborted={closeModal}>
+        <Card
+          title={__('Enter Invitee')}
+          subtitle={
+            <React.Fragment>
               {__('Did someone invite you to use lbry.tv? Tell us who and you both get a reward!')}
-            <HelpLink href="https://lbry.com/faq/referrals" />.
-          </p>
+              <HelpLink href="https://lbry.com/faq/referrals" />
+            </React.Fragment>
+          }
+          actions={
+            <React.Fragment>
+              <Form onSubmit={this.handleSubmit}>
                 <FormField
                   autoFocus
                   type="text"
@@ -63,6 +70,9 @@ class ModalSetReferrer extends React.PureComponent<Props, State> {
                 <Button button="primary" label={__('Done')} onClick={closeModal} />
                 <Button button="link" label={__('Close')} onClick={closeModal} />
               </div>
+            </React.Fragment>
+          }
+        />
       </Modal>
     );
   }

ui/scss/component/_icon.scss

@@ -18,11 +18,10 @@
 }
 
 .icon--help {
-  margin-left: var(--spacing-small);
-  top: 0.2rem;
+  color: var(--color-subtitle);
+  margin-left: var(--spacing-xsmall);
   opacity: 0.7;
-  height: 1rem;
-  width: 1rem;
+  top: 2px;
 }
 
 .icon--hidden {