Apply design changes to make the app visually more sleek and minimal

Author: amitmerchant1990

css/starter-template.css

@@ -1,14 +1,13 @@
 body {
-  padding-top: 55px;
+  padding-top: 34px;
   overflow-y:hidden;
 }
 .starter-template {
-  padding: 15px 15px;
   text-align: center;
 }
 
 .full-width{
-  width:100% !important;
+  /*width:50% !important;*/
   margin-bottom: 10px;
   font-size: 20px;
 }
@@ -17,12 +16,26 @@ h1 {
    font-size: 80px;
 }
 
+.btn-success{
+  display: none;
+}
+
+.nav > li > a {
+    padding: 5px 5px !important;
+    margin-right: 0 !important;
+    color: black;
+}
+
 .nav-tabs > li {
     /* width = (100 / number of tabs). This example assumes 3 tabs. */
     width:33.33333%;
     text-align: center;
 }
 
+.nav-tabs>li.active>a{
+  font-weight:bold;
+}
+
 .custom-btn{
   color: #fff;
   border-color: #fff;
@@ -33,7 +46,24 @@ h1 {
   border-color: #fff;
 }
 
-.navbar {min-height:20px !important}
+.navbar {
+  min-height:26px;
+  line-height:26px;
+}
+
+.navbar-brand{
+  float: none;
+  text-align: center;
+  height: 30px;
+  padding: 10px 15px;
+  line-height: 33px;
+}
+
+.navbar-toggle{
+  padding: 0px 8px;
+  margin-top: 4px;
+  margin-bottom: 3px;
+}
 
 /* xs < 768 */
 @media screen and (max-width: 767px) {

index.html

@@ -63,14 +63,12 @@ <h1 id="time">25:00</h1>
 
           <div class="starter-template">
             <div class="row">
-              <div class="col-md-4">
-                <button type="button" class="btn btn-large btn-primary full-width" id="start">Start</button>
-              </div>
-              <div class="col-md-4">
-                <button type="button" id="stop" class="btn btn-large btn-success full-width">Stop</button>
-              </div>
-              <div class="col-md-4">
-                <button type="button" class="btn btn-large btn-danger full-width" id="reset">Reset</button>
+              <div>
+                <button type="button" class="btn btn-large btn-primary full-width" id="start"><span class="glyphicon glyphicon-play"></span></button>
+
+                <button type="button" id="stop" class="btn btn-large btn-success full-width"><span class="glyphicon glyphicon-pause"></span></button>
+
+                <button type="button" class="btn btn-large btn-danger full-width" id="reset"><span class="glyphicon glyphicon-repeat"></span></button>
               </div>
             </div>
           </div>
@@ -91,14 +89,12 @@ <h1 id="time_short">05:00</h1>
 
           <div class="starter-template">
             <div class="row">
-              <div class="col-md-4">
-                <button type="button" class="btn btn-large btn-primary full-width" id="short_start">Start</button>
-              </div>
-              <div class="col-md-4">
-                <button type="button" class="btn btn-large btn-success full-width" id="short_stop">Stop</button>
-              </div>
-              <div class="col-md-4">
-                <button type="button" class="btn btn-large btn-danger full-width" id="short_reset">Reset</button>
+              <div>
+                <button type="button" class="btn btn-large btn-primary full-width" id="short_start"><span class="glyphicon glyphicon-play"></span></button>
+
+                <button type="button" class="btn btn-large btn-success full-width" id="short_stop"><span class="glyphicon glyphicon-pause"></span></button>
+
+                <button type="button" class="btn btn-large btn-danger full-width" id="short_reset"><span class="glyphicon glyphicon-repeat"></span></button>
               </div>
             </div>
           </div>
@@ -119,14 +115,12 @@ <h1 id="time_long">10:00</h1>
 
           <div class="starter-template">
             <div class="row">
-              <div class="col-md-4">
-                <button type="button" class="btn btn-large btn-primary full-width" id="long_start">Start</button>
-              </div>
-              <div class="col-md-4">
-                <button type="button" class="btn btn-large btn-success full-width" id="long_stop">Stop</button>
-              </div>
-              <div class="col-md-4">
-                <button type="button" class="btn btn-large btn-danger full-width" id="long_reset">Reset</button>
+              <div>
+                <button type="button" class="btn btn-large btn-primary full-width" id="long_start"><span class="glyphicon glyphicon-play"></span></button>
+
+                <button type="button" class="btn btn-large btn-success full-width" id="long_stop"><span class="glyphicon glyphicon-pause"></span></button>
+
+                <button type="button" class="btn btn-large btn-danger full-width" id="long_reset"><span class="glyphicon glyphicon-repeat"></span></button>
               </div>
             </div>
           </div>

index.js

@@ -4,7 +4,7 @@ var menubar = require('menubar');
 
 const ipcMain = require('electron').ipcMain;
 
-var mb = menubar({dir:__dirname, tooltip: "Pomolectron", icon:__dirname + "/res/tomato.png", width:324, height:420, resizable: false, alwaysOnTop :true});
+var mb = menubar({dir:__dirname, tooltip: "Pomolectron", icon:__dirname + "/res/tomato.png", width:278, height:250, resizable: false, alwaysOnTop :true});
 
 const contextMenu = electron.Menu.buildFromTemplate([
   {

js/app.js

@@ -21,17 +21,24 @@ $('#start').click(() => {
   }
 
   startTimer(pomodoroTime, display);
+  $('#stop').show();
+  $('#start').hide();
 })
 
 $('#stop').click(() => {
   stopTimer();
+  $('#start').show();
+  $('#stop').hide();
 });
 
 $('#reset').click(() => {
   minutes = 25;
   seconds = 60;
   display.textContent = "25:00";
   resetTimer();
+
+  $('#start').show();
+  $('#stop').hide();
 });
 
 $('#short_start').click(() => {
@@ -42,17 +49,24 @@ $('#short_start').click(() => {
   }
 
   startTimer(pomodoroTime, display_short);
+  $('#short_stop').show();
+  $('#short_start').hide();
 })
 
 $('#short_stop').click(() => {
   stopTimer();
+  $('#short_start').show();
+  $('#short_stop').hide();
 });
 
 $('#short_reset').click(() => {
   minutes = 5;
   seconds = 60;
   display_short.textContent = "05:00";
   resetTimer(display_short);
+
+  $('#short_start').show();
+  $('#short_stop').hide();
 });
 
 $('#long_start').click(() => {
@@ -63,17 +77,24 @@ $('#long_start').click(() => {
   }
 
   startTimer(pomodoroTime, display_long);
+
+  $('#long_stop').show();
+  $('#long_start').hide();
 })
 
 $('#long_stop').click(() => {
   stopTimer();
+  $('#long_start').show();
+  $('#long_stop').hide();
 });
 
 $('#long_reset').click(() => {
   minutes = 10;
   seconds = 60;
   display_long.textContent = "10:00";
   resetTimer();
+  $('#long_start').show();
+  $('#long_stop').hide();
 });
 
 function startTimer(duration, display) {

js/notification.js

@@ -15,7 +15,7 @@ function notifyUser() {
     Notification.requestPermission();
   else {
     var notification = new Notification('Buzzz!! Time\'s up', {
-      icon: 'https://raw.githubusercontent.com/amitmerchant1990/pomolectron/master/res/tomato-big.png',
+      icon: 'res/tomato-big.png',
       body: "Hey there! You've been notified!"
     });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pomolectron",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A pomodoro app in your menubar/tray.",
   "main": "index.js",
   "productName": "Pomolectron",