Merge pull request #33 from informatik-ag-ngl/f/new_ui

New ChatScene UI
2020-08-02 15:30:06 +02:00 · 2020-08-02 15:30:06 +02:00 · dee317c27d
parent 3cbe3b5045 a1d09d6550
commit dee317c27d
23 changed files with 804 additions and 346 deletions
--- a/client/src/main/java/envoy/client/ui/SceneContext.java
+++ b/client/src/main/java/envoy/client/ui/SceneContext.java
@ -4,6 +4,7 @@ import java.io.IOException;
 import java.util.Stack;
 import java.util.logging.Level;

+import javafx.application.Platform;
 import javafx.fxml.FXMLLoader;
 import javafx.scene.Parent;
 import javafx.scene.Scene;
@ -125,8 +126,12 @@ public final class SceneContext {

 			sceneStack.push(scene);
 			stage.setScene(scene);
-			applyCSS();
+			// The LoginScene is the only scene not intended to be resized
+			// As strange as it seems, this is needed as otherwise the LoginScene won't be
+			// displayed on some OS (...Debian...)
 			stage.sizeToScene();
+			Platform.runLater(() -> stage.setResizable(sceneInfo != SceneInfo.LOGIN_SCENE));
+			applyCSS();
 			stage.show();
 		} catch (final IOException e) {
 			EnvoyLog.getLogger(SceneContext.class).log(Level.SEVERE, String.format("Could not load scene for %s: ", sceneInfo), e);
--- a/client/src/main/java/envoy/client/ui/controller/ChatScene.java
+++ b/client/src/main/java/envoy/client/ui/controller/ChatScene.java
@ -17,6 +17,8 @@ import java.util.logging.Logger;
 import javafx.animation.RotateTransition;
 import javafx.application.Platform;
 import javafx.collections.FXCollections;
+import javafx.collections.ObservableList;
+import javafx.collections.transformation.FilteredList;
 import javafx.fxml.FXML;
 import javafx.scene.Node;
 import javafx.scene.control.*;
@ -27,6 +29,7 @@ import javafx.scene.input.KeyCode;
 import javafx.scene.input.KeyEvent;
 import javafx.scene.layout.GridPane;
 import javafx.scene.paint.Color;
+import javafx.scene.shape.Rectangle;
 import javafx.stage.FileChooser;
 import javafx.util.Duration;

@ -39,9 +42,7 @@ import envoy.client.event.SendEvent;
 import envoy.client.net.Client;
 import envoy.client.net.WriteProxy;
 import envoy.client.ui.*;
-import envoy.client.ui.listcell.ChatControl;
-import envoy.client.ui.listcell.ListCellFactory;
-import envoy.client.ui.listcell.MessageControl;
+import envoy.client.ui.listcell.*;
 import envoy.data.*;
 import envoy.data.Attachment.AttachmentType;
 import envoy.event.*;
@ -101,6 +102,24 @@ public final class ChatScene implements Restorable {
 	@FXML
 	private ImageView attachmentView;

+	@FXML
+	private Label topBarContactLabel;
+
+	@FXML
+	private Label topBarStatusLabel;
+
+	@FXML
+	private Button messageSearchButton;
+
+	@FXML
+	private ImageView clientProfilePic;
+
+	@FXML
+	private ImageView recipientProfilePic;
+
+	@FXML
+	private TextArea contactSearch;
+
 	private LocalDB			localDB;
 	private Client			client;
 	private WriteProxy		writeProxy;
@ -122,6 +141,8 @@ public final class ChatScene implements Restorable {
 	private static final int	MAX_MESSAGE_LENGTH				= 255;
 	private static final int	DEFAULT_ICON_SIZE				= 16;

+	private FilteredList<Chat> chats;
+
 	/**
 	 * Initializes the appearance of certain visual components.
 	 *
@ -129,9 +150,8 @@ public final class ChatScene implements Restorable {
 	 */
 	@FXML
 	private void initialize() {
-
 		// Initialize message and user rendering
-		messageList.setCellFactory(new ListCellFactory<>(MessageControl::new));
+		messageList.setCellFactory(MessageListCell::new);
 		chatList.setCellFactory(new ListCellFactory<>(ChatControl::new));

 		settingsButton.setGraphic(new ImageView(IconUtil.loadIconThemeSensitive("settings", DEFAULT_ICON_SIZE)));
@ -139,6 +159,14 @@ public final class ChatScene implements Restorable {
 		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));
+		Rectangle clip = new Rectangle();
+		clip.setWidth(43);
+		clip.setHeight(43);
+		clip.setArcHeight(43);
+		clip.setArcWidth(43);
+		clientProfilePic.setClip(clip);

 		// Listen to received messages
 		eventBus.register(MessageCreationEvent.class, e -> {
@ -163,8 +191,9 @@ public final class ChatScene implements Restorable {

 				// Move chat with most recent unread messages to the top
 				Platform.runLater(() -> {
-					chatList.getItems().remove(chat);
-					chatList.getItems().add(0, chat);
+					chats.getSource().remove(chat);
+					((ObservableList<Chat>) chats.getSource()).add(0, chat);
+
 					if (chat.equals(currentChat)) chatList.getSelectionModel().select(0);
 				});
 			});
@ -187,7 +216,7 @@ public final class ChatScene implements Restorable {

 		// Listen to user status changes
 		eventBus.register(UserStatusChange.class,
-				e -> chatList.getItems()
+				e -> chats.getSource()
 					.stream()
 					.filter(c -> c.getRecipient().getID() == e.getID())
 					.findAny()
@ -201,10 +230,11 @@ public final class ChatScene implements Restorable {
 				case ADD:
 					if (contact instanceof User) localDB.getUsers().put(contact.getName(), (User) contact);
 					final Chat chat = contact instanceof User ? new Chat(contact) : new GroupChat(client.getSender(), contact);
-					Platform.runLater(() -> chatList.getItems().add(chat));
+					Platform.runLater(() -> ((ObservableList<Chat>) chats.getSource()).add(0, chat));
+
 					break;
 				case REMOVE:
-					Platform.runLater(() -> chatList.getItems().removeIf(c -> c.getRecipient().equals(contact)));
+					Platform.runLater(() -> chats.getSource().removeIf(c -> c.getRecipient().equals(contact)));
 					break;
 			}
 		});
@ -242,10 +272,12 @@ public final class ChatScene implements Restorable {
 		this.client			= client;
 		this.writeProxy		= writeProxy;

-		MessageControl.setUser(localDB.getUser());
-		MessageControl.setSceneContext(sceneContext);
-		chatList.setItems(FXCollections.observableList(localDB.getChats()));
+		chats = new FilteredList<>(FXCollections.observableList(localDB.getChats()));
+		chatList.setItems(chats);
 		contactLabel.setText(localDB.getUser().getName());
+		MessageControl.setLocalDB(localDB);
+    MessageControl.setSceneContext(sceneContext);
+
 		if (!client.isOnline()) updateInfoLabel("You are offline", "infoLabel-info");

 		recorder = new AudioRecorder();
@ -273,7 +305,7 @@ public final class ChatScene implements Restorable {
 			currentChat = localDB.getChat(user.getID()).get();

 			messageList.setItems(FXCollections.observableList(currentChat.getMessages()));
-			final var scrollIndex = messageList.getItems().size() - currentChat.getUnreadAmount() - 1;
+			final var scrollIndex = messageList.getItems().size() - currentChat.getUnreadAmount();
 			messageList.scrollTo(scrollIndex);
 			logger.log(Level.FINEST, "Loading chat with " + user + " at index " + scrollIndex);
 			deleteContactMenuItem.setText("Delete " + user.getName());
@ -301,6 +333,27 @@ public final class ChatScene implements Restorable {
 		voiceButton.setDisable(!recorder.isSupported());
 		attachmentButton.setDisable(false);
 		chatList.refresh();
+
+		if (currentChat != null) {
+			topBarContactLabel.setText(currentChat.getRecipient().getName());
+			if (currentChat.getRecipient() instanceof User) {
+				String status = ((User) currentChat.getRecipient()).getStatus().toString();
+				topBarStatusLabel.setText(status);
+				topBarStatusLabel.getStyleClass().add(status.toLowerCase());
+				recipientProfilePic.setImage(IconUtil.loadIconThemeSensitive("user_icon", 43));
+			} else {
+				topBarStatusLabel.setText(currentChat.getRecipient().getContacts().size() + " members");
+				recipientProfilePic.setImage(IconUtil.loadIconThemeSensitive("group_icon", 43));
+			}
+			Rectangle clip = new Rectangle();
+			clip.setWidth(43);
+			clip.setHeight(43);
+			clip.setArcHeight(43);
+			clip.setArcWidth(43);
+			recipientProfilePic.setClip(clip);
+
+			messageSearchButton.setVisible(true);
+		}
 	}

 	/**
@ -561,8 +614,8 @@ public final class ChatScene implements Restorable {
 			currentChat.insert(message);
 			// Moving currentChat to the top
 			Platform.runLater(() -> {
-				chatList.getItems().remove(currentChat);
-				chatList.getItems().add(0, currentChat);
+				chats.getSource().remove(currentChat);
+				((ObservableList<Chat>) chats.getSource()).add(0, currentChat);
 				chatList.getSelectionModel().select(0);
 				localDB.getChats().remove(currentChat);
 				localDB.getChats().add(0, currentChat);
@ -638,4 +691,10 @@ public final class ChatScene implements Restorable {
 		if (attachmentView.getImage() != null) attachmentView.setVisible(true);
 		pendingAttachment = messageAttachment;
 	}
+
+	@FXML
+	private void searchContacts() {
+		chats.setPredicate(contactSearch.getText().isBlank() ? c -> true
+		: c -> c.getRecipient().getName().toLowerCase().contains(contactSearch.getText().toLowerCase()));
+	}
 }
--- a/client/src/main/java/envoy/client/ui/controller/LoginScene.java
+++ b/client/src/main/java/envoy/client/ui/controller/LoginScene.java
@ -9,8 +9,10 @@ import java.util.logging.Logger;

 import javafx.application.Platform;
 import javafx.fxml.FXML;
+import javafx.geometry.Insets;
 import javafx.scene.control.*;
 import javafx.scene.control.Alert.AlertType;
+import javafx.scene.image.ImageView;

 import envoy.client.data.*;
 import envoy.client.net.Client;
@ -37,7 +39,7 @@ import envoy.util.EnvoyLog;
 public final class LoginScene {

 	@FXML
-	private ClearableTextField userTextField;
+	private TextField userTextField;

 	@FXML
 	private PasswordField passwordField;
@ -46,19 +48,30 @@ public final class LoginScene {
 	private PasswordField repeatPasswordField;

 	@FXML
-	private Label repeatPasswordLabel;
-
-	@FXML
-	private CheckBox registerCheckBox;
+	private Button registerSwitch;

 	@FXML
 	private Label connectionLabel;

+	@FXML
+	private Button loginButton;
+
+	@FXML
+	private Button offlineModeButton;
+
+	@FXML
+	private Label registerTextLabel;
+
+	@FXML
+	private ImageView logo;
+
 	private Client			client;
 	private LocalDB			localDB;
 	private CacheMap		cacheMap;
 	private SceneContext	sceneContext;

+	private boolean registration = false;
+
 	private static final Logger			logger		= EnvoyLog.getLogger(LoginScene.class);
 	private static final EventBus		eventBus	= EventBus.getInstance();
 	private static final ClientConfig	config		= ClientConfig.getInstance();
@ -70,6 +83,8 @@ public final class LoginScene {

 		// Show an alert after an unsuccessful handshake
 		eventBus.register(HandshakeRejection.class, e -> Platform.runLater(() -> { new Alert(AlertType.ERROR, e.get()).showAndWait(); }));
+
+		logo.setImage(IconUtil.loadIcon("envoy_logo"));
 	}

 	/**
@ -102,28 +117,41 @@ public final class LoginScene {
 	private void loginButtonPressed() {

 		// Prevent registration with unequal passwords
-		if (registerCheckBox.isSelected() && !passwordField.getText().equals(repeatPasswordField.getText())) {
+		if (registration && !passwordField.getText().equals(repeatPasswordField.getText())) {
 			new Alert(AlertType.ERROR, "The entered password is unequal to the repeated one").showAndWait();
 			repeatPasswordField.clear();
-		} else if (!Bounds.isValidContactName(userTextField.getTextField().getText())) {
+		} else if (!Bounds.isValidContactName(userTextField.getText())) {
 			new Alert(AlertType.ERROR, "The entered user name is not valid (" + Bounds.CONTACT_NAME_PATTERN + ")").showAndWait();
-			userTextField.getTextField().clear();
-		} else performHandshake(new LoginCredentials(userTextField.getTextField().getText(), passwordField.getText(), registerCheckBox.isSelected(),
-				Startup.VERSION, loadLastSync(userTextField.getTextField().getText())));
+			userTextField.clear();
+		} else performHandshake(new LoginCredentials(userTextField.getText(), passwordField.getText(), registration,
+				Startup.VERSION, loadLastSync(userTextField.getText())));
 	}

 	@FXML
 	private void offlineModeButtonPressed() {
-		attemptOfflineMode(
-				new LoginCredentials(userTextField.getTextField().getText(), passwordField.getText(), false, Startup.VERSION, localDB.getLastSync()));
+		attemptOfflineMode(new LoginCredentials(userTextField.getText(), passwordField.getText(), false, Startup.VERSION,
+				loadLastSync(userTextField.getText())));
 	}

 	@FXML
-	private void registerCheckboxChanged() {
-
+	private void registerSwitchPressed() {
+		if (!registration) {
+			// case if the current mode is login
+			loginButton.setText("Register");
+			loginButton.setPadding(new Insets(2, 116, 2, 116));
+			registerTextLabel.setText("Already an account?");
+			registerSwitch.setText("Login");
+		} else {
+			// case if the current mode is registration
+			loginButton.setText("Login");
+			loginButton.setPadding(new Insets(2, 125, 2, 125));
+			registerTextLabel.setText("No account yet?");
+			registerSwitch.setText("Register");
+		}
+		registration = !registration;
 		// Make repeat password field and label visible / invisible
-		repeatPasswordField.setVisible(registerCheckBox.isSelected());
-		repeatPasswordLabel.setVisible(registerCheckBox.isSelected());
+		repeatPasswordField.setVisible(registration);
+		offlineModeButton.setDisable(registration);
 	}

 	@FXML
@ -206,9 +234,10 @@ public final class LoginScene {
 		// Load ChatScene
 		sceneContext.pop();
 		sceneContext.getStage().setMinHeight(400);
-		sceneContext.getStage().setMinWidth(350);
+		sceneContext.getStage().setMinWidth(843);
 		sceneContext.load(SceneContext.SceneInfo.CHAT_SCENE);
 		sceneContext.<ChatScene>getController().initializeData(sceneContext, localDB, client, writeProxy);
+		sceneContext.getStage().centerOnScreen();

 		if (StatusTrayIcon.isSupported()) {

--- a/client/src/main/java/envoy/client/ui/custom/ProfilePicImageView.java
+++ b/client/src/main/java/envoy/client/ui/custom/ProfilePicImageView.java
@ -0,0 +1,61 @@
+package envoy.client.ui.custom;
+
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.shape.Rectangle;
+
+/**
+ * Provides a set of convenience constructors for images that are displayed as profile pictures.
+ * <p>
+ * Project: <strong>envoy-client</strong><br>
+ * File: <strong>ProfilePicImageView.java</strong><br>
+ * Created: <strong>30.07.2020</strong><br>
+ *
+ * @author Leon Hofmeister
+ * @since Envoy Client v0.2-beta
+ */
+public final class ProfilePicImageView extends ImageView {
+
+	/**
+	 * Creates a new {@code ProfilePicImageView} without a default image.
+	 *
+	 * @since Envoy Client v0.2-beta
+	 */
+	public ProfilePicImageView() { this(null); }
+
+	/**
+	 * Creates a new {@code ProfilePicImageView}.
+	 *
+	 * @param image the image to display
+	 * @since Envoy Client v0.2-beta
+	 */
+	public ProfilePicImageView(Image image) { this(image, 40); }
+
+	/**
+	 * Creates a new {@code ProfilePicImageView}.
+	 *
+	 * @param image           the image to display
+	 * @param sizeAndRounding the size and rounding for a circular
+	 *                        {@code ProfilePicImageView}
+	 * @since Envoy Client v0.2-beta
+	 */
+	public ProfilePicImageView(Image image, double sizeAndRounding) { this(image, sizeAndRounding, sizeAndRounding); }
+
+	/**
+	 * Creates a new {@code ProfilePicImageView}.
+	 *
+	 * @param image    the image to display
+	 * @param size     the size of this {@code ProfilePicImageView}
+	 * @param rounding how rounded this {@code ProfilePicImageView} should be
+	 * @since Envoy Client v0.2-beta
+	 */
+	public ProfilePicImageView(Image image, double size, double rounding) {
+		super(image);
+		final var clip = new Rectangle();
+		clip.setWidth(size);
+		clip.setHeight(size);
+		clip.setArcHeight(rounding);
+		clip.setArcWidth(rounding);
+		setClip(clip);
+	}
+}
--- a/client/src/main/java/envoy/client/ui/custom/package-info.java
+++ b/client/src/main/java/envoy/client/ui/custom/package-info.java
@ -0,0 +1,14 @@
+/**
+ * This package stores custom components for use in JavaFX.
+ * These components are also expected to be used via FXML.
+ * <p>
+ * Project: <strong>envoy-client</strong><br>
+ * File: <strong>package-info.java</strong><br>
+ * Created: <strong>30.07.2020</strong><br>
+ *
+ * @author Leon Hofmeister
+ * @author Maximilian K&auml;fer
+ * @author Kai S. K. Engelbart
+ * @since Envoy Client v0.2-beta
+ */
+package envoy.client.ui.custom;
--- a/client/src/main/java/envoy/client/ui/listcell/AbstractListCell.java
+++ b/client/src/main/java/envoy/client/ui/listcell/AbstractListCell.java
@ -0,0 +1,48 @@
+package envoy.client.ui.listcell;
+
+import javafx.scene.Node;
+import javafx.scene.control.ContentDisplay;
+import javafx.scene.control.ListCell;
+import javafx.scene.control.ListView;
+
+/**
+ * Provides a convenience frame for list cell creation.
+ * <p>
+ * Project: <strong>envoy-client</strong><br>
+ * File: <strong>AbstractListCell.java</strong><br>
+ * Created: <strong>18.07.2020</strong><br>
+ *
+ * @author Kai S. K. Engelbart
+ * @param <T> the type of element displayed by the list cell
+ * @param <U> the type of node as which the list element will be displayed
+ * @since Envoy Client v0.1-beta
+ */
+public abstract class AbstractListCell<T, U extends Node> extends ListCell<T> {
+
+	protected ListView<? extends T> listView;
+
+	/**
+	 * @param listView the list view inside of which the cell will be displayed
+	 * @since Envoy Client v0.1-beta
+	 */
+	public AbstractListCell(ListView<? extends T> listView) {
+		this.listView = listView;
+		setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
+		getStyleClass().add("listElement");
+	}
+
+	@Override
+	protected final void updateItem(T item, boolean empty) {
+		super.updateItem(item, empty);
+		setGraphic(empty || item == null ? null : renderItem(item));
+	}
+
+	/**
+	 * Converts a list item to a node. This can have side effects on the list cell.
+	 *
+	 * @param item the item to render
+	 * @return a node representing the item
+	 * @since Envoy Client v0.1-beta
+	 */
+	protected abstract U renderItem(T item);
+}
--- a/client/src/main/java/envoy/client/ui/listcell/ChatControl.java
+++ b/client/src/main/java/envoy/client/ui/listcell/ChatControl.java
@ -1,10 +1,15 @@
 package envoy.client.ui.listcell;

+import javafx.geometry.Insets;
 import javafx.geometry.Pos;
 import javafx.scene.control.Label;
+import javafx.scene.image.ImageView;
 import javafx.scene.layout.*;
+import javafx.scene.shape.Rectangle;

 import envoy.client.data.Chat;
+import envoy.client.ui.IconUtil;
+import envoy.data.Group;

 /**
 * Displays a chat using a contact control for the recipient and a label for the
@ -25,10 +30,27 @@ public class ChatControl extends HBox {
 	 * @since Envoy Client v0.1-beta
 	 */
 	public ChatControl(Chat chat) {
-
+		setAlignment(Pos.CENTER_LEFT);
+		setPadding(new Insets(0, 0, 3, 0));
+		// profile pic
+		ImageView contactProfilePic;
+		if (chat.getRecipient() instanceof Group) contactProfilePic = new ImageView(IconUtil.loadIconThemeSensitive("group_icon", 32));
+		else contactProfilePic = new ImageView(IconUtil.loadIconThemeSensitive("user_icon", 32));
+		Rectangle	clip				= new Rectangle();
+		clip.setWidth(32);
+		clip.setHeight(32);
+		clip.setArcHeight(32);
+		clip.setArcWidth(32);
+		contactProfilePic.setClip(clip);
+		getChildren().add(contactProfilePic);
+		// spacing
+		Region leftSpacing = new Region();
+		leftSpacing.setPrefSize(8, 0);
+		leftSpacing.setMinSize(8, 0);
+		leftSpacing.setMaxSize(8, 0);
+		getChildren().add(leftSpacing);
 		// Contact control
 		getChildren().add(new ContactControl(chat.getRecipient()));
-
 		// Unread messages
 		if (chat.getUnreadAmount() != 0) {
 			final var spacing = new Region();
@ -43,5 +65,6 @@ public class ChatControl extends HBox {
 			vBox2.getChildren().add(unreadMessagesLabel);
 			getChildren().add(vBox2);
 		}
+		getStyleClass().add("listElement");
 	}
 }
--- a/client/src/main/java/envoy/client/ui/listcell/ContactControl.java
+++ b/client/src/main/java/envoy/client/ui/listcell/ContactControl.java
@ -39,5 +39,6 @@ public class ContactControl extends VBox {
 		} else {
 			getChildren().add(new Label(contact.getContacts().size() + " members"));
 		}
+		getStyleClass().add("listElement");
 	}
 }
--- a/client/src/main/java/envoy/client/ui/listcell/GenericListCell.java
+++ b/client/src/main/java/envoy/client/ui/listcell/GenericListCell.java
@ -0,0 +1,36 @@
+package envoy.client.ui.listcell;
+
+import java.util.function.Function;
+
+import javafx.scene.Node;
+import javafx.scene.control.ListView;
+
+/**
+ * A generic list cell rendering an item using a provided render function.
+ * <p>
+ * Project: <strong>envoy-client</strong><br>
+ * File: <strong>GenericListCell.java</strong><br>
+ * Created: <strong>18.07.2020</strong><br>
+ *
+ * @author Kai S. K. Engelbart
+ * @param <T> the type of element displayed by the list cell
+ * @param <U> the type of node as which the list element will be displayed
+ * @since Envoy Client v0.2-beta
+ */
+public final class GenericListCell<T, U extends Node> extends AbstractListCell<T, U> {
+
+	private Function<? super T, U> renderer;
+
+	/**
+	 * @param listView the list view inside of which the cell will be displayed
+	 * @param renderer a function converting a list item to a node
+	 * @since Envoy Client v0.1-beta
+	 */
+	public GenericListCell(ListView<? extends T> listView, Function<? super T, U> renderer) {
+		super(listView);
+		this.renderer = renderer;
+	}
+
+	@Override
+	protected U renderItem(T item) { return renderer.apply(item); }
+}
--- a/client/src/main/java/envoy/client/ui/listcell/ListCellFactory.java
+++ b/client/src/main/java/envoy/client/ui/listcell/ListCellFactory.java
@ -17,38 +17,19 @@ import javafx.util.Callback;
 *
 * @author Kai S. K. Engelbart
 * @param <T> the type of object to display
+ * @param <U> the type of node displayed
 * @since Envoy Client v0.1-beta
 */
-public final class ListCellFactory<T> implements Callback<ListView<T>, ListCell<T>> {
+public final class ListCellFactory<T, U extends Node> implements Callback<ListView<T>, ListCell<T>> {

-	private final class GenericListCell extends ListCell<T> {
-
-		private ListView<? extends T> listView;
-
-		private GenericListCell(ListView<? extends T> listView) { this.listView = listView; }
-
-		@Override
-		protected void updateItem(T item, boolean empty) {
-			super.updateItem(item, empty);
-			if (empty || item == null) {
-				setText(null);
-				setGraphic(null);
-			} else {
-				final var control = converter.apply(item);
-				prefWidthProperty().bind(listView.widthProperty().subtract(40));
-				setGraphic(control);
-			}
-		}
-	}
-
-	private final Function<? super T, ? extends Node> converter;
+	private final Function<? super T, U> renderer;

 	/**
-	 * @param converter a function converting the type to display into a node
+	 * @param renderer a function converting the type to display into a node
 	 * @since Envoy Client v0.1-beta
 	 */
-	public ListCellFactory(Function<? super T, ? extends Node> converter) { this.converter = converter; }
+	public ListCellFactory(Function<? super T, U> renderer) { this.renderer = renderer; }

 	@Override
-	public ListCell<T> call(ListView<T> listView) { return new GenericListCell(listView); }
+	public ListCell<T> call(ListView<T> listView) { return new GenericListCell<>(listView, renderer); }
 }
--- a/client/src/main/java/envoy/client/ui/listcell/MessageControl.java
+++ b/client/src/main/java/envoy/client/ui/listcell/MessageControl.java
@ -10,18 +10,22 @@ import java.util.logging.Level;
 import java.util.logging.Logger;

 import javafx.geometry.Insets;
+import javafx.geometry.Pos;
 import javafx.scene.control.ContextMenu;
 import javafx.scene.control.Label;
 import javafx.scene.control.MenuItem;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
-import javafx.scene.layout.VBox;
+import javafx.scene.layout.*;
 import javafx.stage.FileChooser;

+import envoy.client.data.LocalDB;
 import envoy.client.data.Settings;
 import envoy.client.ui.AudioControl;
 import envoy.client.ui.IconUtil;
 import envoy.client.ui.SceneContext;
+
+import envoy.data.GroupMessage;
 import envoy.data.Message;
 import envoy.data.Message.MessageStatus;
 import envoy.data.User;
@ -35,11 +39,14 @@ import envoy.util.EnvoyLog;
 * Created: <strong>01.07.2020</strong><br>
 *
 * @author Leon Hofmeister
+ * @author Maximilian K&auml;fer
 * @since Envoy Client v0.1-beta
 */
 public class MessageControl extends Label {

-	private static User client;
+	private boolean ownMessage;
+
+	private static LocalDB localDB;

 	private static SceneContext sceneContext;

@ -56,15 +63,31 @@ public class MessageControl extends Label {
 	 */
 	public MessageControl(Message message) {
 		// Creating the underlying VBox and the dateLabel
-		final var vbox = new VBox(new Label(dateFormat.format(message.getCreationDate())));
+		final var hbox = new HBox();
+		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.setText(localDB.getUsers()
+				.values()
+				.stream()
+				.filter(c -> c.getID() == message.getSenderID())
+				.findFirst()
+				.map(User::getName)
+				.orElse("Unknown User"));
+			label.setPadding(new Insets(0, 5, 0, 0));
+			hbox.getChildren().add(label);
+		}
+		hbox.getChildren().add(new Label(dateFormat.format(message.getCreationDate())));
+		final var vbox = new VBox(hbox);

 		// Creating the actions for the MenuItems
-		final ContextMenu	contextMenu		= new ContextMenu();
-		final MenuItem		copyMenuItem	= new MenuItem("Copy");
-		final MenuItem		deleteMenuItem	= new MenuItem("Delete");
-		final MenuItem		forwardMenuItem	= new MenuItem("Forward");
-		final MenuItem		quoteMenuItem	= new MenuItem("Quote");
-		final MenuItem		infoMenuItem	= new MenuItem("Info");
+		final var	contextMenu		= new ContextMenu();
+		final var	copyMenuItem	= new MenuItem("Copy");
+		final var	deleteMenuItem	= new MenuItem("Delete");
+		final var	forwardMenuItem	= new MenuItem("Forward");
+		final var	quoteMenuItem	= new MenuItem("Quote");
+		final var	infoMenuItem	= new MenuItem("Info");
 		copyMenuItem.setOnAction(e -> copyMessage(message));
 		deleteMenuItem.setOnAction(e -> deleteMessage(message));
 		forwardMenuItem.setOnAction(e -> forwardMessage(message));
@ -93,15 +116,27 @@ public class MessageControl extends Label {
 		}
 		// Creating the textLabel
 		final var textLabel = new Label(message.getText());
+		textLabel.setMaxWidth(430);
 		textLabel.setWrapText(true);
-		vbox.getChildren().add(textLabel);
+		final var hBoxBottom = new HBox();
+		hBoxBottom.getChildren().add(textLabel);
 		// Setting the message status icon and background color
-		if (message.getSenderID() == client.getID()) {
+		if (message.getSenderID() == localDB.getUser().getID()) {
 			final var statusIcon = new ImageView(statusImages.get(message.getStatus()));
 			statusIcon.setPreserveRatio(true);
-			vbox.getChildren().add(statusIcon);
+			final var space = new Region();
+			HBox.setHgrow(space, Priority.ALWAYS);
+			hBoxBottom.getChildren().add(space);
+			hBoxBottom.getChildren().add(statusIcon);
+			hBoxBottom.setAlignment(Pos.BOTTOM_RIGHT);
 			getStyleClass().add("own-message");
-		} else getStyleClass().add("received-message");
+			ownMessage = true;
+			hbox.setAlignment(Pos.CENTER_RIGHT);
+		} else {
+			getStyleClass().add("received-message");
+			ownMessage = false;
+		}
+		vbox.getChildren().add(hBoxBottom);
 		// Adjusting height and weight of the cell to the corresponding ListView
 		paddingProperty().setValue(new Insets(5, 20, 5, 20));
 		setContextMenu(contextMenu);
@ -144,10 +179,17 @@ public class MessageControl extends Label {
 	}

 	/**
-	 * @param client the user who has logged in
+	 * @param localDB the localDB used by the current user 
+	 * @since Envoy Client v0.2-beta
+	 */
+	public static void setLocalDB(LocalDB localDB) { MessageControl.localDB = localDB; }
+
+	/**
+	 * @return whether the message stored by this {@code MessageControl} has been
+	 *         sent by this user of Envoy
 	 * @since Envoy Client v0.1-beta
 	 */
-	public static void setUser(User client) { MessageControl.client = client; }
+	public boolean isOwnMessage() { return ownMessage; }

 	/**
 	 * @param sceneContext the scene context storing the stage used in Envoy
--- a/client/src/main/java/envoy/client/ui/listcell/MessageListCell.java
+++ b/client/src/main/java/envoy/client/ui/listcell/MessageListCell.java
@ -0,0 +1,41 @@
+package envoy.client.ui.listcell;
+
+import javafx.geometry.Insets;
+import javafx.geometry.Pos;
+import javafx.scene.control.ListView;
+
+import envoy.data.Message;
+
+/**
+ * A list cell containing messages represented as message controls.
+ * <p>
+ * Project: <strong>envoy-client</strong><br>
+ * File: <strong>MessageListCell.java</strong><br>
+ * Created: <strong>18.07.2020</strong><br>
+ *
+ * @author Kai S. K. Engelbart
+ * @since Envoy Client v0.1-beta
+ */
+public final class MessageListCell extends AbstractListCell<Message, MessageControl> {
+
+	/**
+	 * @param listView the list view inside of which the cell will be displayed
+	 * @since Envoy Client v0.1-beta
+	 */
+	public MessageListCell(ListView<? extends Message> listView) { super(listView); }
+
+	@Override
+	protected MessageControl renderItem(Message message) {
+		final var control = new MessageControl(message);
+		listView.widthProperty().addListener((observable, oldValue, newValue) -> adjustPadding(newValue.intValue(), control.isOwnMessage()));
+		adjustPadding((int) listView.getWidth(), control.isOwnMessage());
+		if (control.isOwnMessage()) setAlignment(Pos.CENTER_RIGHT);
+		else setAlignment(Pos.CENTER_LEFT);
+		return control;
+	}
+
+	private void adjustPadding(int listWidth, boolean ownMessage) {
+		int padding = 10 + Math.max((listWidth - 1000) / 2, 0);
+		setPadding(ownMessage ? new Insets(0, padding, 6, 0) : new Insets(0, 0, 6, padding));
+	}
+}
--- a/client/src/main/java/module-info.java
+++ b/client/src/main/java/module-info.java
@ -20,4 +20,5 @@ module envoy {

 	opens envoy.client.ui to javafx.graphics, javafx.fxml;
 	opens envoy.client.ui.controller to javafx.graphics, javafx.fxml;
+	opens envoy.client.ui.custom to javafx.graphics, javafx.fxml;
 }
--- a/client/src/main/resources/css/base.css
+++ b/client/src/main/resources/css/base.css
@ -1,5 +1,5 @@
 .button, .list-cell, .progress-bar * {
-	-fx-background-radius: 5.0em;
+	-fx-background-radius: 0.3em;
 }

 .context-menu, .context-menu > * {
@ -8,6 +8,28 @@
 	-fx-background-color: transparent;
 }

+#textEnterContainer, #contact-search-enter-container {
+	-fx-background-radius: 5.0em;
+}
+
+#roundButton {
+	-fx-background-radius: 5.0em;
+}
+
+.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;
 }
@ -48,13 +70,13 @@

 .received-message {
 	-fx-alignment: center-left;
-	-fx-background-radius: 4.0em;
+	-fx-background-radius: 1.3em;
 	-fx-text-alignment: right;
 }

 .own-message {
 	-fx-alignment: center-right;
-	-fx-background-radius: 4.0em;
+	-fx-background-radius: 1.3em;
 	-fx-text-alignment: left;
 }

@ -65,6 +87,21 @@
 	-fx-text-alignment: center;
 }

+#loginButton {
+	-fx-background-radius: 1.0em;
+}
+
+#registerSwitch {
+	-fx-background-color: transparent;
+	-fx-text-fill: orange;
+}
+
+#loginInputField {
+	-fx-background-color: transparent;
+	-fx-border: solid;
+	-fx-border-width: 0.0 0.0 1.0 0.0;
+}
+
 #remainingCharsLabel {
 	-fx-text-fill: #00FF00;
 	-fx-background-color: transparent;
