Merge pull request #39 from informatik-ag-ngl/f/finishing_new_UI

Finished new UI by adding missing Components (not Settings screen yet)
2020-08-31 08:10:19 +02:00 · 2020-08-31 08:10:19 +02:00 · f6c62f9073
parent 572541e381 4137bf393a
commit f6c62f9073
24 changed files with 591 additions and 384 deletions
--- a/client/src/main/java/envoy/client/event/BackEvent.java
+++ b/client/src/main/java/envoy/client/event/BackEvent.java
@ -0,0 +1,18 @@
+package envoy.client.event;
+
+import envoy.event.Event.Valueless;
+
+/**
+ * This event serves the purpose to trigger the tab change to tab 0 in {@link ChatScene}.<p>
+ * 
+ * Project: <strong>client</strong><br>
+ * File: <strong>BackEvent.java</strong><br>
+ * Created: <strong>23.08.2020</strong><br>
+ *
+ * @author Maximilian K&auml;fer
+ * @since Envoy Client v0.2-beta
+ */
+public class BackEvent extends Valueless{
+
+	private static final long serialVersionUID = 0L;
+}
--- a/client/src/main/java/envoy/client/event/LoadGroupCreationEvent.java
+++ b/client/src/main/java/envoy/client/event/LoadGroupCreationEvent.java
@ -0,0 +1,27 @@
+package envoy.client.event;
+
+import envoy.client.data.LocalDB;
+import envoy.client.ui.controller.ChatScene;
+import envoy.event.Event;
+
+/**
+ * This event carries an instance of {@link LocalDB} so the groupCreationTab has the most recent version of the contactList. <br>
+ * It is triggered as soon as the corresponding button in {@link ChatScene} is clicked. <p>
+ * 
+ * Project: <strong>client</strong><br>
+ * File: <strong>LoadGroupCreationEvent.java</strong><br>
+ * Created: <strong>23.08.2020</strong><br>
+ *
+ * @author Maximilian K&auml;fer
+ * @since Envoy Client v0.2-beta
+ */
+public class LoadGroupCreationEvent extends Event<LocalDB>{
+
+	private static final long serialVersionUID = 0L;
+
+	/**
+	 * @param value the localDB
+	 * @since Envoy Client v0.2-beta
+	 */
+	public LoadGroupCreationEvent(LocalDB value) { super(value); }
+}
--- a/client/src/main/java/envoy/client/ui/SceneContext.java
+++ b/client/src/main/java/envoy/client/ui/SceneContext.java
@ -54,33 +54,12 @@ public final class SceneContext {
 		 */
 		SETTINGS_SCENE("/fxml/SettingsScene.fxml"),

-		/**
-		 * The scene in which the contact search screen is displayed.
-		 *
-		 * @since Envoy Client v0.1-beta
-		 */
-		CONTACT_SEARCH_SCENE("/fxml/ContactSearchScene.fxml"),
-
-		/**
-		 * The scene in which the group creation screen is displayed.
-		 *
-		 * @since Envoy Client v0.1-beta
-		 */
-		GROUP_CREATION_SCENE("/fxml/GroupCreationScene.fxml"),
-
 		/**
 		 * The scene in which the login screen is displayed.
 		 *
 		 * @since Envoy Client v0.1-beta
 		 */
-		LOGIN_SCENE("/fxml/LoginScene.fxml"),
-
-		/**
-		 * The scene in which the info screen is displayed.
-		 *
-		 * @since Envoy Client v0.1-beta
-		 */
-		MESSAGE_INFO_SCENE("/fxml/MessageInfoScene.fxml");
+		LOGIN_SCENE("/fxml/LoginScene.fxml");

 		/**
 		 * The path to the FXML resource.
--- a/client/src/main/java/envoy/client/ui/controller/ChatScene.java
+++ b/client/src/main/java/envoy/client/ui/controller/ChatScene.java
@ -20,13 +20,16 @@ import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
 import javafx.collections.transformation.FilteredList;
 import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.geometry.Insets;
+import javafx.geometry.Pos;
 import javafx.scene.control.*;
 import javafx.scene.control.Alert.AlertType;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import javafx.scene.input.KeyCode;
 import javafx.scene.input.KeyEvent;
-import javafx.scene.layout.GridPane;
+import javafx.scene.layout.*;
 import javafx.scene.paint.Color;
 import javafx.scene.shape.Rectangle;
 import javafx.stage.FileChooser;
@ -36,13 +39,13 @@ import envoy.client.data.*;
 import envoy.client.data.audio.AudioRecorder;
 import envoy.client.data.commands.SystemCommandBuilder;
 import envoy.client.data.commands.SystemCommandsMap;
-import envoy.client.event.MessageCreationEvent;
-import envoy.client.event.SendEvent;
+import envoy.client.event.*;
 import envoy.client.net.Client;
 import envoy.client.net.WriteProxy;
 import envoy.client.ui.*;
 import envoy.client.ui.listcell.*;
 import envoy.client.util.ReflectionUtil;
+import envoy.constant.Tabs;
 import envoy.data.*;
 import envoy.data.Attachment.AttachmentType;
 import envoy.event.*;
@ -84,9 +87,6 @@ public final class ChatScene implements Restorable {
 	@FXML
 	private Button settingsButton;

-	@FXML
-	private Button rotateButton;
-
 	@FXML
 	private Button messageSearchButton;

@ -122,6 +122,18 @@ public final class ChatScene implements Restorable {

 	@FXML
 	private TextArea contactSearch;
+	
+	@FXML
+	private VBox contactOperations;
+	
+	@FXML
+	private TabPane tabPane;
+	
+	@FXML
+	private Tab contactSearchTab;
+	
+	@FXML
+	private Tab groupCreationTab;

 	private LocalDB			localDB;
 	private Client			client;
@ -161,7 +173,6 @@ public final class ChatScene implements Restorable {
 		voiceButton.setGraphic(new ImageView(IconUtil.loadIconThemeSensitive("microphone", DEFAULT_ICON_SIZE)));
 		attachmentButton.setGraphic(new ImageView(IconUtil.loadIconThemeSensitive("attachment", DEFAULT_ICON_SIZE)));
 		attachmentView.setImage(DEFAULT_ATTACHMENT_VIEW_IMAGE);
-		rotateButton.setGraphic(new ImageView(IconUtil.loadIconThemeSensitive("rotate", (int) (DEFAULT_ICON_SIZE * 1.5))));
 		messageSearchButton.setGraphic(new ImageView(IconUtil.loadIconThemeSensitive("search", DEFAULT_ICON_SIZE)));
 		clientProfilePic.setImage(IconUtil.loadIconThemeSensitive("user_icon", 43));
 		final Rectangle clip = new Rectangle();
@ -170,7 +181,24 @@ public final class ChatScene implements Restorable {
 		clip.setArcHeight(43);
 		clip.setArcWidth(43);
 		clientProfilePic.setClip(clip);
-
+		
+		Platform.runLater(() -> {
+			if(client.isOnline()) {
+				try {
+					contactSearchTab.setContent(FXMLLoader.load(new File("src/main/resources/fxml/ContactSearchTab.fxml").toURI().toURL()));
+					groupCreationTab.setContent(FXMLLoader.load(new File("src/main/resources/fxml/GroupCreationTab.fxml").toURI().toURL()));
+				} catch (IOException e2) {
+					logger.log(Level.SEVERE, "An error occurred when attempting to load tabs: ", e2);
+				}
+			} else {
+				contactSearchTab.setContent(createOfflineNote());
+				groupCreationTab.setContent(createOfflineNote());
+			}
+		});
+		
+		//Listen to backEvents
+		eventBus.register(BackEvent.class, e -> tabPane.getSelectionModel().select(Tabs.CONTACT_LIST));
+		
 		// Listen to received messages
 		eventBus.register(MessageCreationEvent.class, e -> {
 			final var message = e.get();
@ -256,6 +284,22 @@ public final class ChatScene implements Restorable {

 		eventBus.register(GroupCreationResult.class, e -> Platform.runLater(() -> { newGroupButton.setDisable(!e.get()); }));
 	}
+	
+	private AnchorPane createOfflineNote() {
+		AnchorPane anc = new AnchorPane();
+		VBox vBox = new VBox();
+		vBox.setAlignment(Pos.TOP_CENTER);
+		vBox.setPrefWidth(316);
+		Label label = new Label("You have to be online!");
+		label.setPadding(new Insets(50, 0, 5, 0));
+		Button button = new Button("OK");
+		button.setOnAction(e -> eventBus.dispatch(new BackEvent()));
+		vBox.getChildren().add(label);
+		vBox.getChildren().add(button);
+		anc.getChildren().add(vBox);
+		anc.setId("note-background");
+		return anc;
+	}

 	/**
 	 * Initializes all {@code SystemCommands} used in {@code ChatScene}.
@ -391,8 +435,13 @@ public final class ChatScene implements Restorable {
 	 */
 	@FXML
 	private void addContactButtonClicked() {
-		sceneContext.load(SceneContext.SceneInfo.CONTACT_SEARCH_SCENE);
-		sceneContext.<ContactSearchScene>getController().initializeData(sceneContext, localDB);
+		tabPane.getSelectionModel().select(Tabs.CONTACT_SEARCH);
+	}
+	
+	@FXML
+	private void groupCreationButtonClicked() {
+		eventBus.dispatch(new LoadGroupCreationEvent(localDB));
+		tabPane.getSelectionModel().select(Tabs.GROUP_CREATION);
 	}

 	@FXML
@ -472,18 +521,6 @@ public final class ChatScene implements Restorable {
 		}
 	}

