Improve update notification contrast (#2791)

lib/components/notification.js

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

lib/components/notifications.js

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