@ -85,3 +122,15 @@
 #infoLabel-error {
 	-fx-text-fill: red;
 }
+
+#transparentBackground {
+	-fx-background-color: transparent;
+}
+
+#profilePic {
+	-fx-radius: 1.0em;
+}
+
+.listElement {
+	-fx-background-color: transparent;
+}
--- a/client/src/main/resources/css/dark.css
+++ b/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 {
-	-fx-background-color: dimgray;
+#messageList, .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 {
@ -37,3 +37,48 @@
 .alert.information.dialog-pane, .alert.warning.dialog-pane, .alert.error.dialog-pane {
 	-fx-background-color: black;
 }
+
+#loginInputField {
+	-fx-border-color: white;
+}
+
+#loginBackground {
+	-fx-background-color: rgb(25, 25, 25);
+}
+
+#chatList, #topBar, #search-panel {
+	-fx-background-color: #303030;
+}
+
+#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;
+}
+
+.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;
+}
--- a/client/src/main/resources/css/light.css
+++ b/client/src/main/resources/css/light.css
@ -14,3 +14,7 @@
 .own-message {
 	-fx-background-color: lightgreen;
 }
+
+#loginInputField {
+	-fx-border-color: black;
+}
--- a/client/src/main/resources/fxml/ChatScene.fxml
+++ b/client/src/main/resources/fxml/ChatScene.fxml
@ -3,7 +3,6 @@
 <?import javafx.geometry.Insets?>
 <?import javafx.geometry.Rectangle2D?>
 <?import javafx.scene.control.Button?>
