Tweak the GUI

* Both sides of the conversation are displayed in the same format.
* There is no background image.

* As the conversation is between the user and the app, it is asymmetric in nature. So, different format for both sides of the conversation would help the user quickly differentiate the bot's replies and the user's inputs.
* A background image would make the app more visually appealing.

Let's
* display the user's inputs against a white background and the bot's replies against a purple background.
* add a translucent background image.

* A purple background was chosen because it matches the color of the bot's profile picture.
* A translucent background image was chosen because it aids in the visibility of the text.

Author: tensaida

src/main/java/drake/Ui.java

@@ -50,8 +50,8 @@ public List<String> replyWelcome() {
         ArrayList<String> reply = new ArrayList<>();
         reply.add("You used to call me on my cellphone");
         reply.add("!@#$%^&*()-+!@#$%^&*()`~`!@#$");
-        reply.add("Drake's (me) the kind of guy to help you out uwu");
-        reply.add("Go ahead, make that hotline bling");
+        reply.add("Drake's the kind of guy to help you out uwu");
+        reply.add("Go ahead, make that hotline bling ☎");
         return reply;
     }
 
@@ -78,7 +78,7 @@ public void printLine(Object line) {
      *
      */
     public String replyBye() {
-        return "I'm down for you always. See you " + ANSI_RED + "<3" + ANSI_RESET;
+        return "I'm down for you always. See you ❤";
     }
 
     /**

src/main/java/drake/gui/ChatMessage.java

@@ -31,7 +31,7 @@ public class ChatMessage extends AnchorPane {
     @FXML
     private HBox header;
 
-    private ChatMessage(String name, String text, Image img) {
+    private ChatMessage(String name, String text, Image img, boolean isWhiteBackground) {
         try {
             FXMLLoader fxmlLoader = new FXMLLoader(Window.class.getResource("/view/ChatMessage.fxml"));
             fxmlLoader.setController(this);
@@ -44,6 +44,9 @@ private ChatMessage(String name, String text, Image img) {
         this.name.setText(name);
         message.setText(text);
         profilePicture.setImage(img);
+        if (isWhiteBackground) {
+            message.setStyle("-fx-text-fill : #000000; -fx-background-color: white;");
+        }
     }
 
     /**
@@ -58,11 +61,11 @@ private void flip() {
     }
 
     public static ChatMessage getUserDialog(String text, Image img) {
-        return new ChatMessage("Lost Soul", text, img);
+        return new ChatMessage("Lost Soul", text, img, true);
     }
 
     public static ChatMessage getDrakeDialog(String text, Image img) {
-        var db = new ChatMessage("Drake", text, img);
+        var db = new ChatMessage("Drake", text, img, false);
         db.flip();
         return db;
     }

src/main/java/drake/gui/Main.java

@@ -20,6 +20,7 @@ public void start(Stage stage) {
             FXMLLoader fxmlLoader = new FXMLLoader(Main.class.getResource("/view/Window.fxml"));
             AnchorPane anchorPane = fxmlLoader.load();
             Scene scene = new Scene(anchorPane);
+            scene.getStylesheets().add("/view/styles.css");
             stage.setScene(scene);
             stage.show();
             stage.setTitle("Drake");

src/main/resources/fonts/YuseiMagic-Regular.ttf

@@ -33,4 +33,4 @@
    <opaqueInsets>
       <Insets />
    </opaqueInsets>
-</fx:root>
+</fx:root>

src/main/resources/media/background.png

@@ -11,14 +11,14 @@
     <children>
         <ScrollPane fx:id="scrollPane" hbarPolicy="NEVER" hvalue="1.0" prefHeight="557.0" prefWidth="400.0" vvalue="1.0" AnchorPane.bottomAnchor="44.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
             <content>
-                <VBox fx:id="dialogContainer" alignment="TOP_CENTER" prefHeight="552.0" prefWidth="375.0" spacing="8.0" />
+                <VBox fx:id="dialogContainer" style="-fx-background-image: url(/media/background.png); -fx-background-size: 100%;" alignment="TOP_CENTER" prefHeight="552.0" prefWidth="375.0" spacing="8.0" />
             </content>
         </ScrollPane>
-      <HBox layoutY="500.0" prefHeight="40.0" spacing="4.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
-         <children>
-              <TextField fx:id="userInput" onAction="#handleUserInput" prefHeight="40.0" HBox.hgrow="ALWAYS" />
-              <Button fx:id="sendButton" mnemonicParsing="false" onAction="#handleUserInput" prefHeight="40.0" text="Send" />
-         </children>
-      </HBox>
+        <HBox layoutY="500.0" prefHeight="40.0" spacing="4.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
+            <children>
+                <TextField fx:id="userInput" onAction="#handleUserInput" prefHeight="40.0" HBox.hgrow="ALWAYS" />
+                <Button fx:id="sendButton" mnemonicParsing="false" onAction="#handleUserInput" prefHeight="40.0" text="Send" />
+            </children>
+        </HBox>
     </children>
-</AnchorPane>
+</AnchorPane>

src/main/resources/view/ChatMessage.fxml

@@ -0,0 +1,11 @@
+@font-face {
+  src: url(../fonts/YuseiMagic-Regular.ttf);
+}
+
+.root {
+    -fx-font-size: 14;
+    -fx-font-family: 'Yusei Magic', sans-serif;
+    -fx-font-weight: 700;
+
+}
+