Improve GUI for devin

Author: codebreaker64

build.gradle

@@ -31,6 +31,9 @@ dependencies {
     implementation group: 'org.openjfx', name: 'javafx-graphics', version: javaFxVersion, classifier: 'win'
     implementation group: 'org.openjfx', name: 'javafx-graphics', version: javaFxVersion, classifier: 'mac'
     implementation group: 'org.openjfx', name: 'javafx-graphics', version: javaFxVersion, classifier: 'linux'
+    implementation group: 'org.openjfx', name: 'javafx-media', version: javaFxVersion, classifier: 'win'
+    implementation group: 'org.openjfx', name: 'javafx-media', version: javaFxVersion, classifier: 'mac'
+    implementation group: 'org.openjfx', name: 'javafx-media', version: javaFxVersion, classifier: 'linux'
 }
 
 test {

src/main/java/devin/command/Command.java

@@ -78,7 +78,7 @@ public static String unmarkCommand(TaskList list, String[] texts, Storage storag
         if (list.getTasks().isEmpty()) {
             throw new DevinException("There is no task in the list!");
         } else if (texts.length != 2) {
-            throw new DevinException("Please type a choose a task number");
+            throw new DevinException("Please choose a task number");
         }
         int index = Integer.parseInt((texts[1])) - 1;
         if (index > list.getTasks().size() + 1 || index < 0) {
@@ -105,7 +105,7 @@ public static String deleteCommand(TaskList list, String[] texts, Storage storag
         if (list.getTasks().isEmpty()) {
             throw new DevinException("There is no task in the list!");
         } else if (texts.length != 2) {
-            throw new DevinException("Please type a choose a task number");
+            throw new DevinException("Please choose a task number");
         }
         int index = Integer.parseInt((texts[1])) - 1;
         if (index > list.getTasks().size() + 1 || index < 0) {

src/main/java/devin/dialogbox/DialogBox.java

@@ -47,11 +47,12 @@ private void flip() {
         Collections.reverse(tmp);
         getChildren().setAll(tmp);
         setAlignment(Pos.TOP_LEFT);
-        dialog.getStyleClass().add("reply-label");
     }
 
     public static DialogBox getUserDialog(String text, Image img) {
-        return new DialogBox(text, img);
+        var db = new DialogBox(text, img);
+        db.dialog.getStyleClass().add("user-label");
+        return db;
     }
 
     public static DialogBox getDevinDialog(String text, Image img) {

src/main/java/devin/main/MainWindow.java

@@ -15,6 +15,7 @@
 import javafx.scene.image.Image;
 import javafx.scene.layout.AnchorPane;
 import javafx.scene.layout.VBox;
+import javafx.scene.media.AudioClip;
 import javafx.util.Duration;
 /**
  * Controller for the main GUI.
@@ -31,9 +32,12 @@ public class MainWindow extends AnchorPane {
 
     private Devin devin;
 
-    private Image userImage = new Image(this.getClass().getResourceAsStream("/images/DaUser.jpg"));
-    private Image devinImage = new Image(this.getClass().getResourceAsStream("/images/DaDevin.jpg"));
+    private Image userImage = new Image(this.getClass().getResourceAsStream("/images/DaUser.png"));
+    private Image devinImage = new Image(this.getClass().getResourceAsStream("/images/DaDevin.png"));
 
+    private AudioClip sendSound = new AudioClip(this.getClass().getResource("/sounds/Send.wav").toString());
+    private AudioClip responseSound = new AudioClip(this.getClass().getResource("/sounds/Notification.wav").toString());
+    
     /**
      * Methods to start when the app first initialise
      */
@@ -43,6 +47,7 @@ public void initialize() {
             scrollPane.vvalueProperty().bind(dialogContainer.heightProperty());
             Devin.main(null);
             dialogContainer.getChildren().add(DialogBox.getDevinDialog(Ui.printGreet(), devinImage));
+            responseSound.play(1.0);
             userInput.setPromptText("Type here...");
         } catch (DevinException | IOException e) {
             handleException(e.getMessage());
@@ -61,6 +66,7 @@ public void setDevin(Devin d) {
     @FXML
     private void handleUserInput() {
         try {
+            sendSound.play(1.0);
             String input = userInput.getText();
             assert input != null: "There is no user input.";
             String response = devin.getResponse(input);
@@ -69,6 +75,7 @@ private void handleUserInput() {
                 DialogBox.getUserDialog(input, userImage),
                 DialogBox.getDevinDialog(response, devinImage)
             );
+            responseSound.play(1.0);
             userInput.clear();
             //Solution inspired by ypuppy at https://github.com/nus-cs2103-AY2425S2/forum/issues/160
             if (input.contains("bye")) {

src/main/resources/css/dialog-box.css

@@ -1,9 +1,17 @@
+.user-label {
+    -fx-background-color: #A47EC6 !important; 
+    -fx-text-fill: #FFFFFF; /* White text for readability */
+    -fx-background-radius: 1em;  /* Uniform rounded corners */
+    -fx-padding: 10px; /* Add some padding for better spacing */
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 5, 0.5, 2, 2); /* A bit less intense shadow */
+}
+
 .label {
-    -fx-background-color: linear-gradient(to bottom right, #00ffbf, #00ddff);
-    -fx-border-color: #d55e00 #009e73 #cc79a7 #0072b2;
-    -fx-border-width: 2px;
-    -fx-background-radius: 1em 1em 0 1em;
-    -fx-border-radius: 1em 1em 0 1em;
+    -fx-background-color: #6495ED;
+    -fx-text-fill: #FFFFFF; /* White text for readability */
+    -fx-background-radius: 1em;  /* Uniform rounded corners */
+    -fx-padding: 10px; /* Add some padding for better spacing */
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 5, 0.5, 2, 2); /* A bit less intense shadow */
 }
 
 .reply-label {
@@ -22,4 +30,3 @@
     /* Rotate image clockwise by degrees. */
     -fx-rotate: 0;
 }
-

src/main/resources/css/main.css

@@ -1,26 +1,36 @@
 .root {
-    main-color: rgb(237, 255, 242);       /* Create a looked-up color called "main-color" within root. */
+    main-color: #1E1E2E; 
     -fx-background-color: main-color;
+    -fx-background-image: url("../images/background.jpg"); /* Set image */
+    -fx-background-size: cover;
 }
 
 .text-field {
-    -fx-background-color: #d9ffe2;
-    -fx-font: 20px "Arial";
+    -fx-background-color: rgba(44, 62, 80, 0.5); /* Translucent dark blue */
+    -fx-text-fill: white;
+    -fx-font: 18px "Arial";
+    -fx-border-color: #5B92E5;
+    -fx-border-radius: 5px;
+    -fx-padding: 8px;
 }
 
 .button {
-    -fx-background-color: mediumspringgreen;
+    -fx-background-color: linear-gradient(to bottom, #5C6BC0, #3949AB); /* Indigo gradient */
+    -fx-text-fill: white;
     -fx-font: italic bold 16px "Arial";
+    -fx-border-radius: 8px;
+    -fx-padding: 8px 16px;
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 5, 0, 0, 2);
 }
 
 .button:hover {
-    -fx-background-color:cyan;
-    -fx-font-size: 18px;
+    -fx-background-color: #3D5AFE; /* Brighter blue when hovered */
+    -fx-font-size: 17px;
 }
 
 .button:pressed {
-    -fx-background-color:orange;
-    -fx-font-size: 20px;
+    -fx-background-color: #1E40AF; /* Darker blue when pressed */
+    -fx-font-size: 17px;
 }
 
 .scroll-pane,
@@ -29,19 +39,16 @@
 }
 
 .scroll-bar {
-    -fx-font-size: 10px;  /* Change width of scroll bar. */
-    -fx-background-color: main-color;
+    -fx-background-color: transparent;
 }
 
 .scroll-bar .thumb {
-    -fx-background-color: #ff9cb4;
-    -fx-background-radius: 1em;
+    -fx-background-color: rgba(44, 62, 80, 0.7); /* Darker but semi-transparent */
+    -fx-background-radius: 10px;
 }
 
-/* Hides the increment and decrement buttons. */
 .scroll-bar .increment-button,
 .scroll-bar .decrement-button {
     -fx-pref-height: 0;
     -fx-opacity: 0;
 }
-