-<?import javafx.scene.control.ButtonBar?>
 <?import javafx.scene.control.ContextMenu?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.ListView?>
@ -13,192 +12,214 @@
 <?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.Region?>
 <?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Font?>

-<GridPane fx:id="scene" hgap="5.0" maxHeight="-Infinity"
-	maxWidth="-Infinity" minHeight="400.0" minWidth="350.0"
-	prefHeight="400.0" prefWidth="600.0" vgap="2.0"
-	xmlns="http://javafx.com/javafx/11.0.1"
-	xmlns:fx="http://javafx.com/fxml/1"
-	fx:controller="envoy.client.ui.controller.ChatScene">
+<GridPane fx:id="scene" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="400.0" minWidth="500.0" prefHeight="1152.0" prefWidth="2042.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.ChatScene">
 	<columnConstraints>
-		<ColumnConstraints hgrow="NEVER" minWidth="60.0"
-			prefWidth="160.0" />
-		<ColumnConstraints hgrow="ALWAYS"
-			maxWidth="1.7976931348623157E308" minWidth="10.0" prefWidth="357.0" />
-		<ColumnConstraints hgrow="ALWAYS"
-			maxWidth="1.7976931348623157E308" minWidth="10.0" percentWidth="7.0"
-			prefWidth="357.0" />
+		<ColumnConstraints hgrow="NEVER" maxWidth="327.99997965494794" minWidth="-Infinity" prefWidth="317.0" />
+		<ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" />
 	</columnConstraints>
 	<rowConstraints>