-	/**
-	 * Rotates every element in our application by (at most 4 *) 360° in at most
-	 * 2.75s.
-	 *
-	 * @since Envoy Client v0.1-beta
-	 */
-	@FXML
-	private void doABarrelRoll() {
-		final var random = new Random();
-		doABarrelRoll(random.nextInt(3) + 1, random.nextDouble() * 3 + 1);
-	}
-
 	/**
 	 * Rotates every element in our application by {@code rotations}*360° in
 	 * {@code an}.
--- a/client/src/main/java/envoy/client/ui/controller/ContactSearchScene.java
+++ b/client/src/main/java/envoy/client/ui/controller/ContactSearchScene.java
@ -9,16 +9,13 @@ import javafx.fxml.FXML;
 import javafx.scene.control.*;
 import javafx.scene.control.Alert.AlertType;

-import envoy.client.data.LocalDB;
+import envoy.client.event.BackEvent;
 import envoy.client.event.SendEvent;
-import envoy.client.ui.ClearableTextField;
-import envoy.client.ui.SceneContext;
 import envoy.client.ui.listcell.ContactControl;
 import envoy.client.ui.listcell.ListCellFactory;
 import envoy.data.User;
 import envoy.event.ElementOperation;
 import envoy.event.EventBus;
-import envoy.event.GroupCreationResult;
 import envoy.event.contact.ContactOperation;
 import envoy.event.contact.UserSearchRequest;
 import envoy.event.contact.UserSearchResult;
@ -32,30 +29,24 @@ import envoy.util.EnvoyLog;
 * <i>The actual search algorithm is implemented on the server.
 * <p>
 * To create a group, a button is available that loads the
- * {@link GroupCreationScene}.
+ * {@link GroupCreationTab}.
 * <p>
 * Project: <strong>envoy-client</strong><br>
 * File: <strong>ContactSearchScene.java</strong><br>
 * Created: <strong>07.06.2020</strong><br>
 *
 * @author Leon Hofmeister
+ * @author Maximilian K&auml;fer
 * @since Envoy Client v0.1-beta
 */
