quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-12 20:18:41 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve update notification contrast (#2791)

Browse source
This commit is contained in:
Timothy 2018-04-20 16:03:34 +01:00 committed by CHaBou
parent b5c221fe68
commit b680b9e02e
2 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
lib/components/notification.js
View file

@ -63,10 +63,10 @@ export default class Notification extends React.PureComponent {
} }
render() { render() {
const {backgroundColor} = this.props; const {backgroundColor, color} = this.props;
const opacity = this.state.dismissing ? 0 : 1; const opacity = this.state.dismissing ? 0 : 1;
return ( return (
<div ref={this.onElement} style={{opacity, backgroundColor}} className="notification_indicator"> <div ref={this.onElement} style={{opacity, backgroundColor, color}} className="notification_indicator">
{this.props.customChildrenBefore} {this.props.customChildrenBefore}
{this.props.children || this.props.text} {this.props.children || this.props.text}
{this.props.userDismissable ? ( {this.props.userDismissable ? (
@ -86,12 +86,11 @@ export default class Notification extends React.PureComponent {
cursor: default; cursor: default;
-webkit-user-select: none; -webkit-user-select: none;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
padding: 8px 14px 9px; padding: 8px 14px 9px;
margin-left: 10px; margin-left: 10px;
transition: 150ms opacity ease; transition: 150ms opacity ease;
color: #fff; color: #fff;
font-size: 11px; font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
} }
@ -100,12 +99,14 @@ export default class Notification extends React.PureComponent {
position: relative; position: relative;
left: 4px; left: 4px;
cursor: pointer; cursor: pointer;
color: #528d11; opacity: 0.5;
color: currentColor;
transition: opacity 0.1s ease-in-out;
} }
.notification_dismissLink:hover, .notification_dismissLink:hover,
.notification_dismissLink:focus { .notification_dismissLink:focus {
color: #2a5100; opacity: 1;
} }
`}</style> `}</style>
</div> </div>

7
lib/components/notifications.js
View file

@ -66,14 +66,15 @@ export default class Notifications extends React.PureComponent {
{this.props.updateShowing && ( {this.props.updateShowing && (
<Notification <Notification
key="update" key="update"
backgroundColor="#7ED321" backgroundColor="#18E179"
color="#000"
text={`Version ${this.props.updateVersion} ready`} text={`Version ${this.props.updateVersion} ready`}
onDismiss={this.props.onDismissUpdate} onDismiss={this.props.onDismissUpdate}
userDismissable userDismissable
> >
Version <b>{this.props.updateVersion}</b> ready. Version <b>{this.props.updateVersion}</b> ready.
{this.props.updateNote && ` ${this.props.updateNote.trim().replace(/\.$/, '')}`} (<a {this.props.updateNote && ` ${this.props.updateNote.trim().replace(/\.$/, '')}`} (<a
style={{color: '#fff'}} style={{color: '#000'}}
onClick={ev => { onClick={ev => {
window.require('electron').shell.openExternal(ev.target.href); window.require('electron').shell.openExternal(ev.target.href);
ev.preventDefault(); ev.preventDefault();
@ -96,7 +97,7 @@ export default class Notifications extends React.PureComponent {
) : ( ) : (
<a <a
style={{ style={{
color: '#fff', color: '#000',
cursor: 'pointer', cursor: 'pointer',
textDecoration: 'underline', textDecoration: 'underline',
fontWeight: 'bold' fontWeight: 'bold'