notification style improvements and link to release notes upon updates

This commit is contained in:
Guillermo Rauch 2016-07-17 13:02:34 -07:00
parent 1e1b31aad8
commit a5cfe76c61
2 changed files with 17 additions and 6 deletions

View file

@ -96,14 +96,20 @@ export default class Notification extends Component {
cursor: 'default', cursor: 'default',
WebkitUserSelect: 'none', WebkitUserSelect: 'none',
background: 'rgba(255, 255, 255, .2)', background: 'rgba(255, 255, 255, .2)',
padding: '6px 14px', padding: '8px 14px 9px',
marginLeft: '10px', marginLeft: '10px',
transition: '150ms opacity ease', transition: '150ms opacity ease',
color: '#fff', color: '#fff',
font: '11px Menlo' fontSize: '11px',
fontFamily: `-apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif`
}, },
dismissLink: { dismissLink: {
position: 'relative',
left: '4px',
cursor: 'pointer', cursor: 'pointer',
color: '#528D11', color: '#528D11',
':hover': { ':hover': {

View file

@ -37,11 +37,16 @@ export default class Notifications extends Component {
<Notification <Notification
key='update' key='update'
backgroundColor='#7ED321' backgroundColor='#7ED321'
text={`Version ${this.props.updateVersion} available`} text={`Version ${this.props.updateVersion} ready`}
onDismiss={ this.props.onDismissUpdate } onDismiss={ this.props.onDismissUpdate }
userDismissable={ true }> userDismissable={ true }>
Version <b>{ this.props.updateVersion}</b> available. Version <b>{ this.props.updateVersion}</b> ready.
{ this.props.updateNote && ` ${this.props.updateNote.trim().replace(/\.$/, '')}.` } { this.props.updateNote && ` ${this.props.updateNote.trim().replace(/\.$/, '')}` }
{ ' ' }
(<a
style={{ color: '#fff' }}
target="_blank"
href={`https://github.com/zeit/hyperterm/releases/tag/${this.props.updateVersion}`}>notes</a>).
{ ' ' } { ' ' }
<a style={{ <a style={{
cursor: 'pointer', cursor: 'pointer',
@ -49,7 +54,7 @@ export default class Notifications extends Component {
fontWeight: 'bold' }} fontWeight: 'bold' }}
onClick={ this.props.onUpdateInstall }> onClick={ this.props.onUpdateInstall }>
Restart Restart
</a> </a>.
{ ' ' } { ' ' }
</Notification> </Notification>
} }