-public final class ContactSearchScene {
+public class ContactSearchTab {

 	@FXML
-	private ClearableTextField searchBar;
+	private TextArea searchBar;

 	@FXML
 	private ListView<User> userList;

-	@FXML
-	private Button newGroupButton;
-
-	private SceneContext sceneContext;
-
-	private LocalDB localDB;
-
 	private Alert alert = new Alert(AlertType.CONFIRMATION);

 	private User currentlySelectedUser;
@ -71,24 +62,12 @@ public final class ContactSearchScene {
 	private static final EventBus	eventBus	= EventBus.getInstance();
 	private static final Logger		logger		= EnvoyLog.getLogger(ChatScene.class);

-	/**
-	 * @param sceneContext enables the user to return to the chat scene
-	 * @param localDB      the local database to which new contacts are added
-	 * @since Envoy Client v0.1-beta
-	 */
-	public void initializeData(SceneContext sceneContext, LocalDB localDB) {
-		this.sceneContext	= sceneContext;
-		this.localDB		= localDB;
-	}
-
 	@FXML
 	private void initialize() {
 		userList.setCellFactory(new ListCellFactory<>(ContactControl::new));
-		searchBar.setClearButtonListener(e -> { searchBar.getTextField().clear(); userList.getItems().clear(); });
 		eventBus.register(UserSearchResult.class,
 				response -> Platform.runLater(() -> { userList.getItems().clear(); userList.getItems().addAll(response.get()); }));
 		eventBus.register(ContactOperation.class, handler);
-		eventBus.register(GroupCreationResult.class, e -> Platform.runLater(() -> { newGroupButton.setDisable(!e.get()); }));
 	}

 	/**
@ -98,7 +77,7 @@ public final class ContactSearchScene {
 	 */
 	@FXML
 	private void sendRequest() {
-		final var text = searchBar.getTextField().getText().strip();
+		final var text = searchBar.getText().strip();
 		if (!text.isBlank()) eventBus.dispatch(new SendEvent(new UserSearchRequest(text)));
 		else userList.getItems().clear();
 	}
@ -111,7 +90,7 @@ public final class ContactSearchScene {
 	 */
 	@FXML
 	private void clear() {
-		searchBar.getTextField().setText(null);
+		searchBar.setText(null);
 		userList.getItems().clear();
 	}

@ -126,30 +105,16 @@ public final class ContactSearchScene {
 		final var user = userList.getSelectionModel().getSelectedItem();
 		if (user != null) {
 			currentlySelectedUser	= user;
-			alert					= new Alert(AlertType.CONFIRMATION);
-			alert.setTitle("Add User to Contact List");
-			alert.setHeaderText("Add the user " + currentlySelectedUser.getName() + " to your contact list?");
-			// Normally, this would be total BS (we are already on the FX Thread), however
-			// it could be proven that the creation of this dialog wrapped in
-			// Platform.runLater is less error-prone than without it
-			Platform.runLater(() -> alert.showAndWait().filter(btn -> btn == ButtonType.OK).ifPresent(btn -> {
-				final var event = new ContactOperation(currentlySelectedUser, ElementOperation.ADD);
-				// Sends the event to the server
-				eventBus.dispatch(new SendEvent(event));
-				// Removes the chosen user and updates the UI
-				userList.getItems().remove(currentlySelectedUser);
-				eventBus.dispatch(event);
-				logger.log(Level.INFO, "Added user " + currentlySelectedUser);
-			}));
+			final var event = new ContactOperation(currentlySelectedUser, ElementOperation.ADD);
+			// Sends the event to the server
+			eventBus.dispatch(new SendEvent(event));
+			// Removes the chosen user and updates the UI
+			userList.getItems().remove(currentlySelectedUser);
+			eventBus.dispatch(event);
+			logger.log(Level.INFO, "Added user " + currentlySelectedUser);
 		}
 	}

 	@FXML
-	private void newGroupButtonClicked() {
-		sceneContext.load(SceneContext.SceneInfo.GROUP_CREATION_SCENE);
-		sceneContext.<GroupCreationScene>getController().initializeData(sceneContext, localDB);
-	}
-
-	@FXML
-	private void backButtonClicked() { sceneContext.pop(); }
+	private void backButtonClicked() { eventBus.dispatch(new BackEvent()); }
 }
--- a/client/src/main/java/envoy/client/ui/controller/GroupCreationScene.java
+++ b/client/src/main/java/envoy/client/ui/controller/GroupCreationScene.java
@ -7,13 +7,13 @@ import java.util.stream.Collectors;
 import javafx.application.Platform;
 import javafx.fxml.FXML;
 import javafx.scene.control.*;
-import javafx.scene.control.Alert.AlertType;
+import javafx.scene.layout.HBox;

 import envoy.client.data.Chat;
 import envoy.client.data.LocalDB;
+import envoy.client.event.BackEvent;
+import envoy.client.event.LoadGroupCreationEvent;
 import envoy.client.event.SendEvent;
-import envoy.client.ui.ClearableTextField;
-import envoy.client.ui.SceneContext;
 import envoy.client.ui.listcell.ContactControl;
 import envoy.client.ui.listcell.ListCellFactory;
 import envoy.data.Contact;
@ -21,7 +21,6 @@ import envoy.data.Group;
 import envoy.data.User;
 import envoy.event.EventBus;
 import envoy.event.GroupCreation;
-import envoy.event.GroupCreationResult;
 import envoy.util.Bounds;

 /**
@ -40,22 +39,34 @@ import envoy.util.Bounds;
 * @author Maximilian K&auml;fer
 * @since Envoy Client v0.1-beta
 */
-public final class GroupCreationScene {
+public class GroupCreationTab {

 	@FXML
 	private Button createButton;
+	
+	@FXML
+	private Button cancelButton;

 	@FXML
-	private ClearableTextField groupNameField;
+	private TextArea groupNameField;

 	@FXML
 	private ListView<User> userList;
-
-	private SceneContext sceneContext;
+	
+	@FXML
+	private Label errorMessageLabel;
+	
+	@FXML
+	private Button proceedDupButton;
+	
+	@FXML
+	private Button cancelDupButton;
+	
+	@FXML
+	private HBox errorProceedBox;

 	private LocalDB localDB;
-
-	private String groupName;
+	private String name;

 	private static final EventBus eventBus = EventBus.getInstance();

@ -63,38 +74,20 @@ public final class GroupCreationScene {
 	private void initialize() {
 		userList.setCellFactory(new ListCellFactory<>(ContactControl::new));
 		userList.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
-		groupNameField.setClearButtonListener(e -> { groupNameField.getTextField().clear(); createButton.setDisable(true); });
-		eventBus.register(GroupCreationResult.class, e -> Platform.runLater(() -> {
-			if (e.get()) new Alert(AlertType.INFORMATION, String.format("Group '%s' successfully created.", groupName)).showAndWait();
-			else {
-				createButton.setDisable(true);
-				final var alert = new Alert(AlertType.ERROR);
-				alert.setTitle("Groups are not allowed");
-				alert.setHeaderText("Cannot create group as your current server disabled this feature");
-				alert.setContentText("If this is unplanned, please contact your server administrator.");
-				alert.showAndWait();
-				sceneContext.pop();
-			}
-		}));
-	}
-
-	/**
-	 * @param sceneContext enables the user to return to the chat scene
-	 * @param localDB      the local database from which potential group members can
-	 *                     be selected
-	 * @since Envoy Client v0.1-beta
-	 */
-	public void initializeData(SceneContext sceneContext, LocalDB localDB) {
-		this.sceneContext	= sceneContext;
-		this.localDB		= localDB;
-		Platform.runLater(() -> userList.getItems()
-			.addAll(localDB.getChats()
-				.stream()
-				.map(Chat::getRecipient)
-				.filter(User.class::isInstance)
-				.filter(not(localDB.getUser()::equals))
-				.map(User.class::cast)
-				.collect(Collectors.toList())));
+		
+		eventBus.register(LoadGroupCreationEvent.class, e -> {
+			createButton.setDisable(true);
+			this.localDB = e.get();
+			userList.getItems().clear();
+			Platform.runLater(() -> userList.getItems()
+					.addAll(localDB.getChats()
+						.stream()
+						.map(Chat::getRecipient)
+						.filter(User.class::isInstance)
+						.filter(not(localDB.getUser()::equals))
+						.map(User.class::cast)
+						.collect(Collectors.toList())));
+		});
 	}

 	/**
@ -104,7 +97,7 @@ public final class GroupCreationScene {
 	 */
 	@FXML
 	private void userListClicked() {
-		createButton.setDisable(userList.getSelectionModel().isEmpty() || groupNameField.getTextField().getText().isBlank());
+		createButton.setDisable(userList.getSelectionModel().isEmpty() || groupNameField.getText().isBlank());
 	}

 	/**
@ -114,7 +107,7 @@ public final class GroupCreationScene {
 	 * @since Envoy Client v0.1-beta
 	 */
 	@FXML
-	private void textUpdated() { createButton.setDisable(groupNameField.getTextField().getText().isBlank()); }
+	private void textUpdated() { createButton.setDisable(userList.getSelectionModel().isEmpty() || groupNameField.getText().isBlank()); }

 	/**
 	 * Sends a {@link GroupCreation} to the server and closes this scene.
@ -125,16 +118,24 @@ public final class GroupCreationScene {
 	 */
 	@FXML
 	private void createButtonClicked() {
-		final var name = groupNameField.getTextField().getText();
+		name = groupNameField.getText();
 		if (!Bounds.isValidContactName(name)) {
-			new Alert(AlertType.ERROR, "The entered group name is not valid (" + Bounds.CONTACT_NAME_PATTERN + ")").showAndWait();
-			groupNameField.getTextField().clear();
+			setErrorMessageLabelSize(30);
+			errorMessageLabel.setText("The group name is not valid!");
+			groupNameField.clear();
 		} else if (groupNameAlreadyPresent(name)) {
-			final var alert = new Alert(AlertType.WARNING, "You already have a group with that name.", ButtonType.OK, ButtonType.CANCEL);
-			alert.setTitle("Create Group?");
-			alert.setHeaderText("Proceed?");
-			alert.showAndWait().filter(btn -> btn == ButtonType.OK).ifPresent(btn -> createGroup(name));
-		} else createGroup(name);
+			setErrorMessageLabelSize(30);
+			errorMessageLabel.setText("Name does already exist! Proceed anyways?");
+			setProcessPaneSize(30);
+			createButton.setDisable(true);
+			cancelButton.setDisable(true);
+		} else {
+			createGroup(name);
+			eventBus.dispatch(new BackEvent());
+			// Restoring the original design as tabs will always be reused
+			setErrorMessageLabelSize(0);
+			groupNameField.clear();
+		}
 	}

 	/**
@ -145,7 +146,6 @@ public final class GroupCreationScene {
 	 * @since Envoy Client v0.1-beta
 	 */
 	private void createGroup(String name) {
-		groupName = name;
 		eventBus.dispatch(new SendEvent(
 				new GroupCreation(name, userList.getSelectionModel().getSelectedItems().stream().map(User::getID).collect(Collectors.toSet()))));
 	}
@ -168,5 +168,47 @@ public final class GroupCreationScene {
 	}

 	@FXML
-	private void backButtonClicked() { sceneContext.pop(); }
+	private void backButtonClicked() {
+		eventBus.dispatch(new BackEvent());
+		setErrorMessageLabelSize(0);
+		setProcessPaneSize(0);
+	}
+	
+	@FXML
+	private void proceedOnNameDuplication() {
+		createButton.setDisable(false);
+		cancelButton.setDisable(false);
+		createGroup(name);
+		eventBus.dispatch(new BackEvent());
+		setErrorMessageLabelSize(0);
+		setProcessPaneSize(0);
+		groupNameField.clear();
+	}
+	
+	@FXML
+	private void cancelOnNameDuplication() {
+		createButton.setDisable(false);
+		cancelButton.setDisable(false);
+		setErrorMessageLabelSize(0);
+		setProcessPaneSize(0);
+		groupNameField.clear();
+	}
+	
+	private void setErrorMessageLabelSize(int value) {
+		errorMessageLabel.setPrefHeight(value);
+		errorMessageLabel.setMinHeight(value);
+		errorMessageLabel.setMaxHeight(value);
+	}
+	
+	private void setProcessPaneSize(int value) {
+		proceedDupButton.setPrefHeight(value);
+		proceedDupButton.setMinHeight(value);
+		proceedDupButton.setMaxHeight(value);
+		cancelDupButton.setPrefHeight(value);
+		cancelDupButton.setMinHeight(value);
+		cancelDupButton.setMaxHeight(value);
+		errorProceedBox.setPrefHeight(value);
+		errorProceedBox.setMinHeight(value);
+		errorProceedBox.setMaxHeight(value);
+	}
 }
--- a/client/src/main/java/envoy/client/ui/listcell/AbstractListCell.java
+++ b/client/src/main/java/envoy/client/ui/listcell/AbstractListCell.java
@ -29,7 +29,7 @@ public abstract class AbstractListCell<T, U extends Node> extends ListCell<T> {
 	public AbstractListCell(ListView<? extends T> listView) {
 		this.listView = listView;
 		setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
-		getStyleClass().add("listElement");
+		getStyleClass().add("list-element");
 	}

 	@Override
--- a/client/src/main/java/envoy/client/ui/listcell/ChatControl.java
+++ b/client/src/main/java/envoy/client/ui/listcell/ChatControl.java
@ -61,10 +61,10 @@ public final class ChatControl extends HBox {
 			final var vBox2 = new VBox();
 			vBox2.setAlignment(Pos.CENTER_RIGHT);
 			unreadMessagesLabel.setAlignment(Pos.CENTER);
-			unreadMessagesLabel.getStyleClass().add("unreadMessagesAmount");
+			unreadMessagesLabel.getStyleClass().add("unread-messages-amount");
 			vBox2.getChildren().add(unreadMessagesLabel);
 			getChildren().add(vBox2);
 		}
-		getStyleClass().add("listElement");
+		getStyleClass().add("list-element");
 	}
 }
--- a/client/src/main/java/envoy/client/ui/listcell/ContactControl.java
+++ b/client/src/main/java/envoy/client/ui/listcell/ContactControl.java
@ -36,7 +36,9 @@ public final class ContactControl extends VBox {
 			final var	statusLabel	= new Label(status);
 			statusLabel.getStyleClass().add(status.toLowerCase());
 			getChildren().add(statusLabel);
-		} else getChildren().add(new Label(contact.getContacts().size() + " members"));
-		getStyleClass().add("listElement");
+		} else {
+			getChildren().add(new Label(contact.getContacts().size() + " members"));
+		}
+		getStyleClass().add("list-element");
 	}
 }
