From 95816710124db2e1e0747b17d0acde385bf5bac5 Mon Sep 17 00:00:00 2001
From: joshenx <e0525998@u.nus.edu>
Date: Mon, 25 Oct 2021 18:00:10 +0800
Subject: [PATCH] Fix Send button UI and improve TextArea UI

---
 src/main/resources/view/CommandBox.fxml |  2 +-
 src/main/resources/view/LightTheme.css  | 54 ++++++++++++++++++++-----
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/main/resources/view/CommandBox.fxml b/src/main/resources/view/CommandBox.fxml
index 93881cef4a7..2e43e227b52 100644
--- a/src/main/resources/view/CommandBox.fxml
+++ b/src/main/resources/view/CommandBox.fxml
@@ -6,6 +6,6 @@
 
 <StackPane styleClass="stack-pane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <TextField fx:id="commandTextField" onAction="#handleCommandEntered" promptText="Enter command here..."/>
-  <Button fx:id="sendButton" mnemonicParsing="false" onAction="#handleCommandEntered"
+  <Button fx:id="sendButton" id="sendButton" mnemonicParsing="false" onAction="#handleCommandEntered"
           prefHeight="41.0" prefWidth="100.0" text="Send" StackPane.alignment="CENTER_RIGHT"/>
 </StackPane>
diff --git a/src/main/resources/view/LightTheme.css b/src/main/resources/view/LightTheme.css
index ec852c74385..47bc683efc5 100644
--- a/src/main/resources/view/LightTheme.css
+++ b/src/main/resources/view/LightTheme.css
@@ -201,22 +201,20 @@
 }
 
 .stack-pane {
-     -fx-background-color: derive(#ffffff, 20%);
+     -fx-background-color: #ffffff;
 }
 
 .pane-without-border {
-     -fx-background-color: derive(#ffffff, 50%);
-     -fx-background-radius: 10px;
+     -fx-background-color: #ffffff;
      -fx-border-color: derive(#eeeeee, 50%);
      -fx-border-width: 0px;
-     -fx-border-radius: 10;
 }
 
 .pane-with-border {
-     -fx-background-color: derive(ffffff, 50%);
-     -fx-border-color: derive(#cccccc, 50%);
+     -fx-background-color: #ffffff;
+     -fx-border-color: #cccccc transparent;
      -fx-border-width: 1px;
-     -fx-border-radius: 10;
+     -fx-border-radius: 0;
 }
 
 .pane-with-shadow {
@@ -238,7 +236,7 @@
 }
 
 .result-display {
-    -fx-background-color: transparent;
+    -fx-background-color: #ffffff;
     -fx-font-family: "Droid Sans Mono";
     -fx-font-size: 10pt;
     -fx-text-fill: #444444;
@@ -277,7 +275,6 @@
     -fx-border-radius: 15px;
 }
 
-
 .context-menu {
     -fx-background-color: derive(#ffffff, 10%);
 }
@@ -354,6 +351,31 @@
     -fx-background-color: derive(-fx-focus-color, 30%);
 }
 
+#sendButton {
+    -fx-padding: 5 22 5 22;
+    -fx-border-color: transparent;
+    -fx-border-width: 1;
+    -fx-border-radius: 5px;
+    -fx-background-radius: 5px;
+    -fx-background-color: #48C9B0;
+    -fx-font-family: "Segoe UI Bold";
+    -fx-font-size: 11pt;
+    -fx-text-fill: #ffffff;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+}
+
+#sendButton:hover {
+    -fx-background-color: #75d6c4;
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 7, 0, 1, 1);
+}
+
+#sendButton:pressed, #sendButton:default:hover:pressed {
+    -fx-background-color: #3ac4a9;
+    -fx-text-fill: #ffffff;
+    -fx-effect: innershadow(gaussian, #666666, 7, 0, 0, 0)
+}
+
+
 .dialog-pane {
     -fx-background-color: #ffffff;
 }
@@ -431,6 +453,10 @@
     -fx-effect: innershadow(gaussian, #cccccc, 10, 0, 0, 0);
 }
 
+#resultDisplay {
+    -fx-background-color: #ffffff;
+}
+
 #resultDisplay .content {
     -fx-background-color: #ffffff;
     -fx-background-radius: 15px;
@@ -438,6 +464,16 @@
     -fx-effect: innershadow(gaussian, #cccccc, 10, 0, 0, 0);
 }
 
+.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;
+}
+
 #tags {
     -fx-hgap: 7;
     -fx-vgap: 3;