Changes in the layout and in the options.

.npmignore

@@ -0,0 +1,5 @@
+.vscode
+assets/
+playbook/
+LICENSE
+readme.md

.vscode/launch.json

@@ -0,0 +1,35 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Debug Main Process",
+            "type": "node",
+            "request": "launch",
+            "cwd": "${workspaceRoot}",
+            "outFiles": [
+                "${workspaceRoot}/lib/**/*.js"
+            ],
+            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+            "windows": {
+                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
+            },
+            "args" : ["."],
+            "program": "${workspaceRoot}/playbook/main.js"
+        },
+        {
+            "name": "Debug Renderer Process",
+            "type": "chrome",
+            "request": "launch",
+            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+            "runtimeArgs": [
+                "http://localhost:4000",
+                "--remote-debugging-port=9222"
+            ],
+            "sourceMaps": true,
+            "webRoot": "${workspaceRoot}"
+        }
+    ]
+}

lib/assets/notification.css

@@ -1,142 +1,88 @@
 html, body {
   overflow: hidden;
   background: rgba(0, 0, 0, 0);
-  color: #fff;
   margin: 0;
   padding: 0;
+  font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
+  background-color: #FAFAFA;
 }
 
-a {
-  color: #fff;
-}
-
-#notification {
-  height: 80px;
+#main{
   width: 400px;
-  margin: 0;
-  position: relative;
-  font-family: Helvetica, Arial, sans-serif;
-  background-image: linear-gradient(rgba(120, 119, 119, 0.95), rgba(75, 74, 74, 0.95));
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  box-sizing: border-box;
-  -webkit-app-region: drag;
-  -webkit-user-select: none;
-}
-#notification.vertical.single {
-  height: 120px;
-}
-#notification.vertical.double {
-  height: 160px;
-}
-#notification .icon {
-  width: 90px;
-  height: 80px;
-  float: left;
-}
-#notification .icon img {
-  padding: 10px 15px 0 15px;
-  width: 60px;
-}
-#notification.actions {
-  -webkit-app-region: no-drag;
+  height: 90px;
 }
-#notification,
-#notification .icon,
-#notification .icon img,
-#notification .message,
-#notification .message:before,
-#notification .message h2,
-#notification .message p {
-  -webkit-app-region: drag;
-}
-#notification.actions .message {
-  width: 205px;
-}
-#notification.vertical.actions .message {
-  width: 308px;
-}
-#notification .message {
-  height: 80px;
-  width: 310px;
-  float: left;
-  text-overflow: clip;
-  white-space: nowrap;
-  overflow: hidden;
-  position: relative;
+
+.container{
+  display: flex;
+  flex-shrink: 0;
 }
-#notification .message:before {
-  content: '';
+
+#notification {
+  display: flex;
+  flex-direction: row;
   width: 100%;
   height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
 }
-#notification .message.onlyTitle h2 {
-  padding: 30px;
+
+.vertical #notification {
+  flex-direction: column;
 }
-#notification .message h2 {
-  padding: 20px 0 0 0px;
+
+#notification .group {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  -webkit-app-region: drag;
+}
+
+#icon {
+  width: 75px;
+  padding: 10px;
+}
+#text {
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 10px;
+}
+#text .title {
+  font-weight: bold;
+  font-size: 1.1em;
   margin: 0 0 5px;
-  font: bold 18px Myriad, Helvetica, Arial, sans-serif;
 }
-#notification .message p {
-  padding: 0;
-  margin: 0;
-  font: bold 13px Myriad, Helvetica, Arial, sans-serif;
+#text .description {
   font-weight: normal;
+  font-size: 0.9em;
+  margin: 0;
 }
-#notification #buttons {
-  float: right;
-  position: relative;
-}
-#notification.horizontal #buttons {
+#buttons {
+  width: 100px;
+  flex-direction: column;
   border-left: 1px solid black;
-  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.4);
-}
-#notification.vertical #buttons {
-  width: 100%;
-  position: absolute;
-  top: 80px;
 }
-#notification.vertical.single #buttons a {
-  height: 40px;
-  line-height: 40px;
-}
-#notification.vertical #buttons a {
-  padding-left: 20px;
-  text-align: left;
+.vertical #buttons {
   width: 100%;
-  height: 40px;
-  line-height: 40px;
-  border-top: 1px solid black;
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
-}
-#notification.double #buttons a {
-  height: 40px;
-  line-height: 40px;
-}
-#notification.double.horizontal #buttons a:nth-child(2) {
-  border-top: 1px solid black;
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
-}
-#notification.double #buttons a:nth-child(2) {
-  top: 40px;
-}
-#notification.single #buttons a {
-  height: 80px;
-  line-height: 80px;
+  flex-direction: row; 
 }
-#notification #buttons a {
-  box-sizing: border-box;
-  top: 0;
-  display: block;
-  width: 100px;
-  font: 13px Helvetica, Arial, sans-serif;
-  text-align: center;
-  text-decoration: none;
-  right: 0;
+#buttons button {
+  flex: 1;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background: #37474F;
+  cursor: pointer;
+  color: white;
 }
-#notification #buttons a:active {
-  background-color: rgba(75, 74, 74, 0.95);
+.vertical #buttons button {
+  height: 25px;
 }
+
+.unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default !important;
+}

lib/assets/notification.html

@@ -1,26 +1,25 @@
 <!doctype html>
 <html>
+
 <head>
     <meta charset="utf-8">
     <title>Notification</title>
     <link href="notification.css" rel="stylesheet" type="text/css">
 </head>
-<body>
-    <div class="container">
-        <div id="notification">
-            <div class="icon">
-                <img id="icon">
-            </div>
 
-            <div class="message">
-                <h2 id="title"></h2>
-                <p id="message"></p>
+<body id="main">
+    <div id="notification">
+        <article class="group">
+            <div id="icon" class="icon"></div>
+            <div id="text" class="container unselectable">
+                <p id="title" class="title"></p>
+                <p id="message" class="description"></p>
             </div>
 
-            <div id="buttons"></div>
-        </div>
+        </article>
+        <div id="buttons" class="container"></div>
     </div>
-
     <script src="../app.js"></script>
 </body>
-</html>
+
+</html>

lib/behaviors/clickBehavior.js

@@ -24,7 +24,7 @@ class ClickBehavior extends EventEmitter {
   }
 
   click (event) {
-    if (event.target.tagName === 'A') return
+    if (event.target.tagName === 'BUTTON') return
     this.clicks++
     clearTimeout(this.timeout)
     this.timeout = setTimeout(this.checkClick.bind(this), 150)