--- a/client/src/main/java/envoy/client/ui/listcell/MessageControl.java
+++ b/client/src/main/java/envoy/client/ui/listcell/MessageControl.java
@ -66,7 +66,7 @@ public final class MessageControl extends Label {
 		if (message.getSenderID() != localDB.getUser().getID() && message instanceof GroupMessage) {
 			// Displaying the name of the sender in a group
 			final var label = new Label();
-			label.getStyleClass().add("groupMemberNames");
+			label.getStyleClass().add("group-member-names");
 			label.setText(localDB.getUsers()
 				.values()
 				.stream()
--- a/client/src/main/java/envoy/constant/Tabs.java
+++ b/client/src/main/java/envoy/constant/Tabs.java
@ -0,0 +1,17 @@
+package envoy.constant;
+
+/**
+ * Project: <strong>client</strong><br>
+ * File: <strong>Tabs.java</strong><br>
+ * Created: <strong>Aug 30, 2020</strong><br>
+ *
+ * @author Maximilian K&auml;fer
+ * @since Envoy Client v0.2-beta
+ */
+public class Tabs {
+	private Tabs() {}
+	
+	public static int CONTACT_LIST = 0;
+	public static int CONTACT_SEARCH = 1;
+	public static int GROUP_CREATION = 2;
+}
--- a/client/src/main/resources/css/base.css
+++ b/client/src/main/resources/css/base.css
@ -8,11 +8,11 @@
 	-fx-background-color: transparent;
 }

-#textEnterContainer, #contact-search-enter-container {
+#text-enter-container, #contact-search-enter-container {
 	-fx-background-radius: 5.0em;
 }

-#roundButton {
+#round-button {
 	-fx-background-radius: 5.0em;
 }

@ -80,29 +80,29 @@
 	-fx-text-alignment: left;
 }

-.unreadMessagesAmount {
+.unread-messages-amount {
 	-fx-alignment: center;
 	-fx-background-color: orange;
 	-fx-background-radius: 4.0em;
 	-fx-text-alignment: center;
 }

-#loginButton {
+#login-button {
 	-fx-background-radius: 1.0em;
 }

-#registerSwitch {
+#register-switch {
 	-fx-background-color: transparent;
 	-fx-text-fill: orange;
 }

-#loginInputField {
+#login-input-field {
 	-fx-background-color: transparent;
 	-fx-border: solid;
 	-fx-border-width: 0.0 0.0 1.0 0.0;
 }

-#remainingCharsLabel {
+#remaining-chars-label {
 	-fx-text-fill: #00FF00;
 	-fx-background-color: transparent;
 }
@ -123,14 +123,22 @@
 	-fx-text-fill: red;
 }

-#transparentBackground {
+#transparent-background {
 	-fx-background-color: transparent;
 }

-#profilePic {
+#profile-pic {
 	-fx-radius: 1.0em;
 }

-.listElement {
+.list-element {
 	-fx-background-color: transparent;
 }
+
+.tab-pane {
+    -fx-tab-max-height: 0 ;
+} 
+.tab-pane .tab-header-area {
+    visibility: hidden ;
+    -fx-padding: -20 0 0 0;
+}
--- a/client/src/main/resources/css/dark.css
+++ b/client/src/main/resources/css/dark.css
@ -7,7 +7,7 @@
 }

 .button {
-	-fx-background-color: rgb(105.0,0.0,153.0);
+	-fx-background-color: #690099;
 }

 .button:pressed {
@ -18,12 +18,12 @@
 	-fx-background-color: lightgray;
 }