-		<RowConstraints maxHeight="-Infinity"
-			minHeight="-Infinity" prefHeight="50.0" vgrow="NEVER" />
-		<RowConstraints maxHeight="-Infinity"
-			minHeight="-Infinity" prefHeight="20.0" vgrow="NEVER" />
-		<RowConstraints maxHeight="1.7976931348623157E308"
-			minHeight="50.0" prefHeight="155.14286150251115" vgrow="ALWAYS" />
-		<RowConstraints maxHeight="-Infinity"
-			minHeight="-Infinity" prefHeight="20.0" vgrow="NEVER" />
-		<RowConstraints maxHeight="120.0" minHeight="40.0"
-			prefHeight="60.0" vgrow="NEVER" />
-		<RowConstraints maxHeight="-Infinity"
-			minHeight="-Infinity" prefHeight="40.0" vgrow="NEVER" />
+		<RowConstraints maxHeight="122.00000508626302" minHeight="-Infinity" prefHeight="96.66666158040364" vgrow="NEVER" />
+		<RowConstraints maxHeight="1.7976931348623157E308" minHeight="50.0" prefHeight="949.3333384195963" vgrow="ALWAYS" />
+		<RowConstraints maxHeight="59.3333740234375" minHeight="-Infinity" prefHeight="22.666748046875" vgrow="NEVER" />
+		<RowConstraints maxHeight="120.0" minHeight="-Infinity" prefHeight="83.333251953125" vgrow="NEVER" />
 	</rowConstraints>
 	<children>
