move clear search, adjust api usage visual hierarchy
MODIFY
app/components/Settings/scheduler/presentational/api-call-counts.jsx
app/components/Settings/scheduler/presentational/api-call-counts.jsx
@@ -10,8 +10,8 @@ export const AdditionalCallsPreview = props => {
return (
<div style={{fontSize: '12px', opacity: 0.5, marginBottom: 16}}>
- API Usage: {formatCalls(additionalCalls)} {pluralize('call', additionalCalls)}/day (new total:{' '}
- {formatCalls(newTotal)})
+ API Usage: {formatCalls(additionalCalls)} {pluralize('call', additionalCalls)}
+ /day (new total: {formatCalls(newTotal)})
</div>
);
};
@@ -36,10 +36,20 @@ IndividualCallCount.propTypes = {
export const CallCountWidget = ({count}) => {
return (
<React.Fragment>
- <p style={{fontSize: '12px', padding: '8px 16px', textAlign: 'center'}}>
- <span style={{fontWeight: 600, textAlign: 'center', display: 'block'}}>API Usage</span>
- {formatCalls(count)} {pluralize('call', count)}/day
- <i style={{display: 'block', textAlign: 'center'}}>for this connection</i>
+ <p style={{fontSize: '10px', padding: '8px 16px', textAlign: 'center'}}>
+ <span
+ style={{
+ display: 'block',
+ opacity: 0.6
+ }}
+ >
+ API USAGE
+ </span>
+ <span style={{fontSize: '14px', fontWeight: 600, padding: '8px 16px'}}>
+ {formatCalls(count)} {pluralize('call', count)}
+ /day
+ </span>
+ <i style={{display: 'block'}}>(for this connection)</i>
</p>
</React.Fragment>
);

MODIFY
app/components/Settings/scheduler/scheduler.jsx
app/components/Settings/scheduler/scheduler.jsx
@@ -556,21 +556,36 @@ class Scheduler extends Component {
<Row
style={{
marginBottom: 8,
- justifyContent: 'space-between',
alignItems: 'center'
}}
>
<input
+ style={{width: '40%'}}
value={this.state.search}
onChange={this.handleSearchChange}
placeholder="Search scheduled queries..."
/>
+ <Column style={{width: 'unset', marginLeft: 16}}>
+ {this.state.search && (
+ <u
+ className="clear-state"
+ onClick={this.resetSearch}
+ style={{
+ borderLeft: '1px solid rgba(0, 0, 0, 0.12)',
+ paddingLeft: 16,
+ cursor: 'pointer'
+ }}
+ >
+ Clear
+ </u>
+ )}
+ </Column>
{!contains(this.props.dialect, SQL_DIALECTS_USING_EDITOR) && (
<button style={{marginRight: '16px'}} onClick={this.openCreateModal}>
Create Scheduled Query
</button>
)}
- <div style={{marginRight: '16px'}}>
+ <div style={{marginLeft: 'auto', marginRight: '16px'}}>
<CallCountWidget count={totalCallsPerDay} />
</div>
</Row>
@@ -649,23 +664,8 @@ class Scheduler extends Component {
</div>
</div>
</Column>
- <Column style={{width: '100%', maxWidth: 720}}>
+ <Column style={{width: '100%', maxWidth: 560}}>
<Row style={{width: 'auto', justifyContent: 'flex-end'}}>
- <Column style={{maxWidth: 168, marginRight: 16}}>
- {this.state.search && (
- <u
- className="clear-state"
- onClick={this.resetSearch}
- style={{
- fontWeight: 'bold',
- borderRight: '1px solid rgba(0, 0, 0, 0.12)',
- cursor: 'pointer'
- }}
- >
- Clear current search
- </u>
- )}
- </Column>
<Column
style={{
position: 'relative',

move clear search, adjust api usage visual hierarchy