alignment fixes
This commit is contained in:
parent
20b2484cf2
commit
ee42e5e1b4
9 changed files with 48 additions and 38 deletions
|
@ -4,7 +4,7 @@ import ReactDOMServer from 'react-dom/server';
|
|||
import classnames from 'classnames';
|
||||
import MarkdownPreview from 'component/common/markdown-preview';
|
||||
import SimpleMDE from 'react-simplemde-editor';
|
||||
import "simplemde/dist/simplemde.min.css";
|
||||
import 'simplemde/dist/simplemde.min.css';
|
||||
|
||||
type Props = {
|
||||
name: string,
|
||||
|
@ -20,6 +20,7 @@ type Props = {
|
|||
placeholder?: string | number,
|
||||
children?: React.Node,
|
||||
stretch?: boolean,
|
||||
fixClass?: string, // class applied to prefix/postfix label
|
||||
};
|
||||
|
||||
export class FormField extends React.PureComponent<Props> {
|
||||
|
@ -35,6 +36,7 @@ export class FormField extends React.PureComponent<Props> {
|
|||
type,
|
||||
children,
|
||||
stretch,
|
||||
fixClass,
|
||||
...inputProps
|
||||
} = this.props;
|
||||
|
||||
|
@ -55,12 +57,12 @@ export class FormField extends React.PureComponent<Props> {
|
|||
{...inputProps}
|
||||
type="textarea"
|
||||
options={{
|
||||
hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
|
||||
previewRender(plainText) {
|
||||
const preview = <MarkdownPreview content={plainText}/>;
|
||||
return ReactDOMServer.renderToString(preview);
|
||||
}
|
||||
}}
|
||||
hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
|
||||
previewRender(plainText) {
|
||||
const preview = <MarkdownPreview content={plainText} />;
|
||||
return ReactDOMServer.renderToString(preview);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -92,22 +94,18 @@ export class FormField extends React.PureComponent<Props> {
|
|||
})}
|
||||
>
|
||||
{prefix && (
|
||||
<label htmlFor={name} className="form-field__prefix">
|
||||
<label htmlFor={name} className={classnames('form-field__prefix', fixClass)}>
|
||||
{prefix}
|
||||
</label>
|
||||
)}
|
||||
{input}
|
||||
{postfix && (
|
||||
<label htmlFor={name} className="form-field__postfix">
|
||||
<label htmlFor={name} className={classnames('form-field__postfix', fixClass)}>
|
||||
{postfix}
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
{helper && (
|
||||
<label htmlFor={name} className="form-field__help">
|
||||
{helper}
|
||||
</label>
|
||||
)}
|
||||
{helper && <div className="form-field__help">{helper}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -171,6 +171,7 @@ class FileList extends React.PureComponent<Props, State> {
|
|||
{!hideFilter && (
|
||||
<FormField
|
||||
prefix={__('Sort by')}
|
||||
fixClass="form-field--align-center"
|
||||
type="select"
|
||||
value={sortBy}
|
||||
onChange={this.handleSortChanged}
|
||||
|
|
|
@ -96,6 +96,7 @@ class TransactionList extends React.PureComponent<Props, State> {
|
|||
type="select"
|
||||
value={filter}
|
||||
onChange={this.handleFilterChanged}
|
||||
fixClass="form-field--align-center"
|
||||
prefix={__('Show')}
|
||||
postfix={
|
||||
<Button
|
||||
|
|
|
@ -56,8 +56,10 @@ class WalletSend extends React.PureComponent<Props> {
|
|||
label={__('Amount')}
|
||||
postfix={__('LBC')}
|
||||
className="input--price-amount"
|
||||
fixClass="form-field--fix-no-height"
|
||||
min="0"
|
||||
step="any"
|
||||
placeholder="5"
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
value={values.amount}
|
||||
|
|
|
@ -87,7 +87,12 @@ class WalletSendTip extends React.PureComponent<Props, State> {
|
|||
disabled={isPending || amount <= 0 || amount > balance}
|
||||
onClick={this.handleSendButtonClicked}
|
||||
/>
|
||||
<Button button="alt" label={__('Cancel')} onClick={onCancel} navigateParams={{ uri }} />
|
||||
<Button
|
||||
button="link"
|
||||
label={__('Cancel')}
|
||||
onClick={onCancel}
|
||||
navigateParams={{ uri }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -3,18 +3,11 @@ import Button from 'component/button';
|
|||
import RewardSummary from 'component/rewardSummary';
|
||||
import ShapeShift from 'component/shapeShift';
|
||||
import Page from 'component/page';
|
||||
import * as icons from 'constants/icons';
|
||||
|
||||
const GetCreditsPage = props => (
|
||||
const GetCreditsPage = () => (
|
||||
<Page>
|
||||
<RewardSummary />
|
||||
<ShapeShift />
|
||||
<section className="card card--section">
|
||||
<div className="card__title">{__('From External Wallet')}</div>
|
||||
<div className="card__actions">
|
||||
<Button button="primary" icon={icons.SEND} navigate="/send" label={__('Send / Receive')} />
|
||||
</div>
|
||||
</section>
|
||||
<section className="card card--section">
|
||||
<div className="card__title">{__('More ways to get LBRY Credits')}</div>
|
||||
<div className="card__content">
|
||||
|
|
|
@ -273,20 +273,18 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
|||
</section>
|
||||
<section className="card card--section">
|
||||
<div className="card__title">{__('Share Diagnostic Data')}</div>
|
||||
<div className="card__content">
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="share_usage_data"
|
||||
onChange={this.onShareDataChange}
|
||||
checked={daemonSettings.share_usage_data}
|
||||
postfix={__(
|
||||
'Help make LBRY better by contributing analytics and diagnostic data about my usage.'
|
||||
)}
|
||||
helper={__(
|
||||
'You will be ineligible to earn rewards while diagnostics are not being shared.'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="share_usage_data"
|
||||
onChange={this.onShareDataChange}
|
||||
checked={daemonSettings.share_usage_data}
|
||||
postfix={__(
|
||||
'Help make LBRY better by contributing analytics and diagnostic data about my usage.'
|
||||
)}
|
||||
helper={__(
|
||||
'You will be ineligible to earn rewards while diagnostics are not being shared.'
|
||||
)}
|
||||
/>
|
||||
</section>
|
||||
{
|
||||
<section className="card card--section">
|
||||
|
|
|
@ -121,6 +121,10 @@ input::placeholder {
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button + input {
|
||||
margin-left: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
|
|
@ -84,7 +84,7 @@
|
|||
|
||||
.form-field__help {
|
||||
color: var(--color-help);
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
.form-field__error {
|
||||
|
@ -94,6 +94,14 @@
|
|||
.form-field__prefix,
|
||||
.form-field__postfix {
|
||||
font-family: 'metropolis-medium';
|
||||
|
||||
&.form-field--fix-no-height {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&.form-field--align-center {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.form-field__prefix {
|
||||
|
|
Loading…
Reference in a new issue