Title updater and minor changes

src/pages/Notifications/SceneAlt.js

@@ -69,9 +69,7 @@ const NavigationContainer = styled('div')({
   boxSizing: 'border-box',
   margin: '0 auto',
   width: '100%',
-  background: 'none',
   height: 60,
-  backgroundColor: '#24292e',
   color: 'hsla(0,0%,100%,.75)',
   paddingBottom: '12px',
   paddingTop: '12px',
@@ -397,12 +395,13 @@ const SmallLink = styled('a')({
   display: 'block',
   marginRight: 10,
   cursor: 'pointer',
-  fontSize: 12,
+  fontSize: 10,
   lineHeight: '20px',
-  fontWeight: 600,
-  textDecoration: 'none',
+  fontWeight: 400,
+  textDecoration: 'underline',
+  transition: 'all 0.12s ease-in-out',
   ':hover': {
-    textDecoration: 'underline'
+    opacity: 0.75
   }
 });
 
@@ -459,7 +458,7 @@ export default function Scene ({
 
   return (
     <div style={{marginTop: 60}}>
-      <NavigationContainer>
+      <NavigationContainer className="container-gradient">
         <div style={{
           textAlign: 'right',
           margin: '0 auto',

src/providers/Storage.js

@@ -34,6 +34,13 @@ for (let i = 0; i < mockNotifications.length; i++) {
 }
 
 class StorageProvider extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.originalTitle = document.title;
+    this.shouldUpdateTitle = false;
+  }
+
   state = {
     loading: false,
     error: null,
@@ -44,6 +51,16 @@ class StorageProvider extends React.Component {
     this.refreshNotifications();
   }
 
+  componentDidMount () {
+    window.onfocus = () => this.setTitle(this.originalTitle);
+  }
+
+  setTitle = title => {
+    if (document.title.indexOf('(1)') === -1 && document.title !== title) {
+      document.title = title;
+    }
+  }
+
   /**
    * Loads up the notifications state with the cache.
    */
@@ -55,6 +72,18 @@ class StorageProvider extends React.Component {
       }
       return acc;
     }, []);
+
+    // Document is out of focus, the we had notifications before this update,
+    // and there was a change in notifications in the most recent update.
+    if (!document.hasFocus() &&
+        this.state.notifications.length > 0 &&
+        notifications.length !== this.state.notifications.length
+    ) {
+      this.setTitle('(1) ' + this.originalTitle);
+    } else {
+      this.setTitle(this.originalTitle);
+    }
+
     this.setState({ notifications });
     // this.setState({ notifications: mockNotifications });
   }