-		<ListView fx:id="chatList" onMouseClicked="#chatListClicked"
-			prefHeight="211.0" prefWidth="300.0" GridPane.rowIndex="1"
-			GridPane.rowSpan="2147483647">
-			<GridPane.margin>
-				<Insets bottom="5.0" left="10.0" />
-			</GridPane.margin>
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="2.0" top="5.0" />
-			</padding>
-			<contextMenu>
-				<ContextMenu anchorLocation="CONTENT_TOP_LEFT">
-					<items>
-						<MenuItem fx:id="deleteContactMenuItem"
-							mnemonicParsing="false" onAction="#deleteContact" text="Delete" />
-					</items>
-				</ContextMenu>
-			</contextMenu>
-		</ListView>
-		<Label fx:id="contactLabel" prefHeight="27.0" prefWidth="134.0"
-			GridPane.columnSpan="2">
-			<GridPane.margin>
-				<Insets left="10.0" />
-			</GridPane.margin>
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</padding>
-		</Label>
-		<Button fx:id="settingsButton" mnemonicParsing="true"
-			onAction="#settingsButtonClicked" text="_Settings"
-			GridPane.columnIndex="1" GridPane.columnSpan="2147483647"
-			GridPane.halignment="RIGHT" GridPane.valignment="CENTER">
-			<GridPane.margin>
-				<Insets bottom="10.0" right="10.0" top="10.0" />
-			</GridPane.margin>
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</padding>
-		</Button>
-		<ListView fx:id="messageList" GridPane.columnIndex="1"
-			GridPane.columnSpan="2147483647" GridPane.rowIndex="1"
-			GridPane.rowSpan="2">
-			<GridPane.margin>
-				<Insets left="5.0" right="10.0" />
-			</GridPane.margin>
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="2.0" top="5.0" />
-			</padding>
-		</ListView>
-		<ButtonBar buttonMinWidth="40.0" GridPane.columnIndex="1"
-			GridPane.columnSpan="2147483647" GridPane.halignment="CENTER"
-			GridPane.rowIndex="5" GridPane.valignment="BOTTOM">
-			<GridPane.margin>
-				<Insets right="10.0" />
-			</GridPane.margin>
-			<buttons>
-				<Button fx:id="rotateButton" mnemonicParsing="false"
-					onAction="#doABarrelRoll">
+      <VBox prefWidth="316.0" GridPane.rowIndex="1" GridPane.rowSpan="2147483647">
+         <GridPane.margin>
+            <Insets right="1.0" />
+         </GridPane.margin>
+         <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="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>
+                           <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" 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">
+      			<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>
+		<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" />
 					</padding>
-				</Button>
-				<Button fx:id="attachmentButton" disable="true"
-					mnemonicParsing="false" onAction="#attachmentButtonClicked">
-					<padding>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</padding>
-				</Button>
-				<Button fx:id="voiceButton" disable="true"
-					onAction="#voiceButtonClicked">
-					<padding>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</padding>
-				</Button>
-				<Button fx:id="postButton" defaultButton="true"
-					disable="true" mnemonicParsing="true" onAction="#postMessage"
-					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>
-					<contextMenu>
-						<ContextMenu anchorLocation="CONTENT_TOP_LEFT">
-							<items>
-								<MenuItem mnemonicParsing="false"
-									onAction="#copyAndPostMessage" text="Copy and Send" />
-							</items>
-						</ContextMenu>
-					</contextMenu>
-					<padding>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</padding>
-				</Button>
-			</buttons>
-		</ButtonBar>
-		<TextArea fx:id="messageTextArea" disable="true"
-			onInputMethodTextChanged="#messageTextUpdated"
-			onKeyPressed="#checkPostConditions" onKeyTyped="#checkKeyCombination"
-			prefHeight="200.0" prefWidth="200.0" wrapText="true"
-			GridPane.columnIndex="1" GridPane.columnSpan="2147483647"
-			GridPane.rowIndex="4">
+					<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">
+					<children>
+						<Button fx:id="settingsButton" mnemonicParsing="true" onAction="#settingsButtonClicked" prefHeight="30.0" prefWidth="30.0" text="">
+							<padding>
+								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+							</padding>
+							<VBox.margin>
+								<Insets />
+							</VBox.margin>
+						</Button>
+					</children>
+					<HBox.margin>
+						<Insets right="10.0" />
+					</HBox.margin>
+					<opaqueInsets>
+						<Insets />
+					</opaqueInsets>
+				</VBox>
+			</children>
 			<GridPane.margin>
