Improve UI

README.md

@@ -1,9 +1,5 @@
 # Gitify
-[![travis][travis-image]][travis-url]
-[![codecov][codecov-image]][codecov-url]
-[![slack][slack-image]][slack-url]
-
-### GitHub Notifications on your menu bar.
+[![travis][travis-image]][travis-url] [![codecov][codecov-image]][codecov-url] [![slack][slack-image]][slack-url]
 
 ![Gitify](images/press.png)
 
@@ -20,8 +16,8 @@ It has been a while since this app was made so I decided to give it a good revam
 - [x] Update Bootstrap to version 4 - Which means move from LESS to SCSS.
 - [x] Rewrite tests with Mocha - Since gitify is moving from Reflux to Redux, all tests have to be rewritten.
 - [x] Move to Codecov for coverage with new tests
-- [ ] Revamp the UI. From Scratch?
-- [ ] Rebranding - New Logo! Fresh stuff!
+- [x] Rebranding - New Logo! Fresh stuff!
+- [x] Revamp the UI. From Scratch?
 
 If you would like to help let me know! There is a slack channel for gitify in the [atom](http://atomio.slack.com) team. See badge on the header.
 

package.json

@@ -7,7 +7,7 @@
     "build": "webpack",
     "watch": "webpack --progress --colors --watch",
     "release-js": "webpack --config webpack.rel.config.js",
-    "package": "electron-packager . Gitify --overwrite --platform=darwin --arch=x64 --version=0.35.4 --asar=true --icon=images/app-icon.icns --prune --ignore='src' --ignore='coverage'",
+    "package": "electron-packager . Gitify --overwrite --platform=darwin --arch=x64 --version=1.0.2 --asar=true --icon=images/app-icon.icns --prune --ignore='src' --ignore='coverage'",
     "codesign": "bash scripts/codesign.bash",
     "dist": "npm run release-js && npm run package && npm run codesign",
     "lint-js": "eslint 'src/js/' 'src/js/app.js' 'main.js'",
@@ -51,6 +51,8 @@
   "dependencies": {
     "auto-launch": "=2.0.1",
     "bootstrap": "=4.0.0-alpha.2",
+    "electron-gh-releases": "=2.0.2",
+    "electron-positioner": "=3.0.0",
     "font-awesome": "=4.6.1",
     "history": "=2.1.1",
     "malarkey": "=1.3.3",
@@ -70,7 +72,6 @@
     "redux-storage": "=4.0.0",
     "redux-storage-decorator-filter": "=1.1.3",
     "redux-storage-engine-localstorage": "=1.1.0",
-    "reloading": "=0.0.6",
     "underscore": "=1.8.3"
   },
   "devDependencies": {
@@ -83,10 +84,8 @@
     "babel-preset-stage-0": "=6.5.0",
     "chai": "=3.5.0",
     "css-loader": "=0.23.1",
-    "electron-gh-releases": "=2.0.2",
     "electron-packager": "=7.0.1",
     "electron-prebuilt": "=1.0.2",
-    "electron-positioner": "=3.0.0",
     "enzyme": "=2.3.0",
     "eslint": "=2.9.0",
     "eslint-plugin-react": "=5.1.1",

src/js/__tests__/components/login.js

@@ -48,7 +48,7 @@ describe('components/login.js', function () {
     const { wrapper } = setup(props);
 
     expect(wrapper).to.exist;
-    expect(wrapper.find('.desc').text()).to.equal('GitHub notifications in your menu bar.');
+    expect(wrapper.find('.desc').text()).to.contain('in your menu bar.');
 
   });
 
@@ -206,7 +206,6 @@ describe('components/login.js', function () {
     const { wrapper, context } = setup(props);
 
     expect(wrapper).to.exist;
-    expect(wrapper.find('.desc').text()).to.equal('GitHub notifications in your menu bar.');
 
     wrapper.setProps({
       token: 'HELLO'

src/js/__tests__/components/navigation.js

@@ -61,7 +61,6 @@ describe('components/navigation.js', function () {
     expect(Navigation.prototype.componentDidMount).to.have.been.calledOnce;
     expect(wrapper.find('.fa-refresh').length).to.equal(1);
     expect(wrapper.find('.fa-refresh').first().hasClass('fa-spin')).to.be.false;
-    expect(wrapper.find('.fa-sign-out').length).to.equal(1);
     expect(wrapper.find('.fa-cog').length).to.equal(1);
     expect(wrapper.find('.fa-search').length).to.equal(1);
     expect(wrapper.find('.fa-power-off').length).to.equal(0);
@@ -111,7 +110,6 @@ describe('components/navigation.js', function () {
     expect(wrapper).to.exist;
     expect(Navigation.prototype.componentDidMount).to.have.been.calledOnce;
     expect(wrapper.find('.fa-refresh').length).to.equal(0);
-    expect(wrapper.find('.fa-sign-out').length).to.equal(0);
     expect(wrapper.find('.fa-cog').length).to.equal(0);
     expect(wrapper.find('.fa-search').length).to.equal(0);
     expect(wrapper.find('.fa-power-off').length).to.equal(1);
@@ -141,7 +139,6 @@ describe('components/navigation.js', function () {
     expect(Navigation.prototype.componentDidMount).to.have.been.calledOnce;
     expect(wrapper.find('.fa-refresh').length).to.equal(1);
     expect(wrapper.find('.fa-refresh').first().hasClass('fa-spin')).to.be.false;
-    expect(wrapper.find('.fa-sign-out').length).to.equal(1);
     expect(wrapper.find('.fa-cog').length).to.equal(1);
     expect(wrapper.find('.fa-search').length).to.equal(1);
     expect(wrapper.find('.fa-power-off').length).to.equal(0);
@@ -168,7 +165,6 @@ describe('components/navigation.js', function () {
 
     expect(wrapper).to.exist;
     expect(wrapper.find('.fa-refresh').length).to.equal(0);
-    expect(wrapper.find('.fa-sign-out').length).to.equal(0);
     expect(wrapper.find('.fa-power-off').length).to.equal(1);
 
     wrapper.find('.fa-power-off').simulate('click');
@@ -193,7 +189,7 @@ describe('components/navigation.js', function () {
     expect(wrapper).to.exist;
     expect(wrapper.find('.fa-power-off').length).to.equal(1);
 
-    wrapper.find('.logo').simulate('click');
+    wrapper.find('.navbar-brand').simulate('click');
 
     expect(shell.openExternal).to.have.been.calledOnce;
     expect(shell.openExternal).to.have.been.calledWith('http://www.github.com/ekonstantinidis/gitify');
@@ -224,42 +220,6 @@ describe('components/navigation.js', function () {
 
   });
 
-  it('should press the logout', function () {
-
-    const props = {
-      logout: sinon.spy(),
-      toggleSearch: sinon.spy(),
-      isFetching: false,
-      notifications: notifications.length,
-      showSearch: true,
-      token: 'IMLOGGEDIN',
-      location: {
-        pathname: '/settings'
-      }
-    };
-
-    const { wrapper, context } = setup(props);
-
-    expect(wrapper).to.exist;
-    expect(wrapper.find('.fa-cog').length).to.equal(1);
-
-    wrapper.find('.fa-sign-out').simulate('click');
-
-    expect(props.logout).to.have.been.calledOnce;
-    expect(props.toggleSearch).to.have.been.calledOnce;
-
-    expect(ipcRenderer.send).to.have.been.calledOnce;
-    expect(ipcRenderer.send).to.have.been.calledWith('update-icon', 'IconPlain');
-
-    expect(context.router.replace).to.have.been.calledOnce;
-    expect(context.router.replace).to.have.been.calledWith('/login');
-
-    context.router.replace.reset();
-    props.logout.reset();
-    props.toggleSearch.reset();
-
-  });
-
   it('should go to settings from home', function () {
 
     const props = {

src/js/__tests__/components/oops.js

@@ -20,7 +20,7 @@ describe('components/oops.js', function () {
     const { wrapper } = setup();
 
     expect(wrapper).to.exist;
-    expect(wrapper.find('h3').text()).to.equal('Oops something went wrong.');
+    expect(wrapper.find('h2').text()).to.equal('Oops something went wrong.');
 
   });
 

src/js/__tests__/components/settings.js

@@ -4,43 +4,76 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import Toggle from 'react-toggle';
 import { SettingsPage } from '../../components/settings';
-
-function setup() {
-  const props = {
-    updateSetting: sinon.spy(),
-    fetchNotifications: sinon.spy(),
-    settings: {
-      participating: false,
-      playSound: true,
-      showNotifications: true,
-      markOnClick: false,
-      openAtStartup: false
+const ipcRenderer = window.require('electron').ipcRenderer;
+
+const options = {
+  context: {
+    location: {
+      pathname: ''
+    },
+    router: {
+      push: sinon.spy(),
+      replace: sinon.spy()
     }
-  };
+  }
+};
 
-  const wrapper = shallow(<SettingsPage {...props} />);
+function setup(props) {
+  const wrapper = shallow(<SettingsPage {...props} />, options);
 
   return {
+    context: options.context,
     props: props,
     wrapper: wrapper,
   };
 };
 
 describe('components/settings.js', function () {
 
+  beforeEach(function() {
+    ipcRenderer.send.reset();
+  });
+
   it('should render itself & its children', function () {
 
-    const { wrapper } = setup();
+    const props = {
+      updateSetting: sinon.spy(),
+      fetchNotifications: sinon.spy(),
+      logout: sinon.spy(),
+      settings: {
+        participating: false,
+        playSound: true,
+        showNotifications: true,
+        markOnClick: false,
+        openAtStartup: false
+      }
+    };
+
+    const { wrapper } = setup(props);
 
     expect(wrapper).to.exist;
     expect(wrapper.find(Toggle).length).to.equal(5);
+    expect(wrapper.find('.fa-sign-out').length).to.equal(1);
     expect(wrapper.find('.footer').find('.text-right').text()).to.contain('Gitify - Version');
 
   });
 
   it('should update a setting', function () {
 
-    const { wrapper, props } = setup();
+    const props = {
+      updateSetting: sinon.spy(),
+      fetchNotifications: sinon.spy(),
+      logout: sinon.spy(),
+      settings: {
+        participating: false,
+        playSound: true,
+        showNotifications: true,
+        markOnClick: false,
+        openAtStartup: false
+      }
+    };
+
+    const { wrapper } = setup(props);
     expect(wrapper).to.exist;
 
     // Note: First Toggle is "participating"
@@ -58,14 +91,86 @@ describe('components/settings.js', function () {
 
   });
 
-  it('should check for updates and quit the app', function () {
+  it('should check for updates ', function () {
+
+    const props = {
+      updateSetting: sinon.spy(),
+      fetchNotifications: sinon.spy(),
+      logout: sinon.spy(),
+      settings: {
+        participating: false,
+        playSound: true,
+        showNotifications: true,
+        markOnClick: false,
+        openAtStartup: false
+      }
+    };
+
+    const { wrapper } = setup(props);
+
+    expect(wrapper).to.exist;
+
+    wrapper.find('.fa-cloud-download').parent().simulate('click');
+    expect(ipcRenderer.send).to.have.been.calledOnce;
+    expect(ipcRenderer.send).to.have.been.calledWith('check-update');
+
+  });
+
+  it('should quit the app', function () {
+
+    const props = {
+      updateSetting: sinon.spy(),
+      fetchNotifications: sinon.spy(),
+      logout: sinon.spy(),
+      settings: {
+        participating: false,
+        playSound: true,
+        showNotifications: true,
+        markOnClick: false,
+        openAtStartup: false
+      }
+    };
 
-    const { wrapper } = setup();
+    const { wrapper } = setup(props);
 
     expect(wrapper).to.exist;
 
-    wrapper.find('.btn-primary').simulate('click');
-    wrapper.find('.btn-danger').simulate('click');
+    wrapper.find('.fa-power-off').parent().simulate('click');
+    expect(ipcRenderer.send).to.have.been.calledOnce;
+    expect(ipcRenderer.send).to.have.been.calledWith('app-quit');
+
+  });
+
+  it('should press the logout', function () {
+
+    const props = {
+      updateSetting: sinon.spy(),
+      fetchNotifications: sinon.spy(),
+      logout: sinon.spy(),
+      settings: {
+        participating: false,
+        playSound: true,
+        showNotifications: true,
+        markOnClick: false,
+        openAtStartup: false
+      }
+    };
+
+    const { wrapper, context } = setup(props);
+
+    expect(wrapper).to.exist;
+
+    wrapper.find('.fa-sign-out').parent().simulate('click');
+
+    expect(props.logout).to.have.been.calledOnce;
+
+    expect(ipcRenderer.send).to.have.been.calledOnce;
+    expect(ipcRenderer.send).to.have.been.calledWith('update-icon', 'IconPlain');
+
+    expect(context.router.replace).to.have.been.calledOnce;
+    expect(context.router.replace).to.have.been.calledWith('/login');
+
+    context.router.replace.reset();
 
   });
 

src/js/components/login.js

@@ -76,9 +76,9 @@ export class LoginPage extends React.Component {
       <div className="container-fluid main-container login">
         <div className="row">
           <div className="col-xs-offset-2 col-xs-8">
-            <img className="img-responsive logo" src="images/gitify-logo-outline-light.png" />
-            <div className="desc">GitHub notifications in your menu bar.</div>
-            <button className="btn btn-secondary btn-lg btn-block" onClick={this.authGithub.bind(this)}>
+            <img className="img-responsive logo" src="images/gitify-logo-outline-dark.png" />
+            <div className="desc">GitHub Notifications<br />in your menu bar.</div>
+            <button className="btn btn-lg btn-block" onClick={this.authGithub.bind(this)}>
               <i className="fa fa-github" />Log in to GitHub
             </button>
           </div>