Fixed some styles on the tab bar

assets/coffee/sentry.coffee

@@ -1,3 +1,16 @@
+shell = require('electron').shell
+
+document.addEventListener('DOMContentLoaded', () ->
+  links = document.querySelectorAll('a[href^="http"]')
+  i = 0
+  while i < links.length
+    links[i].addEventListener('click', (event) ->
+      event.preventDefault()
+      shell.openExternal(this.href)
+    )
+    i++
+)
+
 @openTab = (tab) ->
   # show the component info that's selected
   tabs = document.querySelectorAll('.tab-button')

assets/sass/sentry.sass

@@ -1,5 +1,11 @@
 $tab-bar-height: 50px
 
+$primary-color: #009688
+$primary-color-light: lighten($primary-color, 10%)
+$primary-color-dark: darken($primary-color, 10%)
+
+$default-transition: all 230ms ease-in-out
+
 body
   margin: 0
   padding: $tab-bar-height 0 90px
@@ -7,20 +13,20 @@ body
   font-size: 18px
 
 a
-  color: cornflowerblue
-  transition: all 200ms ease-in-out
+  color: $primary-color
+  transition: $default-transition
 
   &:hover
-    color: darken(cornflowerblue, 10%)
+    color: $primary-color-light
 
 input
-  transition: all 200ms ease-in-out
+  transition: $default-transition
 
 input[type=submit],
 button
   background-color: cornflowerblue
   color: #f0f0f0
-  transition: all 200ms ease-in-out
+  transition: $default-transition
 
   &:hover
     background-color: darken(cornflowerblue, 10%)
@@ -55,6 +61,10 @@ button
   border-bottom: 1px solid #bbb
   box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
 
+  .container.fluid
+    width: 100%
+    margin-right: 0
+
   .row
     display: relative
 
@@ -69,9 +79,10 @@ button
     color: #212121
     font-size: 2rem
     font-weight: bold
-    transition: all 230ms ease-in-out
+    transition: $default-transition
 
-    &.active
+    &.active,
+    &:hover
       background-color: white
 
 .component-display
@@ -142,6 +153,9 @@ table.hardware-info
   p.no-margin
     margin-bottom: 0
 
+  p#version-info
+    text-decoration: underline
+
 #systemPages
   > div:nth-child(2n + 3)
     margin-left: 0

assets/twig/layout.twig

@@ -19,7 +19,8 @@
       <div class="container fluid">
         <div class="row">
           <div class="columns twelve">
-            <button class="tab-button active" onclick="openTab('cpu')">CPU</button>
+            <button class="tab-button active" onclick="openTab('overview')">Overview</button>
+            <button class="tab-button" onclick="openTab('cpu')">CPU</button>
             <button class="tab-button" onclick="openTab('memory')">Memory</button>
             <button class="tab-button" onclick="openTab('storage')">Storage</button>
             <button class="tab-button" onclick="openTab('gpu')">GPU</button>
@@ -29,7 +30,10 @@
     </div>
 
     <div id="wrapper" class="container">
-      <div class="component-display active" data-component="cpu">
+      <div class="component-display active" data-component="overview">
+        {% include 'overview.twig' %}
+      </div>
+      <div class="component-display" data-component="cpu">
         {% include 'cpu.twig' %}
       </div>
       <div class="component-display" data-component="memory">
@@ -47,7 +51,7 @@
       <div class="container fluid">
         <div class="row">
           <div class="columns three">
-            <p class="faded-text no-margin u-text-center">Sentry v<span id="app-version"></span></p>
+            <p id="version-info" class="no-margin u-text-center">Sentry v<span id="app-version"></span></p>
           </div>
           <div class="columns six">
             <p class="no-margin u-text-center">Developed by Bit Goblin free of charge.</p>

assets/twig/overview.twig

@@ -0,0 +1,5 @@
+<header class="row">
+  <div class="columns twelve u-text-center">
+    <h1>Sentry Overview</h1>
+  </div>
+</header>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sentry",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Desktop app to view system information and sensors",
   "main": "main.js",
   "scripts": {