-				<Insets bottom="10.0" left="5.0" right="10.0" top="3.0" />
+				<Insets bottom="1.0" right="1.0" />
 			</GridPane.margin>
-			<opaqueInsets>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</opaqueInsets>
-		</TextArea>
-		<Button mnemonicParsing="true"
-			onAction="#addContactButtonClicked" text="_Add Contacts"
-			GridPane.halignment="CENTER" GridPane.rowIndex="5"
-			GridPane.valignment="CENTER">
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</padding>
+		</HBox>
+		<ListView id="messageList" fx:id="messageList" focusTraversable="false" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowIndex="1" GridPane.rowSpan="2">
 			<GridPane.margin>
-				<Insets bottom="10.0" left="10.0" right="5.0" />
-			</GridPane.margin>
-		</Button>
-		<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="3">
-			<GridPane.margin>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+				<Insets />
 			</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">
+		</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">
+					<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>
+								<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>
+				<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">
+							<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>
+							<contextMenu>
+								<ContextMenu anchorLocation="CONTENT_TOP_LEFT">
+									<items>
+										<MenuItem mnemonicParsing="false" onAction="#copyAndPostMessage" text="Copy and Send" />
+									</items>
+								</ContextMenu>
+							</contextMenu>
+							<padding>
+								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+							</padding>
+                     <HBox.margin>
+                        <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">
+							<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">
+							<padding>
+								<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+							</padding>
+						</Button>
+					</children>
+					<HBox.margin>
+						<Insets left="5.0" />
+					</HBox.margin>
+				</HBox>
+			</children>
 			<GridPane.margin>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+				<Insets bottom="40.0" left="10.0" right="10.0" top="15.0" />
 			</GridPane.margin>
-			<padding>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-			</padding>
-		</Label>
-		<ImageView fx:id="attachmentView" pickOnBounds="true"
-			preserveRatio="true" visible="false" GridPane.columnIndex="1"
-			GridPane.columnSpan="2147483647" GridPane.halignment="RIGHT"
-			GridPane.rowIndex="3">
+		</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">
+					<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" />
 			</viewport>
@ -206,5 +227,33 @@
 				<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">
+			<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="">
+							<font>
+								<Font size="18.0" />
+							</font>
+						</Label>
+						<Label fx:id="topBarStatusLabel" text="" />
+					</children>
+					<HBox.margin>
+						<Insets left="15.0" />
+					</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">
+					<HBox.margin>
+						<Insets right="20.0" />
+					</HBox.margin>
+				</Button>
+			</children>
+		</HBox>
 	</children>
 </GridPane>
--- a/client/src/main/resources/fxml/LoginScene.fxml
+++ b/client/src/main/resources/fxml/LoginScene.fxml
@ -1,94 +1,76 @@
 <?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.CheckBox?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.PasswordField?>
-<?import javafx.scene.layout.BorderPane?>
+<?import javafx.scene.control.TextField?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.RowConstraints?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>

-<VBox prefHeight="206.0" prefWidth="440.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="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">
 	<children>
-		<Label text="User Login">
+      <ImageView fx:id="logo" fitHeight="80.0" fitWidth="80.0" pickOnBounds="true" preserveRatio="true">
+         <VBox.margin>
+            <Insets bottom="10.0" top="50.0" />
+         </VBox.margin>
+         <image>
+            <Image url="file:@../icons/envoy_logo.png" />
+         </image>
+      </ImageView>
+      <Label alignment="TOP_CENTER" contentDisplay="CENTER" layoutX="142.0" layoutY="15.0" text="ENVOY MESSENGER" textAlignment="CENTER">
+         <font>
+            <Font size="14.0" />
+         </font>
+         <padding>
+            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+         </padding>
+      </Label>
+		<Label alignment="TOP_CENTER" contentDisplay="CENTER"
+			prefHeight="33.0" prefWidth="110.0" text="LOGIN"
+			textAlignment="CENTER">
 			<font>
 				<Font size="26.0" />
 			</font>
 			<VBox.margin>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+				<Insets left="5.0" right="5.0" top="5.0" />
 			</VBox.margin>
 			<padding>
 				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 			</padding>
 		</Label>