-#messageList, .text-field, .password-field, .tooltip, .pane, .pane .content, .vbox, .titled-pane > .title, .titled-pane > *.content, .context-menu, .menu-item {
+#message-list, .text-field, .password-field, .tooltip, .pane, .pane .content, .vbox, .titled-pane > .title, .titled-pane > *.content, .context-menu, .menu-item {
 	-fx-background-color: #222222;
 }

 .list-cell:selected, .list-cell:selected > *, .menu-item:hover {
-    -fx-background-color: rgb(105.0,0.0,153.0);
+    -fx-background-color: #690099;
 }

 .received-message {
@ -38,19 +38,19 @@
 	-fx-background-color: black;
 }

-#loginInputField {
+#login-input-field {
 	-fx-border-color: white;
 }

-#loginBackground {
-	-fx-background-color: rgb(25, 25, 25);
+#login-background {
+	-fx-background-color: #191919;
 }

-#chatList, #topBar, #search-panel {
+#chat-list, #top-bar, #search-panel, #note-background {
 	-fx-background-color: #303030;
 }

-#textEnterContainer {
+#text-enter-container {
 	-fx-background-color: #363636;
 }

@ -64,8 +64,8 @@
 	-fx-border-color: #202020;
 }

-.groupMemberNames {
-	-fx-text-fill: rgb(105.0,0.0,153.0);
+.group-member-names {
+	-fx-text-fill: #690099;
 	-fx-font-weight: bold;
 }

@ -82,3 +82,8 @@
 	-fx-background-insets : 4.0, 0.0, 0.0;
 	-fx-background-radius : 2.0em;
 }
+
+#proceed-button {
+	-fx-text-fill: white;
+	-fx-background-color: transparent;
+}
--- a/client/src/main/resources/css/light.css
+++ b/client/src/main/resources/css/light.css
@ -1,20 +1,85 @@
-.button{
-	-fx-background-color: orangered;
+.root {
+	-fx-background-color: #E6E6E6;
 }

-.list-cell:selected, .list-cell:selected > * {
-	-fx-background-color: orangered;
-	-fx-text-fill: black;
+.button {
+	-fx-background-color: #B37D7D;
 }

-.received-message, .menu-item {
+.button:pressed {
+	-fx-background-color: #808080;
+}
+
+.button:disabled {
+	-fx-background-color: lightgray;
+}
+
+#message-list, .text-field, .password-field, .tooltip, .pane, .pane .content, .vbox, .titled-pane > .title, .titled-pane > *.content, .context-menu, .menu-item {
+	-fx-background-color: #E3E3E3;
+}
+
+.list-cell:selected, .list-cell:selected > *, .menu-item:hover {
+    -fx-background-color: #805959;
+}
+
+.received-message {
 	-fx-background-color: lightgray;
 }

 .own-message {
-	-fx-background-color: lightgreen;
+	-fx-background-color: #8FA88F;
 }

-#loginInputField {
+.alert.information.dialog-pane, .alert.warning.dialog-pane, .alert.error.dialog-pane {
+	-fx-background-color: black;
+}
+
+#login-input-field {
 	-fx-border-color: black;
 }
+
+#login-background {
+	-fx-background-color: white;
+}
+
+#chat-list, #top-bar, #search-panel, #note-background {
+	-fx-background-color: white;
+}
+
+#text-enter-container {
+	-fx-background-color: #F2F2F2;
+}
+
+#contact-search-enter-container {
+	-fx-background-color: #CCCCCC;
+}
+
+#underline {
+	-fx-border: solid;
+	-fx-border-width: 0.0 0.0 1.0 0.0;
+	-fx-border-color: #CCCCCC;
+}
+
+.group-member-names {
+	-fx-text-fill: #805959;
+	-fx-font-weight: bold;
+}
+
+.scroll-bar:vertical, .scroll-bar:vertical .track, .scroll-bar:vertical .increment-button , .scroll-bar:vertical .decrement-button {
+	-fx-background-color: transparent;
+}
+
+.scroll-bar:vertical .increment-arrow, .scroll-bar:vertical .decrement-arrow {
+	-fx-background-color: transparent;
+}
+
+.scroll-bar:vertical .thumb {
+	-fx-background-color: #707070;
+	-fx-background-insets : 4.0, 0.0, 0.0;
+	-fx-background-radius : 2.0em;
+}
+
+#proceed-button {
+	-fx-text-fill: white;
+	-fx-background-color: transparent;
+}
--- a/client/src/main/resources/fxml/ChatScene.fxml
+++ b/client/src/main/resources/fxml/ChatScene.fxml
@ -7,9 +7,12 @@
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.ListView?>
 <?import javafx.scene.control.MenuItem?>
+<?import javafx.scene.control.Tab?>
+<?import javafx.scene.control.TabPane?>
 <?import javafx.scene.control.TextArea?>
 <?import javafx.scene.control.Tooltip?>
 <?import javafx.scene.image.ImageView?>
+<?import javafx.scene.layout.AnchorPane?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.HBox?>
@ -30,10 +33,90 @@
 		<RowConstraints maxHeight="120.0" minHeight="-Infinity" prefHeight="83.333251953125" vgrow="NEVER" />
 	</rowConstraints>
 	<children>
-      <VBox prefWidth="316.0" GridPane.rowIndex="1" GridPane.rowSpan="2147483647">
+      <TabPane fx:id="tabPane" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" GridPane.rowIndex="1" GridPane.rowSpan="2147483647">
+        <tabs>
+          <Tab text="">
+            <content>
+              <AnchorPane minHeight="0.0" minWidth="0.0">
+                     <children>
+                        <VBox fx:id="contactOperations" prefHeight="3000.0" prefWidth="316.0">
+                           <children>
+                              <VBox id="search-panel" maxHeight="-Infinity" minHeight="-Infinity" prefHeight="80.0" prefWidth="316.0">
+                                 <children>
+                                    <Label id="contact-search-enter-container" maxHeight="30.0" minHeight="30.0" prefHeight="30.0" prefWidth="325.0">
+                                       <graphic>
+                                          <TextArea id="contact-search-input" 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>
+                                             <padding>
+                                                <Insets left="12.0" right="12.0" />
+                                             </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" prefWidth="100.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" onAction="#groupCreationButtonClicked" prefWidth="100.0" text="New Group">
+                                             <HBox.margin>
+                                                <Insets />
+                                             </HBox.margin>
+                                             <padding>
+                                                <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+                                             </padding>
+                                          </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="chat-list" fx:id="chatList" focusTraversable="false" onMouseClicked="#chatListClicked" prefWidth="316.0" VBox.vgrow="ALWAYS">
+                        			<contextMenu>
+                        				<ContextMenu anchorLocation="CONTENT_TOP_LEFT">
+                        					<items>
+                        						<MenuItem fx:id="deleteContactMenuItem" mnemonicParsing="false" onAction="#deleteContact" text="Delete" />
+                        					</items>
+                        				</ContextMenu>
+                        			</contextMenu>
+                                 <padding>
+                                    <Insets bottom="5.0" left="5.0" right="2.0" top="5.0" />
+                                 </padding>
+                        		</ListView>
+                           </children>
+                        </VBox>
+                     </children>
+                  </AnchorPane>
+            </content>
+          </Tab>
+          <Tab fx:id="contactSearchTab" text="">
+            <content>
+            </content>
+          </Tab>
+            <Tab fx:id="groupCreationTab" text="" />
+        </tabs>
         <GridPane.margin>
            <Insets right="1.0" />
         </GridPane.margin>
