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 Button from 'component/button';
import HelpLink from 'component/common/help-link';
import Card from 'component/common/card';
type Props = {
closeModal: () => void,
@ -40,29 +41,38 @@ 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>
{__('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>
<FormField
autoFocus
type="text"
name="referrer-code"
inputButton={
<Button button="primary" type="submit" disabled={!referrer || rewardIsPending} label={__('Set')} />
}
label={__('Code or channel')}
placeholder="0123abc"
value={referrer}
onChange={e => this.setState({ referrer: e.target.value })}
/>
</Form>
<div className="card__actions">
<Button button="primary" label={__('Done')} onClick={closeModal} />
<Button button="link" label={__('Close')} onClick={closeModal} />
</div>
<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" />
</React.Fragment>
}
actions={
<React.Fragment>
<Form onSubmit={this.handleSubmit}>
<FormField
autoFocus
type="text"
name="referrer-code"
inputButton={
<Button button="primary" type="submit" disabled={!referrer || rewardIsPending} label={__('Set')} />
}
label={__('Code or channel')}
placeholder="0123abc"
value={referrer}
onChange={e => this.setState({ referrer: e.target.value })}
/>
</Form>
<div className="card__actions">
<Button button="primary" label={__('Done')} onClick={closeModal} />
<Button button="link" label={__('Close')} onClick={closeModal} />
</div>
</React.Fragment>
}
/>
</Modal>
);
}

View file

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