Implemented ProfilePics UI mechanism

client/src/main/resources/css/base.css

@@ -127,3 +127,7 @@
 #transparentBackground {
 	-fx-background-color: transparent;
 }
+
+#profilePic {
+	-fx-radius: 1em;
+}

client/src/main/resources/fxml/ChatScene.fxml

@@ -48,6 +48,11 @@
 		</ListView>
       <HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0">
          <children>
+            <ImageView id="profilePic" fx:id="clientProfilePic" fitHeight="43.0" fitWidth="43.0" pickOnBounds="true" preserveRatio="true">
+               <HBox.margin>
+                  <Insets left="15.0" top="5.0" />
+               </HBox.margin>
+            </ImageView>
       		<Label id="transparentBackground" fx:id="contactLabel" prefHeight="27.0" prefWidth="134.0">
       			<padding>
       				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
@@ -55,6 +60,9 @@
                <font>
                   <Font size="18.0" />
                </font>
+               <HBox.margin>
+                  <Insets left="10.0" top="5.0" />
+               </HBox.margin>
       		</Label>
             <Region id="transparentBackground" prefHeight="77.0" prefWidth="115.0" />
             <VBox id="transparentBackground" alignment="CENTER_RIGHT" prefHeight="200.0" prefWidth="100.0" spacing="5.0">
@@ -143,31 +151,29 @@
       		</ButtonBar>
          </children>
          <GridPane.margin>
-            <Insets bottom="40.0" top="10.0" />
+            <Insets bottom="40.0" left="300.0" right="300.0" top="10.0" />
          </GridPane.margin>
       </HBox>
-		<Label id="remainingCharsLabel" fx:id="remainingChars" ellipsisString="" maxHeight="30.0" maxWidth="180.0" prefHeight="30.0" prefWidth="180.0" text="remaining chars: 0/x" textFill="LIME" textOverrun="LEADING_WORD_ELLIPSIS" visible="false" GridPane.columnIndex="1" GridPane.rowIndex="2">
-			<GridPane.margin>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</GridPane.margin>
-			<padding>
-				<Insets bottom="5.0" top="5.0" />
-			</padding>
-			<opaqueInsets>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</opaqueInsets>
-			<tooltip>
-				<Tooltip text="Shows how many chars you can still enter in this message" wrapText="true" />
-			</tooltip>
-		</Label>
-		<Label fx:id="infoLabel" text="Something happened" textFill="#faa007" visible="false" wrapText="true" GridPane.columnIndex="1">
-			<GridPane.margin>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</GridPane.margin>
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</padding>
-		</Label>
+      <HBox prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="2">
+         <children>
+      		<Label id="remainingCharsLabel" fx:id="remainingChars" ellipsisString="" maxHeight="30.0" maxWidth="180.0" prefHeight="30.0" prefWidth="180.0" text="remaining chars: 0/x" textFill="LIME" textOverrun="LEADING_WORD_ELLIPSIS" visible="false">
+      			<padding>
+      				<Insets bottom="5.0" top="5.0" />
+      			</padding>
+      			<opaqueInsets>
+      				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+      			</opaqueInsets>
+      			<tooltip>
+      				<Tooltip text="Shows how many chars you can still enter in this message" wrapText="true" />
+      			</tooltip>
+      		</Label>
+      		<Label fx:id="infoLabel" text="Something happened" textFill="#faa007" visible="false" wrapText="true">
+      			<padding>
+      				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+      			</padding>
+      		</Label>
+         </children>
+      </HBox>
 		<ImageView fx:id="attachmentView" pickOnBounds="true" preserveRatio="true" visible="false" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.halignment="RIGHT" GridPane.rowIndex="2">
 			<viewport>
 				<Rectangle2D height="20.0" width="20.0" />
@@ -178,6 +184,11 @@
 		</ImageView>
       <HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="1">
          <children>
+            <ImageView id="profilePic" fx:id="recipientProfilePic" fitHeight="43.0" fitWidth="43.0" pickOnBounds="true" preserveRatio="true">
+               <HBox.margin>
+                  <Insets left="20.0" top="5.0" />
+               </HBox.margin>
+            </ImageView>
             <VBox alignment="CENTER_LEFT" prefHeight="97.0" prefWidth="316.0">
                <children>
                   <Label fx:id="topBarContactLabel" text="">
@@ -188,7 +199,7 @@
                   <Label fx:id="topBarStatusLabel" text="" />
                </children>
                <HBox.margin>
-                  <Insets left="20.0" />
+                  <Insets left="15.0" />
                </HBox.margin>
             </VBox>
             <Region prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />