Fixed layout and localization

Added a button to test the notification at the customizer.

Also fixed typo for locale: `background_notificationPlayPotplayer` and
removed grunt generated files.

.gitignore

@@ -1,7 +1,8 @@
 # Remove auto-generated files
 settings.html
 js/settings.js
-
+pages/edit-notification.js
+pages/edit-notification.html
 
 # Windows image file caches
 Thumbs.db

_locales/en/messages.json

@@ -333,7 +333,7 @@
 	},
 	"background_notificationPlayPotplayer": {
 		"description": "",
-		"message": "Play with Potplayer"
+		"message": "Play with PotPlayer"
 	},
 	"background_notificationLogCheck": {
 		"description": "",
@@ -408,7 +408,19 @@
 		"message": "Remove from YouTube Notifications"
 	},
 	"notificationCustomizer_buttons_title": {
-		"description": "The title for the notification customizer tools",
+		"description": "The title for the notification customizer button card",
 		"message": "Available Buttons"
-	}
+	},
+	"notificationCustomizer_headerTitle": {
+        "description": "The title for the notification customizer header",
+        "message": "Drag and drop buttons from the list to the notification on the right."
+    },
+	"notificationCustomizer_headerSubtitle": {
+        "description": "The subtitle for the notification customizer header",
+        "message": "Notification buttons are limited to two buttons."
+    },
+	"notificationCustomizer_buttonSave": {
+        "description": "The text for the paper-button save in the notification customizer page",
+        "message": "Save"
+    }
 }

pages/edit-notification.css

@@ -190,9 +190,6 @@ a, .link{
     margin-left: 16px;
 }
 
-#notification {
-    transition: transform 0.1s;
-}
 #content {
     display: flex;
     flex-direction: column;
@@ -205,18 +202,26 @@ a, .link{
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    height: calc(100vh - 64px);
 }
 #content_container > * {
     display: flex;
     width: 50vw;
     justify-content: center;
+    align-items: center;
 }
 
 #notification_container {
     display: flex;
     justify-content: center;
 }
+
+#notificationCustomizer_card_container {
+    flex-direction: column;
+}
+#notificationCustomizer_card_container paper-card {
+    margin: 10px 0;
+}
 #notificationCustomizer_buttons {
     width: 80%;
 }
@@ -270,17 +275,17 @@ a, .link{
     padding: 20px 40px;
 }
 
-#header * {
+#header > * {
     display: block;
     text-align: center;
 }
 
-#header span:nth-child(1) {
+#header .title {
     font-size: 28px;
     font-weight: 300;
 }
 
-#header span:nth-child(2) {
+#header .subtitle {
     color: #797979;
     font-size: 16px;
     font-weight: 300;
@@ -294,3 +299,13 @@ a, .link{
     border-radius: 5px;
     margin-top: 20px;
 }
+
+.notification_separator {
+    padding: 15px 0 5px 0;
+    font-size: 21px;
+    border-bottom: 1px solid #eaeaea;
+}
+
+.notification_separator:nth-child(1) {
+    padding-top: 0;
+}