Center InlineSpinner
This commit is contained in:
parent
21082e6d90
commit
7ea14e1d9d
|
@ -0,0 +1,11 @@
|
||||||
|
@import 'common/sass/variables';
|
||||||
|
|
||||||
|
.gaslimit {
|
||||||
|
&-label-wrapper {
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: $space-xs;
|
||||||
|
> label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,6 +3,7 @@ import { GasLimitFieldFactory } from './GasLimitFieldFactory';
|
||||||
import translate from 'translations';
|
import translate from 'translations';
|
||||||
import { gasLimitValidator } from 'libs/validators';
|
import { gasLimitValidator } from 'libs/validators';
|
||||||
import { InlineSpinner } from 'components/ui/InlineSpinner';
|
import { InlineSpinner } from 'components/ui/InlineSpinner';
|
||||||
|
import './GasLimitField.scss';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
customLabel?: string;
|
customLabel?: string;
|
||||||
|
@ -13,7 +14,7 @@ export const GasLimitField: React.SFC<Props> = ({ customLabel, disabled }) => (
|
||||||
<GasLimitFieldFactory
|
<GasLimitFieldFactory
|
||||||
withProps={({ gasLimit: { raw }, onChange, readOnly, gasEstimationPending }) => (
|
withProps={({ gasLimit: { raw }, onChange, readOnly, gasEstimationPending }) => (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div className="flex-wrapper">
|
<div className="gaslimit-label-wrapper flex-wrapper">
|
||||||
{customLabel ? <label>{customLabel} </label> : <label>{translate('TRANS_gas')} </label>}
|
{customLabel ? <label>{customLabel} </label> : <label>{translate('TRANS_gas')} </label>}
|
||||||
<div className="flex-spacer" />
|
<div className="flex-spacer" />
|
||||||
<InlineSpinner active={gasEstimationPending} text="Calculating" />
|
<InlineSpinner active={gasEstimationPending} text="Calculating" />
|
||||||
|
|
|
@ -1,4 +1,13 @@
|
||||||
|
@import 'common/sass/variables';
|
||||||
|
|
||||||
.nonce {
|
.nonce {
|
||||||
|
&-label-wrapper {
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: $space-xs;
|
||||||
|
> label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
&-input-wrapper {
|
&-input-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,7 +31,7 @@ class NonceField extends React.Component<Props> {
|
||||||
withProps={({ nonce: { raw, value }, onChange, readOnly, shouldDisplay }) => {
|
withProps={({ nonce: { raw, value }, onChange, readOnly, shouldDisplay }) => {
|
||||||
return alwaysDisplay || shouldDisplay ? (
|
return alwaysDisplay || shouldDisplay ? (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div className="flex-wrapper">
|
<div className="nonce-label-wrapper flex-wrapper">
|
||||||
<label className="nonce-label">Nonce</label>
|
<label className="nonce-label">Nonce</label>
|
||||||
<Help
|
<Help
|
||||||
size={'x1'}
|
size={'x1'}
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
.Calculating-limit {
|
.Calculating-limit {
|
||||||
color: rgba(51, 51, 51, 0.7);
|
color: rgba(51, 51, 51, 0.7);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: center;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
Loading…
Reference in New Issue