+<<<<<<< HEAD
+      </TabPane>
+		<HBox id="top-bar" alignment="CENTER_LEFT" prefHeight="100.0">
+=======
         <children>
            <VBox id="search-panel" maxHeight="-Infinity" minHeight="-Infinity" prefHeight="80.0" prefWidth="316.0">
               <children>
@ -94,13 +177,14 @@
         </children>
      </VBox>
 		<HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0">
+>>>>>>> refs/heads/develop
 			<children>
-				<ImageView id="profilePic" fx:id="clientProfilePic" fitHeight="43.0" fitWidth="43.0" pickOnBounds="true" preserveRatio="true">
+				<ImageView id="profile-pic" 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">
+				<Label id="transparent-background" fx:id="contactLabel" prefHeight="27.0" prefWidth="134.0">
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</padding>
@ -111,8 +195,8 @@
 						<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">
+				<Region id="transparent-background" prefHeight="77.0" prefWidth="115.0" />
+				<VBox id="transparent-background" alignment="CENTER_RIGHT" prefHeight="200.0" prefWidth="100.0" spacing="5.0">
 					<children>
 						<Button fx:id="settingsButton" mnemonicParsing="true" onAction="#settingsButtonClicked" prefHeight="30.0" prefWidth="30.0" text="">
 							<padding>
@ -135,7 +219,7 @@
 				<Insets bottom="1.0" right="1.0" />
 			</GridPane.margin>
 		</HBox>
-		<ListView id="messageList" fx:id="messageList" focusTraversable="false" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowIndex="1" GridPane.rowSpan="2">
+		<ListView id="message-list" fx:id="messageList" focusTraversable="false" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowIndex="1" GridPane.rowSpan="2">
 			<GridPane.margin>
 				<Insets />
 			</GridPane.margin>
@ -145,9 +229,9 @@
 		</ListView>
 		<HBox alignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="3">
 			<children>
-				<Label id="textEnterContainer" alignment="CENTER" minWidth="300.0" prefHeight="100.0" prefWidth="800.0">
+				<Label id="text-enter-container" 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">
+						<TextArea id="message-enter" fx:id="messageTextArea" disable="true" onInputMethodTextChanged="#messageTextUpdated" onKeyPressed="#checkPostConditions" onKeyTyped="#checkKeyCombination" prefHeight="100.0" prefWidth="1250.0" promptText="Enter Message" wrapText="true">
 							<opaqueInsets>
 								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 							</opaqueInsets>
@ -159,7 +243,7 @@
 				</Label>
 				<HBox prefHeight="38.0" prefWidth="100.0" spacing="5.0">
 					<children>
-						<Button id="roundButton" fx:id="postButton" defaultButton="true" disable="true" minWidth="40.0" mnemonicParsing="true" onAction="#postMessage" prefHeight="40.0" prefWidth="40.0" text="Post">
+						<Button id="round-button" fx:id="postButton" defaultButton="true" disable="true" minWidth="40.0" 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>
@ -177,17 +261,12 @@
                        <Insets left="10.0" />
                     </HBox.margin>
 						</Button>
-						<Button id="roundButton" fx:id="voiceButton" disable="true" minWidth="40.0" onAction="#voiceButtonClicked" prefHeight="40.0" prefWidth="40.0">
+						<Button id="round-button" fx:id="voiceButton" disable="true" minWidth="40.0" 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 id="roundButton" fx:id="attachmentButton" disable="true" minWidth="40.0" 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 id="roundButton" fx:id="rotateButton" minWidth="40.0" mnemonicParsing="false" onAction="#doABarrelRoll" prefHeight="40.0" prefWidth="40.0">
+						<Button id="round-button" fx:id="attachmentButton" disable="true" minWidth="40.0" 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>
@ -204,7 +283,7 @@
 		</HBox>
 		<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">
+				<Label id="remaining-chars-label" 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>
@ -230,9 +309,9 @@
 				<Insets bottom="5.0" right="10.0" top="5.0" />
 			</GridPane.margin>
 		</ImageView>
-		<HBox id="topBar" alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="1">
+		<HBox id="top-bar" 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">
+				<ImageView id="profile-pic" fx:id="recipientProfilePic" fitHeight="43.0" fitWidth="43.0" pickOnBounds="true" preserveRatio="true">
 					<HBox.margin>
 						<Insets left="20.0" top="5.0" />
 					</HBox.margin>
@ -251,7 +330,7 @@
 					</HBox.margin>
 				</VBox>
 				<Region prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />
-				<Button id="roundButton" fx:id="messageSearchButton" contentDisplay="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="40.0" prefWidth="40.0" visible="false">
+				<Button id="round-button" fx:id="messageSearchButton" contentDisplay="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="40.0" prefWidth="40.0" visible="false">
 					<HBox.margin>
 						<Insets right="20.0" />
 					</HBox.margin>
