Adjusted message Enter bar (field and buttons) and changed color

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

@@ -8,6 +8,28 @@
 	-fx-background-color: transparent;
 }
 
+#messageEnterContainer {
+	-fx-background-radius: 5em;
+}
+
+#bottomButton {
+	-fx-background-radius: 5em;
+}
+
+.text-area {
+	-fx-background-color: transparent;
+}
+
+.text-area .scroll-pane {
+    -fx-background-color: transparent;
+}
+.text-area .scroll-pane .viewport{
+    -fx-background-color: transparent;
+}
+.text-area .scroll-pane .content{
+    -fx-background-color: transparent;
+}
+
 .menu-item {
 	-fx-background-radius: 15.0px;
 }

client/src/main/resources/css/dark.css

@@ -18,8 +18,8 @@
 	-fx-background-color: lightgray;
 }
 
-.list-view, .list-cell, .text-area .content, .text-field, .password-field, .tooltip, .pane, .pane .content, .vbox, .titled-pane > .title, .titled-pane > *.content, .context-menu, .menu-item {
+.list-view, .list-cell, #messageEnterContainer, .text-field, .password-field, .tooltip, .pane, .pane .content, .vbox, .titled-pane > .title, .titled-pane > *.content, .context-menu, .menu-item {
-	-fx-background-color: dimgray;
+	-fx-background-color: #262626;
 }
 
 .list-cell:selected, .list-cell:selected > *, .menu-item:hover {
@@ -45,3 +45,4 @@
 #loginBackground {
 	-fx-background-color: rgb(25, 25, 25);
 }
+

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

@@ -69,14 +69,21 @@
 		</ListView>
       <HBox alignment="CENTER" spacing="4.0" GridPane.columnIndex="1" GridPane.rowIndex="3">
          <children>
-      		<TextArea fx:id="messageTextArea" disable="true" onInputMethodTextChanged="#messageTextUpdated" onKeyPressed="#checkPostConditions" onKeyTyped="#checkKeyCombination" prefHeight="200.0" prefWidth="1300.0" wrapText="true">
+            <Label id="messageEnterContainer" alignment="CENTER" prefHeight="27.0" prefWidth="1300.0">
-      			<opaqueInsets>
+               <graphic>
-      				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+            		<TextArea id="messageEnter" fx:id="messageTextArea" disable="true" onInputMethodTextChanged="#messageTextUpdated" onKeyPressed="#checkPostConditions" onKeyTyped="#checkKeyCombination" prefHeight="27.0" prefWidth="1250.0" promptText="Enter Message" wrapText="true">
-      			</opaqueInsets>
+            			<opaqueInsets>
-      		</TextArea>
+            				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+            			</opaqueInsets>
+                     <padding>
+                        <Insets left="17.0" right="17.0" />
+                     </padding>
+            		</TextArea>
+               </graphic>
+            </Label>
       		<ButtonBar buttonMinWidth="40.0">
       			<buttons>
-      				<Button fx:id="postButton" defaultButton="true" disable="true" mnemonicParsing="true" onAction="#postMessage" text="Post">
+      				<Button id="bottomButton" fx:id="postButton" defaultButton="true" disable="true" mnemonicParsing="true" onAction="#postMessage" prefHeight="40.0" prefWidth="40.0" text="Post">
       					<tooltip>
       						<Tooltip anchorLocation="WINDOW_TOP_LEFT" autoHide="true" maxWidth="350.0" text="Click this button to send the message. If it is disabled, you first have to select a contact to send it to. A message may automatically be sent when you press (Ctrl + ) Enter, according to your preferences. Additionally sends a message when pressing &quot;Alt&quot; + &quot;P&quot;." wrapText="true" />
       					</tooltip>
@@ -91,17 +98,17 @@
       						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
       					</padding>
       				</Button>
-      				<Button fx:id="voiceButton" disable="true" onAction="#voiceButtonClicked">
+      				<Button id="bottomButton" fx:id="voiceButton" disable="true" onAction="#voiceButtonClicked" prefHeight="40.0" prefWidth="40.0">
       					<padding>
       						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
       					</padding>
       				</Button>
-      				<Button fx:id="attachmentButton" disable="true" mnemonicParsing="false" onAction="#attachmentButtonClicked">
+      				<Button id="bottomButton" fx:id="attachmentButton" disable="true" mnemonicParsing="false" onAction="#attachmentButtonClicked" prefHeight="40.0" prefWidth="40.0">
       					<padding>
       						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
       					</padding>
       				</Button>
-      				<Button fx:id="rotateButton" mnemonicParsing="false" onAction="#doABarrelRoll">
+      				<Button id="bottomButton" fx:id="rotateButton" mnemonicParsing="false" onAction="#doABarrelRoll" prefHeight="40.0" prefWidth="40.0">
       					<padding>
       						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
       					</padding>