alignment fixes

This commit is contained in:
Sean Yesmunt 2018-06-13 01:20:53 -04:00
parent 20b2484cf2
commit ee42e5e1b4
9 changed files with 48 additions and 38 deletions

View file

@ -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>
);
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -121,6 +121,10 @@ input::placeholder {
opacity: 0.5;
}
label {
cursor: pointer;
}
button + input {
margin-left: $spacing-vertical * 2/3;
}

View file

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