referrer modal styling
This commit is contained in:
parent
fb7fa5a19e
commit
1c0a7ede0a
2 changed files with 36 additions and 27 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Reference in a new issue