Added close button for keyBindingDialog.

- fixed that you cannot bind the key you are using.

#story[1278] #pair[hyi25, zyt10]

src/main/resources/css/Master.css

@@ -44,6 +44,11 @@
     -fx-border-color: -fx-decorator-color;
     -fx-border-width: 0 4 4 4;
 }
+
+.jfx-decorator-button {
+    -fx-focus-traversable: false; /* so decorator button will not be focused */
+}
+
 /********* customised scroll bar for scroll pane ***********/
 
 /* The main scrollbar **track** CSS class  */

src/main/resources/css/StartScreenView.css

@@ -2,6 +2,7 @@
     -fx-font-size: 20px;
     -fx-text-fill: -fx-pp-light-text-color;
     -fx-background-color: -fx-pp-theme-color;
+    -fx-focus-traversable: false;
 }
 
 .jfx-rippler {

src/main/resources/css/dialogs/KeyBindingDialog.css

@@ -3,6 +3,16 @@
     -fx-text-fill: -fx-pp-dark-text-color;
 }
 
+#closeLabel {
+    -fx-font-size: 30;
+    -fx-text-fill: -fx-pp-dark-text-color;
+}
+
+#closeLabel:hover {
+    -fx-text-fill: -fx-pp-theme-color;
+    -fx-font-size: 33;
+}
+
 JFXButton {
     -fx-background-color: -fx-pp-light-text-color;
     -fx-text-fill: -fx-pp-theme-color;

src/main/resources/views/dialogs/KeyBindingDialog.fxml

@@ -110,6 +110,8 @@
                maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="45.0"
                prefWidth="150.0" text="RESET" GridPane.columnSpan="2" GridPane.halignment="CENTER"
                GridPane.rowIndex="9" GridPane.valignment="CENTER"/>
+             <Label fx:id="closeLabel" text="✖" translateY="-5.0" GridPane.columnIndex="1"
+               GridPane.halignment="RIGHT" GridPane.valignment="TOP"/>
          </children>
       </GridPane>
    </children>