Commit 78838ff2 authored by mgabdev's avatar mgabdev

Updated ErrorPopover, LoadingPopover styles to match all other popovers

• Updated:
- ErrorPopover, LoadingPopover styles to match all other popovers
parent 043fc01c
import Block from '../block' import PopoverLayout from './popover_layout'
import ColumnIndicator from '../column_indicator' import ColumnIndicator from '../column_indicator'
export default class ErrorPopover extends PureComponent { export default class ErrorPopover extends PureComponent {
static defaultProps = {
isXS: PropTypes.bool,
onClose: PropTypes.func,
}
render() { render() {
const { isXS } = this.props
return ( return (
<div className={_s.width250PX}> <PopoverLayout
<Block> width={250}
isXS={isXS}
onClose={this.props.onClose}
>
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}> <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<ColumnIndicator type='error' message='Error loading popover' /> <ColumnIndicator type='error' message='Error loading popover' />
</div> </div>
</div> </div>
</Block> </PopoverLayout>
</div>
) )
} }
......
import Block from '../block' import PopoverLayout from './popover_layout'
import ColumnIndicator from '../column_indicator' import ColumnIndicator from '../column_indicator'
export default class LoadingPopover extends PureComponent { export default class LoadingPopover extends PureComponent {
static defaultProps = {
isXS: PropTypes.bool,
onClose: PropTypes.func,
}
render() { render() {
const { isXS } = this.props
return ( return (
<div className={_s.width250PX}> <PopoverLayout
<Block> width={250}
isXS={isXS}
onClose={this.props.onClose}
>
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}> <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<ColumnIndicator type='loading' /> <ColumnIndicator type='loading' />
</div> </div>
</div> </div>
</Block> </PopoverLayout>
</div>
) )
} }
} }
\ No newline at end of file
...@@ -108,11 +108,17 @@ class PopoverRoot extends PureComponent { ...@@ -108,11 +108,17 @@ class PopoverRoot extends PureComponent {
} }
renderLoading = () => { renderLoading = () => {
return <LoadingPopover /> const { width } = this.state
const isXS = width <= BREAKPOINT_EXTRA_SMALL
return <LoadingPopover isXS={isXS} onClose={this.props.onClose} />
} }
renderError = () => { renderError = () => {
return <ErrorPopover /> const { width } = this.state
const isXS = width <= BREAKPOINT_EXTRA_SMALL
return <ErrorPopover isXS={isXS} onClose={this.props.onClose} />
} }
render() { render() {
......
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