--- a/client/src/main/resources/fxml/ContactSearchScene.fxml
+++ b/client/src/main/resources/fxml/ContactSearchScene.fxml
@ -1,73 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-<?import envoy.client.ui.ClearableTextField?>
-<?import javafx.geometry.Insets?>
-<?import javafx.scene.control.Button?>
-<?import javafx.scene.control.ListView?>
-<?import javafx.scene.control.Tooltip?>
-<?import javafx.scene.layout.HBox?>
-<?import javafx.scene.layout.VBox?>
-
-<VBox maxHeight="-Infinity" maxWidth="-Infinity"
-	minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0"
-	prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1"
-	xmlns:fx="http://javafx.com/fxml/1"
-	fx:controller="envoy.client.ui.controller.ContactSearchScene">
-	<children>
-		<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0">
-			<children>
-				<ClearableTextField fx:id="searchBar"
-					prefWidth="310.0">
-					<textField onInputMethodTextChanged="#sendRequest"
-						onKeyTyped="#sendRequest" prefColumnCount="22"
-						promptText="Enter username to search for">
-					</textField>
-					<HBox.margin>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="15.0" />
-					</HBox.margin>
-					<padding>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</padding>
-					<tooltip>
-						<Tooltip
-							text="Enter a name. If an account by that name exists, it will be displayed below."
-							wrapText="true" />
-					</tooltip>
-				</ClearableTextField>
-				<Button fx:id="newGroupButton" mnemonicParsing="false"
-					onAction="#newGroupButtonClicked" prefHeight="26.0"
-					prefWidth="139.0" text="New Group">
-					<HBox.margin>
-						<Insets bottom="5.0" left="30.0" right="5.0" top="5.0" />
-					</HBox.margin>
-					<padding>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</padding>
-				</Button>
-			</children>
-		</HBox>
-		<ListView fx:id="userList" onMouseClicked="#userListClicked"
-			prefHeight="314.0" prefWidth="600.0">
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</padding>
-			<VBox.margin>
-				<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
-			</VBox.margin>
-		</ListView>
-		<Button cancelButton="true" mnemonicParsing="true"
-			onAction="#backButtonClicked" text="_Back">
-			<VBox.margin>
-				<Insets bottom="10.0" left="10.0" />
-			</VBox.margin>
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</padding>
-			<tooltip>
-				<Tooltip autoHide="true"
-					text="Takes you back to the screen where you can chat with others"
-					wrapText="true" />
-			</tooltip>
-		</Button>
-	</children>
-</VBox>
--- a/client/src/main/resources/fxml/ContactSearchTab.fxml
+++ b/client/src/main/resources/fxml/ContactSearchTab.fxml
@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.ContextMenu?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.ListView?>
+<?import javafx.scene.control.TextArea?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Font?>
+
+<AnchorPane xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.ContactSearchTab">
+	<VBox id="search-panel" alignment="TOP_CENTER" prefHeight="3000.0" prefWidth="316.0">
+      <children>
+         <Label alignment="CENTER" text="Find User" textAlignment="CENTER" textFill="WHITE">
+            <font>
+               <Font size="18.0" />
+            </font>
+            <VBox.margin>
+               <Insets top="8.0" />
+            </VBox.margin>
+         </Label>
+         <HBox id="underline" prefWidth="200.0" spacing="5.0">
+            <children>
+               <Label id="contact-search-enter-container" maxHeight="30.0" minHeight="30.0" prefHeight="30.0" prefWidth="325.0">
+                  <graphic>
+                     <TextArea id="contact-search-input" fx:id="searchBar" focusTraversable="false" maxHeight="30.0" minHeight="30.0" onInputMethodTextChanged="#sendRequest" onKeyTyped="#sendRequest" prefHeight="30.0" prefWidth="200.0" promptText="Search Envoy Users">
+                        <font>
+                           <Font size="14.0" />
+                        </font>
+                        <padding>
+                           <Insets left="12.0" right="12.0" />
+                        </padding>
+                     </TextArea>
+                  </graphic>
+               </Label>
+               <Button maxHeight="30.0" maxWidth="30.0" minHeight="30.0" minWidth="30.0" mnemonicParsing="false" onAction="#backButtonClicked" prefHeight="30.0" prefWidth="30.0" text="X" />
+            </children>
+            <VBox.margin>
+               <Insets left="10.0" right="10.0" />
+            </VBox.margin>
+            <padding>
+               <Insets bottom="17.0" top="5.0" />
+            </padding>
+         </HBox>
+         <ListView id="chat-list" fx:id="userList" focusTraversable="false" onMouseClicked="#userListClicked" prefWidth="316.0" VBox.vgrow="ALWAYS">
+            <contextMenu>
+               <ContextMenu anchorLocation="CONTENT_TOP_LEFT" />
+            </contextMenu>
+            <padding>
+               <Insets bottom="5.0" left="5.0" right="2.0" top="5.0" />
+            </padding>
+         </ListView>
+      </children>
+	</VBox>
+</AnchorPane>
--- a/client/src/main/resources/fxml/GroupCreationScene.fxml
+++ b/client/src/main/resources/fxml/GroupCreationScene.fxml
@ -1,90 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-<?import envoy.client.ui.ClearableTextField?>
-<?import javafx.geometry.Insets?>
-<?import javafx.scene.control.Button?>
-<?import javafx.scene.control.Label?>
-<?import javafx.scene.control.ListView?>
-<?import javafx.scene.control.Tooltip?>
-<?import javafx.scene.layout.BorderPane?>
-<?import javafx.scene.layout.HBox?>
-<?import javafx.scene.layout.VBox?>
-<?import javafx.scene.text.Font?>
-
-<VBox maxHeight="-Infinity" maxWidth="-Infinity"
-	minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0"
-	prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1"
-	xmlns:fx="http://javafx.com/fxml/1"
-	fx:controller="envoy.client.ui.controller.GroupCreationScene">
-	<children>
-		<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0">
-			<children>
-				<ClearableTextField fx:id="groupNameField">
-					<textField onInputMethodTextChanged="#textUpdated"
-						onKeyTyped="#textUpdated" prefColumnCount="22"
-						promptText="Enter Group Name" />
-					<HBox.margin>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</HBox.margin>
-					<padding>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</padding>
-					<tooltip>
-						<Tooltip
-							text="Enter something. A group with this name will be created."
-							wrapText="true" />
-					</tooltip>
-				</ClearableTextField>
-			</children>
-		</HBox>
-		<Label text="Choose Members:">
-			<font>
-				<Font size="16.0" />
-			</font>
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</padding>
-		</Label>
-		<ListView fx:id="userList" onMouseClicked="#userListClicked"
-			prefHeight="314.0" prefWidth="600.0">
-			<VBox.margin>
-				<Insets bottom="5.0" left="10.0" right="10.0" top="5.0" />
-			</VBox.margin>
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</padding>
-		</ListView>
-		<BorderPane prefHeight="50.0">
-			<left>
-				<Button cancelButton="true" mnemonicParsing="true"
-					onAction="#backButtonClicked" text="_Back"
-					BorderPane.alignment="CENTER">
-					<padding>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</padding>
-					<tooltip>
-						<Tooltip autoHide="true"
-							text="Takes you back to the screen where you can chat with others"
-							wrapText="true" />
-					</tooltip>
-					<BorderPane.margin>
-						<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
-					</BorderPane.margin>
-				</Button>
-			</left>
-			<right>
-				<Button fx:id="createButton" alignment="CENTER_RIGHT"
-					defaultButton="true" disable="true" mnemonicParsing="false"
-					onAction="#createButtonClicked" text="Create"
-					BorderPane.alignment="CENTER">
-					<padding>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</padding>
-					<BorderPane.margin>
-						<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
-					</BorderPane.margin>
-				</Button>
-			</right>
-		</BorderPane>
-	</children>
-</VBox>
--- a/client/src/main/resources/fxml/GroupCreationTab.fxml
+++ b/client/src/main/resources/fxml/GroupCreationTab.fxml
@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.ContextMenu?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.ListView?>
+<?import javafx.scene.control.TextArea?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Font?>
+
+<AnchorPane xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.GroupCreationTab">
+	<VBox id="search-panel" alignment="TOP_CENTER" prefHeight="3000.0" prefWidth="316.0">
+      <children>
+         <Label alignment="CENTER" text="Create New Group" textAlignment="CENTER" textFill="WHITE">
+            <font>
+               <Font size="18.0" />
+            </font>
+            <VBox.margin>
+               <Insets top="8.0" />
+            </VBox.margin>
+         </Label>
+         <Label id="contact-search-enter-container" maxHeight="30.0" minHeight="30.0" prefHeight="30.0" prefWidth="325.0">
+            <graphic>
+               <TextArea id="contact-search-input" fx:id="groupNameField" focusTraversable="false" maxHeight="30.0" minHeight="30.0" onInputMethodTextChanged="#textUpdated" onKeyTyped="#textUpdated" prefHeight="30.0" prefWidth="200.0" promptText="Enter Group Name">
+                  <font>
+                     <Font size="14.0" />
+                  </font>
+                  <padding>
+                     <Insets left="12.0" right="12.0" />
+                  </padding>
+               </TextArea>
+            </graphic>
+            <VBox.margin>
+               <Insets left="10.0" right="10.0" top="5.0" />
+            </VBox.margin>
+         </Label>
+         <Label id="infoLabel-error" fx:id="errorMessageLabel" maxHeight="0.0" minHeight="0.0" prefHeight="0.0" textAlignment="CENTER" textFill="RED" VBox.vgrow="ALWAYS" />
+         <HBox fx:id="errorProceedBox" alignment="TOP_CENTER" maxHeight="0.0" minHeight="0.0" prefHeight="0.0" prefWidth="316.0" spacing="5.0">
+            <children>
+               <Button id="proceed-button" fx:id="proceedDupButton" maxHeight="0.0" minHeight="0.0" mnemonicParsing="false" onAction="#proceedOnNameDuplication" prefHeight="0.0" text="Proceed" />
+               <Button id="proceed-button" fx:id="cancelDupButton" maxHeight="0.0" minHeight="0.0" mnemonicParsing="false" onAction="#cancelOnNameDuplication" prefHeight="0.0" text="Cancel" />
+            </children>
+         </HBox>
+         <HBox id="underline" alignment="TOP_CENTER" prefWidth="200.0" spacing="5.0">
+            <children>
+               <Button fx:id="createButton" maxHeight="30.0" maxWidth="-Infinity" minHeight="30.0" mnemonicParsing="false" onAction="#createButtonClicked" prefHeight="30.0" text="Create" />
+               <Button fx:id="cancelButton" maxHeight="30.0" maxWidth="-Infinity" minHeight="30.0" mnemonicParsing="false" onAction="#backButtonClicked" prefHeight="30.0" text="Cancel" />
+            </children>
+            <VBox.margin>
+               <Insets left="10.0" right="10.0" />
+            </VBox.margin>
+            <padding>
+               <Insets bottom="10.0" top="5.0" />
+            </padding>
+         </HBox>
+          <Label text="Select Group Members" textAlignment="CENTER" textFill="WHITE">
+            <font>
+               <Font size="15.0" />
+            </font>
+            <VBox.margin>
+               <Insets bottom="5.0" top="5" />
+            </VBox.margin>
+         </Label>
+         <ListView id="chat-list" fx:id="userList" focusTraversable="false" onMouseClicked="#userListClicked" prefWidth="316.0" VBox.vgrow="ALWAYS">
+            <contextMenu>
+               <ContextMenu anchorLocation="CONTENT_TOP_LEFT" />
+            </contextMenu>
+            <padding>
+               <Insets bottom="5.0" left="5.0" right="2.0" top="5.0" />
+            </padding>
+         </ListView>
+      </children>
+	</VBox>
+</AnchorPane>
--- a/client/src/main/resources/fxml/LoginScene.fxml
+++ b/client/src/main/resources/fxml/LoginScene.fxml
@ -14,7 +14,7 @@
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>

