diff --git a/src/components/ServiceWorkerNotifications.js b/src/components/ServiceWorkerNotifications.js index 7127d81..5b220f8 100644 --- a/src/components/ServiceWorkerNotifications.js +++ b/src/components/ServiceWorkerNotifications.js @@ -11,6 +11,29 @@ const Notification = styled.div` background: ${color.primary}; color: white; padding: 1rem; + min-height: 5rem; + transition: transform 0.1s ease-in-out; + transform: translateY(${props => props.message ? '0' : '100%'}); +` +const CloseButton = styled.button.attrs({ + children: 'x' +})` + border: none; + background: white; + color: ${color.primary}; + border-radius: 100%; + width: 2.5rem; + height: 2.5rem; + position: absolute; + right: 1rem;; + top: 1rem; + cursor: pointer; + + &:hover, + &:focus { + opacity: 0.7; + outline: none; + } ` export default class ServiceWorkerNotifications extends Component { @@ -24,6 +47,7 @@ export default class ServiceWorkerNotifications extends Component { this.handleReady = this.handleReady.bind(this) this.handleUpdated = this.handleUpdated.bind(this) this.handleOffline = this.handleOffline.bind(this) + this.handleDismiss = this.handleDismiss.bind(this) } componentDidMount () { @@ -39,23 +63,27 @@ export default class ServiceWorkerNotifications extends Component { } handleReady () { - this.setState({ message: 'ready' }) + this.setState({ message: 'This site is cached for offline use!' }) } handleUpdated () { - this.setState({ message: 'updated' }) + this.setState({ message: 'New content is available please refresh.' }) } handleOffline () { - this.setState({ message: 'offline' }) + this.setState({ message: null }) + } + + handleDismiss () { + this.setState({ message: null }) } render () { - if (this.state.message) { - return ( - {this.state.message} - ) - } - return null + return ( + + {this.state.message} + + + ) } }