style API usage
MODIFY
app/components/Settings/scheduler/modals/preview-modal.jsx
app/components/Settings/scheduler/modals/preview-modal.jsx
@@ -470,7 +470,8 @@ export class PreviewModal extends Component {
<Timestamp value={query.nextScheduledAt} />{' '}
{canEdit && (
<span style={{paddingLeft: '7px'}}>
- (<Link
+ (
+ <Link
className="refresh-button"
style={{color: '#506784'}}
disabled={this.state.loading}
@@ -481,7 +482,8 @@ export class PreviewModal extends Component {
: this.state.confirmedRun
? 'are you sure?'
: 'run now'}
- </Link>)
+ </Link>
+ )
</span>
)}
</div>

MODIFY
app/components/Settings/scheduler/presentational/api-call-counts.jsx
app/components/Settings/scheduler/presentational/api-call-counts.jsx
@@ -20,8 +20,8 @@ export const AdditionalCallsPreview = props => {
const newTotal = additionalCalls + currTotal;
return (
- <div>
- API usage: {additionalCalls} calls/day (new total: {formatUsageRatio(newTotal)})
+ <div style={{fontSize: '12px', opacity: 0.5, marginBottom: 16}}>
+ API Usage: {additionalCalls} calls/day (new total: {formatUsageRatio(newTotal)})
</div>
);
};
@@ -35,11 +35,7 @@ AdditionalCallsPreview.defaultProps = {
};
export const IndividualCallCount = ({count}) => {
- return (
- <span style={{fontSize: '12px'}}>
- {pluralize('API call', count, true)} per day
- </span>
- );
+ return <span style={{fontSize: '12px', opacity: 0.5}}>{pluralize('API call', count, true)} per day</span>;
};
IndividualCallCount.propTypes = {
count: PropTypes.number.isRequired
@@ -48,8 +44,10 @@ IndividualCallCount.propTypes = {
export const CallCountWidget = ({count}) => {
return (
<React.Fragment>
- <h4>API Usage</h4>
- <p style={{fontSize: '12px'}}>{formatUsageRatio(count)} API calls</p>
+ <p style={{fontSize: '12px', padding: '8px 16px'}}>
+ <div style={{fontWeight: 600, textAlign: 'center'}}>API Usage</div>
+ {formatUsageRatio(count)} API calls
+ </p>
</React.Fragment>
);
};

MODIFY
app/components/Settings/scheduler/scheduler.jsx
app/components/Settings/scheduler/scheduler.jsx
@@ -536,9 +536,9 @@ class Scheduler extends Component {
<React.Fragment>
<Row
style={{
- marginTop: 24,
- marginBottom: 24,
- justifyContent: 'space-between'
+ marginBottom: 8,
+ justifyContent: 'space-between',
+ alignItems: 'center'
}}
>
<input
@@ -551,7 +551,7 @@ class Scheduler extends Component {
Create Scheduled Query
</button>
)}
- <div style={{paddingRight: '40px'}}>
+ <div style={{marginRight: '16px'}}>
<CallCountWidget count={totalCallsPerDay} />
</div>
</Row>

MODIFY
test/app/components/Settings/scheduler/create-modal.test.jsx
test/app/components/Settings/scheduler/create-modal.test.jsx
@@ -23,9 +23,8 @@ const CreateModal = require('../../../../../app/components/Settings/scheduler/mo
const ErrorComponent = require('../../../../../app/components/error.jsx');
const CronPicker = require('../../../../../app/components/Settings/cron-picker/cron-picker.jsx');
const TagPicker = require('../../../../../app/components/Settings/scheduler/pickers/tag-picker').default;
-const AdditionalCallsPreview = require(
- '../../../../../app/components/Settings/scheduler/presentational/api-call-counts.jsx'
-).AdditionalCallsPreview;
+const AdditionalCallsPreview = require('../../../../../app/components/Settings/scheduler/presentational/api-call-counts.jsx')
+ .AdditionalCallsPreview;
describe('Create Modal Test', () => {
beforeAll(() => {
@@ -168,7 +167,7 @@ describe('Create Modal Test', () => {
);
expect(component.find(AdditionalCallsPreview).text()).toBe(
- 'API usage: 288 calls/day (new total: 1288 / 10000)'
+ 'API Usage: 288 calls/day (new total: 1288 / 10000)'
);
component = mount(
@@ -185,8 +184,7 @@ describe('Create Modal Test', () => {
.find(AdditionalCallsPreview)
.find('span')
.last()
- .prop('style')
- .color
+ .prop('style').color
).toBe('#EF553B');
});
});

style API usage