-<VBox id="loginBackground" alignment="TOP_CENTER" prefHeight="500.0" prefWidth="350.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.LoginScene">
+<VBox id="login-background" alignment="TOP_CENTER" prefHeight="500.0" prefWidth="350.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.LoginScene">
 	<children>
      <ImageView fx:id="logo" fitHeight="80.0" fitWidth="80.0" pickOnBounds="true" preserveRatio="true">
         <VBox.margin>
@ -55,12 +55,12 @@
 				<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
 			</rowConstraints>
 			<children>
-				<TextField id="loginInputField" fx:id="userTextField" promptText="Username">
+				<TextField id="login-input-field" fx:id="userTextField" promptText="Username">
 					<GridPane.margin>
 						<Insets bottom="0.0" left="5.0" right="5.0" top="0.0" />
 					</GridPane.margin>
 				</TextField>
-				<PasswordField id="loginInputField" fx:id="passwordField" promptText=" Password" GridPane.rowIndex="1">
+				<PasswordField id="login-input-field" fx:id="passwordField" promptText=" Password" GridPane.rowIndex="1">
 					<GridPane.margin>
 						<Insets bottom="0.0" left="5.0" right="5.0" top="0.0" />
 					</GridPane.margin>
@ -68,7 +68,7 @@
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</padding>
 				</PasswordField>
-				<PasswordField id="loginInputField" fx:id="repeatPasswordField" promptText=" Repeat Password" visible="false" GridPane.rowIndex="2">
+				<PasswordField id="login-input-field" fx:id="repeatPasswordField" promptText=" Repeat Password" visible="false" GridPane.rowIndex="2">
 					<GridPane.margin>
 						<Insets bottom="0.0" left="5.0" right="5.0" top="0.0" />
 					</GridPane.margin>
@ -81,7 +81,7 @@
 				<Insets bottom="10.0" left="25.0" right="25.0" top="10.0" />
 			</VBox.margin>
 		</GridPane>
-				<Button id="loginButton" fx:id="loginButton" defaultButton="true" focusTraversable="false" mnemonicParsing="false" onAction="#loginButtonPressed" text="Login" textAlignment="CENTER">
+				<Button id="login-button" fx:id="loginButton" defaultButton="true" focusTraversable="false" mnemonicParsing="false" onAction="#loginButtonPressed" text="Login" textAlignment="CENTER">
         <font>
            <Font size="16.0" />
         </font>
@ -95,7 +95,7 @@
      <HBox alignment="CENTER" prefHeight="30.0" prefWidth="200.0">
         <children>
            <Label fx:id="registerTextLabel" text="No account yet?" />
-            <Button id="registerSwitch" fx:id="registerSwitch" accessibleRole="CHECK_BOX" focusTraversable="false" mnemonicParsing="false" onAction="#registerSwitchPressed" text="Register" />
+            <Button id="register-switch" fx:id="registerSwitch" accessibleRole="CHECK_BOX" focusTraversable="false" mnemonicParsing="false" onAction="#registerSwitchPressed" text="Register" />
         </children>
         <VBox.margin>
            <Insets bottom="20.0" />
--- a/client/src/main/resources/fxml/SettingsScene.fxml
+++ b/client/src/main/resources/fxml/SettingsScene.fxml
@ -7,18 +7,11 @@
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>

-<VBox alignment="TOP_RIGHT" maxHeight="-Infinity"
-	maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
-	prefHeight="400.0" prefWidth="600.0"
-	xmlns="http://javafx.com/javafx/11.0.1"
-	xmlns:fx="http://javafx.com/fxml/1"
-	fx:controller="envoy.client.ui.controller.SettingsScene">
+<VBox alignment="TOP_RIGHT" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.SettingsScene">
 	<children>
 		<HBox prefHeight="389.0" prefWidth="600.0">
 			<children>
-				<ListView fx:id="settingsList"
-					onMouseClicked="#settingsListClicked" prefHeight="200.0"
-					prefWidth="200.0">
+				<ListView id="message-list" fx:id="settingsList" onMouseClicked="#settingsListClicked" prefHeight="200.0" prefWidth="200.0">
 					<opaqueInsets>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</opaqueInsets>
@ -29,8 +22,7 @@
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</padding>
 				</ListView>
-				<TitledPane fx:id="titledPane" collapsible="false"
-					prefHeight="400.0" prefWidth="400.0">
+				<TitledPane fx:id="titledPane" collapsible="false" prefHeight="400.0" prefWidth="400.0">
 					<HBox.margin>
 						<Insets bottom="10.0" left="5.0" right="10.0" top="10.0" />
 					</HBox.margin>
@ -40,8 +32,7 @@
 				</TitledPane>
 			</children>
 		</HBox>
-		<Button defaultButton="true" mnemonicParsing="true"
-			onMouseClicked="#backButtonClicked" text="_Back">
+		<Button defaultButton="true" mnemonicParsing="true" onMouseClicked="#backButtonClicked" text="_Back">
 			<opaqueInsets>
 				<Insets />
 			</opaqueInsets>
--- a/client/src/main/resources/icons/light/forward.png
+++ b/client/src/main/resources/icons/light/forward.png
--- a/client/src/main/resources/icons/light/group_icon.png
+++ b/client/src/main/resources/icons/light/group_icon.png
--- a/client/src/main/resources/icons/light/user_icon.png
+++ b/client/src/main/resources/icons/light/user_icon.png