Commit 96be5fe8 by Dominik Prokop Committed by Dominik Prokop

Remove the jump effect on run query button

Caused by the return and loading spinner icons having different widths. Used fa-fw helper class to ensure fixed width on icons. Also, made the spacing between icon and button label slightly smaller, as the rotated level-down icon used as return icon has significantly smaller width compared to the loading spinner and it looked oddly far from the label as compared to timepicker's icon
parent cfd1467a
...@@ -944,7 +944,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> { ...@@ -944,7 +944,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
<div className="navbar-buttons relative"> <div className="navbar-buttons relative">
<button className="btn navbar-button navbar-button--primary" onClick={this.onSubmit}> <button className="btn navbar-button navbar-button--primary" onClick={this.onSubmit}>
Run Query{' '} Run Query{' '}
{loading ? <i className="fa fa-spinner fa-spin run-icon" /> : <i className="fa fa-level-down run-icon" />} {loading ? <i className="fa fa-spinner fa-fw fa-spin run-icon" /> : <i className="fa fa-level-down fa-fw run-icon" />}
</button> </button>
</div> </div>
</div> </div>
......
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
} }
.run-icon { .run-icon {
margin-left: 0.5em; margin-left: 0.25em;
transform: rotate(90deg); transform: rotate(90deg);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment