referrer modal styling

This commit is contained in:
Sean Yesmunt 2020-01-15 10:25:24 -05:00
parent fb7fa5a19e
commit 1c0a7ede0a
2 changed files with 36 additions and 27 deletions

View file

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

View file

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