Style settings, icons order and quit button

Author: Emmanouil Konstantinidis

src/js/components/navigation.js

@@ -59,10 +59,6 @@ var Navigation = React.createClass({
     this.context.router.transitionTo('notifications');
   },
 
-  appQuit: function () {
-    ipc.sendChannel('app-quit');
-  },
-
   render: function () {
     var refreshIcon, logoutIcon, backIcon, settingsIcon;
     var loadingClass = this.state.loading ? 'fa fa-refresh fa-spin' : 'fa fa-refresh';
@@ -95,9 +91,8 @@ var Navigation = React.createClass({
             <img className='img-responsive' src='images/logo-hor-white.png' />
           </div>
           <div className='col-xs-4 right'>
-            {logoutIcon}
             {settingsIcon}
-            <i className="fa fa-power-off" onClick={this.appQuit} />
+            {logoutIcon}
           </div>
         </div>
       </div>

src/js/components/settings.js

@@ -1,6 +1,8 @@
 var React = require('react');
 var Toggle = require('react-toggle');
 
+var ipc = window.require('ipc');
+
 var Actions = require('../actions/actions');
 var SettingsStore = require('../stores/settings');
 
@@ -15,6 +17,10 @@ var SettingsPage = React.createClass({
     Actions.setSetting('participating', event.target.checked);
   },
 
+  appQuit: function () {
+    ipc.sendChannel('app-quit');
+  },
+
   render: function () {
     return (
       <div className="container-fluid main-container settings">
@@ -26,6 +32,14 @@ var SettingsPage = React.createClass({
               onChange={this.toggleParticipating} />
           </div>
         </div>
+        <div className='row'>
+          <button
+            className='btn btn-block btn-danger btn-close'
+            onClick={this.appQuit}>
+            <i className="fa fa-power-off" />
+            Quit Gitify
+          </button>
+        </div>
       </div>
     );
   }

src/less/style.less

@@ -234,8 +234,16 @@ html, body {
   color: @White;
   padding: 20px;
 
-  .col-xs-4 {
-    text-align: right;
+  .row {
+    margin: 20px 10px;
+
+    .col-xs-4 {
+      text-align: right;
+    }
+
+    .btn-close {
+      padding: 10px;
+    }
   }
 }