-		<GridPane hgap="5.0" vgap="10.0">
+		<GridPane hgap="5.0" vgap="8.5">
 			<columnConstraints>
-				<ColumnConstraints hgrow="SOMETIMES"
-					minWidth="10.0" percentWidth="40.0" prefWidth="100.0" />
-				<ColumnConstraints hgrow="SOMETIMES"
-					minWidth="10.0" prefWidth="100.0" />
+				<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
 			</columnConstraints>
 			<rowConstraints>
-				<RowConstraints minHeight="10.0" prefHeight="30.0"
-					vgrow="SOMETIMES" />
-				<RowConstraints minHeight="10.0" prefHeight="30.0"
-					vgrow="SOMETIMES" />
-				<RowConstraints minHeight="10.0" prefHeight="30.0"
-					vgrow="SOMETIMES" />
+				<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+				<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+				<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
 			</rowConstraints>
 			<children>
-				<Label text="User Name:">
+				<TextField id="loginInputField" fx:id="userTextField" promptText="Username">
 					<GridPane.margin>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+						<Insets bottom="0.0" left="5.0" right="5.0" top="0.0" />
 					</GridPane.margin>
-					<padding>
-						<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
-					</padding>
-				</Label>
-				<Label text="Password:" GridPane.rowIndex="1">
-					<padding>
-						<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
-					</padding>
+				</TextField>
+				<PasswordField id="loginInputField" fx:id="passwordField" promptText=" Password" GridPane.rowIndex="1">
 					<GridPane.margin>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</GridPane.margin>
-				</Label>
-				<Label fx:id="repeatPasswordLabel" text="Repeat Password:"
-					visible="false" GridPane.rowIndex="2">
-					<GridPane.margin>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</GridPane.margin>
-					<padding>
-						<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
-					</padding>
-				</Label>
-				<ClearableTextField fx:id="userTextField"
-					GridPane.columnIndex="1">
-					<GridPane.margin>
-						<Insets bottom="10.0" left="5.0" right="5.0" top="5.0" />
-					</GridPane.margin>
-				</ClearableTextField>
-				<PasswordField fx:id="passwordField"
-					GridPane.columnIndex="1" GridPane.rowIndex="1">
-					<GridPane.margin>
-						<Insets bottom="10.0" left="5.0" right="5.0" top="10.0" />
+						<Insets bottom="0.0" left="5.0" right="5.0" top="0.0" />
 					</GridPane.margin>
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
 					</padding>
 				</PasswordField>
-				<PasswordField fx:id="repeatPasswordField"
-					visible="false" GridPane.columnIndex="1" GridPane.rowIndex="2">
+				<PasswordField id="loginInputField" fx:id="repeatPasswordField" promptText=" Repeat Password" visible="false" GridPane.rowIndex="2">
 					<GridPane.margin>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="10.0" />
+						<Insets bottom="0.0" left="5.0" right="5.0" top="0.0" />
 					</GridPane.margin>
 					<padding>
 						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
@ -96,54 +78,40 @@
 				</PasswordField>
 			</children>
 			<VBox.margin>
-				<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+				<Insets bottom="10.0" left="25.0" right="25.0" top="10.0" />
 			</VBox.margin>
 		</GridPane>
-		<CheckBox fx:id="registerCheckBox" mnemonicParsing="true"
-			onAction="#registerCheckboxChanged" prefHeight="17.0"
-			prefWidth="181.0" text="_Register">
-			<VBox.margin>
-				<Insets left="5.0" right="3.0" />
-			</VBox.margin>
-		</CheckBox>
+				<Button id="loginButton" fx:id="loginButton" defaultButton="true" focusTraversable="false" mnemonicParsing="false" onAction="#loginButtonPressed" text="Login" textAlignment="CENTER">
+         <font>
+            <Font size="16.0" />
+         </font>
+         <opaqueInsets>
+            <Insets />
+         </opaqueInsets>
+         <padding>
+            <Insets bottom="2.0" left="125.0" right="125.0" top="2.0" />
+         </padding>
+				</Button>
+      <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" />
+         </children>
+         <VBox.margin>
+            <Insets bottom="20.0" />
+         </VBox.margin>
+      </HBox>
+				<Button fx:id="offlineModeButton" focusTraversable="false" mnemonicParsing="false" onAction="#offlineModeButtonPressed" text="Offline mode">
+         <VBox.margin>
+            <Insets bottom="5.0" top="20.0" />
+         </VBox.margin></Button>
 		<Label fx:id="connectionLabel">
 			<VBox.margin>
 				<Insets left="5.0" />
 			</VBox.margin>
+         <font>
+            <Font size="12.0" />
+         </font>
 		</Label>
-		<BorderPane prefWidth="200.0">
-			<left>
-				<Button cancelButton="true" mnemonicParsing="false"
-					onAction="#abortLogin" text="Close" BorderPane.alignment="CENTER">
-					<padding>
-						<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-					</padding>
-					<BorderPane.margin>
-						<Insets />
-					</BorderPane.margin>
-				</Button>
-			</left>
-			<center>
-				<Button mnemonicParsing="false"
-					onAction="#offlineModeButtonPressed" text="Offline mode"
-					BorderPane.alignment="CENTER">
-					<BorderPane.margin>
-						<Insets />
-					</BorderPane.margin>
-				</Button>
-			</center>
-			<right>
-				<Button defaultButton="true" mnemonicParsing="false"
-					onAction="#loginButtonPressed" text="Login"
-					BorderPane.alignment="CENTER">
-					<BorderPane.margin>
-						<Insets />
-					</BorderPane.margin>
-				</Button>
-			</right>
-			<VBox.margin>
-				<Insets bottom="5.0" left="5.0" right="5.0" />
-			</VBox.margin>
-		</BorderPane>
 	</children>
 </VBox>
--- a/client/src/main/resources/icons/dark/group_icon.png
+++ b/client/src/main/resources/icons/dark/group_icon.png
--- a/client/src/main/resources/icons/dark/user_icon.png
+++ b/client/src/main/resources/icons/dark/user_icon.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
--- a/common/src/main/java/envoy/util/Bounds.java
+++ b/common/src/main/java/envoy/util/Bounds.java
@ -23,6 +23,8 @@ public class Bounds {
 	 */
 	public static final Pattern CONTACT_NAME_PATTERN = Pattern.compile("^\\w[a-zA-Z0-9-]{2,15}$");

+	// KAI: Trust of Chain - das berühmte Konzept aus der Kryptographie
+
 	/**
 	 * @param contactName the contact name to validate
 	 * @return {@code true} if the given contact name is valid