Made the contact search area appealing for the eye and relocated buttons

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

@@ -8,7 +8,7 @@
 	-fx-background-color: transparent;
 }
 
-#messageEnterContainer {
+#textEnterContainer, #contact-search-enter-container {
 	-fx-background-radius: 5.0em;
 }
 

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

@@ -46,14 +46,24 @@
 	-fx-background-color: rgb(25, 25, 25);
 }
 
-#chatList, #topBar {
+#chatList, #topBar, #search-panel {
 	-fx-background-color: #303030;
 }
 
-#messageEnterContainer {
+#textEnterContainer {
 	-fx-background-color: #363636;
 }
 
+#contact-search-enter-container {
+	-fx-background-color: #202020;
+}
+
+#underline {
+	-fx-border: solid;
+	-fx-border-width: 0.0 0.0 1.0 0.0;
+	-fx-border-color: #202020;
+}
+
 .groupMemberNames {
 	-fx-text-fill: rgb(105.0,0.0,153.0);
 	-fx-font-weight: bold;

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

@@ -35,16 +35,45 @@
             <Insets right="1.0" />
          </GridPane.margin>
          <children>
-            <VBox maxHeight="-Infinity" minHeight="-Infinity" prefHeight="60.0" prefWidth="316.0">
+            <VBox id="search-panel" maxHeight="-Infinity" minHeight="-Infinity" prefHeight="80.0" prefWidth="316.0">
                <children>
-                  <TextArea fx:id="contactSearch" onInputMethodTextChanged="#searchContacts" onKeyTyped="#searchContacts" focusTraversable="false" maxHeight="30.0" minHeight="30.0" prefHeight="30.0" prefWidth="200.0" promptText="Search Contacts">
+                  <Label id="contact-search-enter-container" maxHeight="30.0" minHeight="30.0" prefHeight="30.0" prefWidth="325.0">
+                     <graphic>
+                        <TextArea id="contactSearchInput" fx:id="contactSearch" focusTraversable="false" maxHeight="30.0" minHeight="30.0" onInputMethodTextChanged="#searchContacts" onKeyTyped="#searchContacts" prefHeight="30.0" prefWidth="200.0" promptText="Search Contacts">
                            <font>
                               <Font size="14.0" />
                            </font>
-                     <VBox.margin>
+                           <padding>
-                        <Insets left="10.0" right="10.0" />
+                              <Insets left="12.0" right="12.0" />
-                     </VBox.margin>
+                           </padding>
                         </TextArea>
+                     </graphic>
+                     <VBox.margin>
+                        <Insets left="10.0" right="10.0" top="3.0" />
+                     </VBox.margin>
+                  </Label>
+                  <HBox id="underline" alignment="TOP_CENTER" prefHeight="41.0" prefWidth="296.0" spacing="5.0">
+                     <children>
+      						<Button mnemonicParsing="true" onAction="#addContactButtonClicked" prefHeight="27.0" prefWidth="82.0" text=" Add Contact">
+      							<padding>
+      								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+      							</padding>
+                           <HBox.margin>
+                              <Insets />
+                           </HBox.margin>
+      						</Button>
+                        <Button mnemonicParsing="false" prefHeight="27.0" prefWidth="82.0" text="New Group">
+                           <HBox.margin>
+                              <Insets />
+                           </HBox.margin></Button>
+                     </children>
+                     <VBox.margin>
+                        <Insets left="10.0" right="10.0" top="5.0" />
+                     </VBox.margin>
+                     <padding>
+                        <Insets top="3.0" />
+                     </padding>
+                  </HBox>
                </children>
             </VBox>
       		<ListView id="chatList" fx:id="chatList" focusTraversable="false" onMouseClicked="#chatListClicked" prefWidth="316.0" VBox.vgrow="ALWAYS">
@@ -90,11 +119,6 @@
 								<Insets />
 							</VBox.margin>
 						</Button>
-						<Button mnemonicParsing="true" onAction="#addContactButtonClicked" prefHeight="30.0" prefWidth="30.0" text=" + ">
-							<padding>
-								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-							</padding>
-						</Button>
 					</children>
 					<HBox.margin>
 						<Insets right="10.0" />
@@ -118,7 +142,7 @@
 		</ListView>
 		<HBox alignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="3">
 			<children>
-				<Label id="messageEnterContainer" alignment="CENTER" minWidth="300.0" prefHeight="100.0" prefWidth="800.0">
+				<Label id="textEnterContainer" alignment="CENTER" minWidth="300.0" prefHeight="100.0" prefWidth="800.0">
 					<graphic>
 						<TextArea id="messageEnter" fx:id="messageTextArea" disable="true" onInputMethodTextChanged="#messageTextUpdated" onKeyPressed="#checkPostConditions" onKeyTyped="#checkKeyCombination" prefHeight="100.0" prefWidth="1250.0" promptText="Enter Message" wrapText="true">
 							<opaqueInsets>