Added alignment and coloring of messages according to who is the sender

additionally added:
- the label on top of the ChatScene now displays the own users name
- the messageList now scrolls to the bottom when a message is
created/received

src/main/resources/css/base.css

@@ -1,4 +1,4 @@
-.button {
+.button, .list-cell {
 	-fx-background-radius: 5em;
 }
 
@@ -13,7 +13,6 @@
 
 #remainingCharsLabel {
 	-fx-text-fill: #00FF00;
-	-fx-opacity: 1;
 	-fx-background-color: transparent;
 }
 
@@ -32,3 +31,15 @@
 .offline {
 	-fx-text-fill: gray;
 }
+
+.received-message {
+	-fx-alignment: center-left;
+	-fx-background-radius: 4em;
+	-fx-text-alignment: right;
+}
+
+.own-message {
+	-fx-alignment: center-right;
+	-fx-background-radius: 4em;
+	-fx-text-alignment: left;
+}

src/main/resources/css/dark.css

@@ -7,7 +7,7 @@
 }
 
 .button {
-	-fx-background-color: rgb(105.0,0.0,153.0);
+	-fx-background-color: darkviolet;
 }
 
 .button:pressed {
@@ -22,8 +22,16 @@
 	-fx-background-color: dimgray;
 }
 
-.list-cell:selected {
-    -fx-background-color:rgb(105.0,0.0,153.0) ;
+.list-cell:selected, .list-cell:selected > * {
+    -fx-background-color: darkviolet;
+}
+
+.received-message {
+	-fx-background-color: seagreen;
+}
+
+.own-message {
+	-fx-background-color: gray;
 }
 
 .alert.information.dialog-pane, .alert.warning.dialog-pane, .alert.error.dialog-pane {

src/main/resources/css/light.css

@@ -1,3 +1,16 @@
-.button, .list-cell:selected{
+.button{
 	-fx-background-color: orangered;
 }
+
+.list-cell:selected, .list-cell:selected > * {
+	-fx-background-color: orangered;
+	-fx-text-fill: black;
+}
+
+.received-message {
+	-fx-background-color: lightgreen;
+}
+
+.own-message {
+	-fx-background-color: lightgray;
+}