From 8695774f5b40deecb3aec3db460da52a7833c296 Mon Sep 17 00:00:00 2001
From: yooplo <jjwr2002@gmail.com>
Date: Wed, 16 Oct 2024 02:11:21 +0800
Subject: [PATCH] Update the color theme of the GUI to match NUS colors

---
 .../logic/commands/AbstractFindCommand.java   |   2 +-
 .../view/CampusConnectExtensions.css          |  19 +++
 .../resources/view/CampusConnectTheme.css     | 152 ++++++++++++++++++
 src/main/resources/view/MainWindow.fxml       |  10 +-
 src/main/resources/view/ResultDisplay.fxml    |   2 +-
 5 files changed, 179 insertions(+), 6 deletions(-)
 create mode 100644 src/main/resources/view/CampusConnectExtensions.css
 create mode 100644 src/main/resources/view/CampusConnectTheme.css

diff --git a/src/main/java/seedu/address/logic/commands/AbstractFindCommand.java b/src/main/java/seedu/address/logic/commands/AbstractFindCommand.java
index aa1c6101ff1..38539f70eca 100644
--- a/src/main/java/seedu/address/logic/commands/AbstractFindCommand.java
+++ b/src/main/java/seedu/address/logic/commands/AbstractFindCommand.java
@@ -20,7 +20,7 @@ public abstract class AbstractFindCommand extends Command {
     public static final String TAG_COMMAND_WORD = " t/";
 
     public static final String MESSAGE_USAGE = COMMAND_WORD + ": Finds all persons whose names, contacts, emails "
-            + "or tagscontain any of the specified keywords (case-insensitive) and displays"
+            + "or tags contain any of the specified keywords (case-insensitive) and displays"
             + "them as a list with indices.\n"
             + "Parameters: KEYWORD [MORE_KEYWORDS]...\n"
             + "Example:\n"
diff --git a/src/main/resources/view/CampusConnectExtensions.css b/src/main/resources/view/CampusConnectExtensions.css
new file mode 100644
index 00000000000..20aa49aac78
--- /dev/null
+++ b/src/main/resources/view/CampusConnectExtensions.css
@@ -0,0 +1,19 @@
+.error {
+    -fx-text-fill: #FF4500 !important; /* Bright orange for error messages */
+}
+
+.list-cell:empty {
+    /* Empty cells will be filled with a base theme color */
+    -fx-background-color: #2B3A67; /* Deep blue background */
+}
+
+.tag-selector {
+    -fx-border-width: 1;
+    -fx-border-color: #FFA500;
+    -fx-border-radius: 3;
+    -fx-background-radius: 3;
+}
+
+.tooltip-text {
+    -fx-text-fill: #2B3A67; /* Ensure tooltip text remains white for legibility */
+}
diff --git a/src/main/resources/view/CampusConnectTheme.css b/src/main/resources/view/CampusConnectTheme.css
new file mode 100644
index 00000000000..f579ab752b9
--- /dev/null
+++ b/src/main/resources/view/CampusConnectTheme.css
@@ -0,0 +1,152 @@
+/* General Background and Text */
+.background {
+    -fx-background-color: #2B3A67; /* Deep blue background */
+    background-color: #2B3A67; /* Consistent with other references */
+}
+
+.label {
+    -fx-font-size: 11pt;
+    -fx-font-family: "Segoe UI Semibold";
+    -fx-text-fill: #FFA500; /* Orange text */
+    -fx-opacity: 0.9;
+}
+
+.label-bright {
+    -fx-font-size: 11pt;
+    -fx-font-family: "Segoe UI Semibold";
+    -fx-text-fill: white;
+    -fx-opacity: 1;
+}
+
+.label-header {
+    -fx-font-size: 32pt;
+    -fx-font-family: "Segoe UI Light";
+    -fx-text-fill: #FFA500; /* Orange text for headers */
+    -fx-opacity: 1;
+}
+
+.text-field {
+    -fx-font-size: 12pt;
+    -fx-font-family: "Segoe UI Semibold";
+    -fx-background-color: #2D4059; /* Slightly lighter blue */
+    -fx-text-fill: white;
+}
+
+.tab-pane {
+    -fx-padding: 0 0 0 1;
+}
+
+/* Table and List Views */
+.table-view {
+    -fx-base: #2B3A67;
+    -fx-control-inner-background: #2B3A67;
+    -fx-background-color: #2B3A67;
+    -fx-table-cell-border-color: transparent;
+    -fx-table-header-border-color: transparent;
+    -fx-padding: 5;
+}
+
+.table-view .column-header-background {
+    -fx-background-color: transparent;
+}
+
+.table-view .column-header, .table-view .filler {
+    -fx-size: 35;
+    -fx-border-width: 0 0 1 0;
+    -fx-background-color: transparent;
+    -fx-border-color: transparent transparent #FFA500 transparent; /* Orange bottom border */
+}
+
+.table-view .column-header .label {
+    -fx-font-size: 20pt;
+    -fx-font-family: "Segoe UI Light";
+    -fx-text-fill: white;
+    -fx-alignment: center-left;
+    -fx-opacity: 1;
+}
+
+.list-cell:filled:even {
+    -fx-background-color: #3C4B76; /* Intermediate blue */
+}
+
+.list-cell:filled:odd {
+    -fx-background-color: #445C87; /* Another shade for contrast */
+}
+
+.list-cell:filled:selected {
+    -fx-background-color: #FFA500; /* Orange for selection */
+}
+
+.list-cell:filled:selected #cardPane {
+    -fx-border-color: #FF8C00; /* Darker orange border */
+    -fx-border-width: 1;
+}
+
+.list-cell .label {
+    -fx-text-fill: white;
+}
+
+/* Button Styles */
+.button {
+    -fx-padding: 5 22 5 22;
+    -fx-border-color: #FFA500; /* Orange border */
+    -fx-border-width: 2;
+    -fx-background-radius: 0;
+    -fx-background-color: #2B3A67;
+    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
+    -fx-font-size: 11pt;
+    -fx-text-fill: #FFFFFF; /* White text */
+}
+
+.button:hover {
+    -fx-background-color: #34495E; /* Lighter blue on hover */
+}
+
+.button:pressed {
+    -fx-background-color: #FFA500; /* Orange when pressed */
+    -fx-text-fill: #2B3A67; /* Switch to blue text */
+}
+
+.menu-bar {
+    -fx-background-color: #34495E; /* A lighter blue than background */
+}
+
+.menu-bar .label {
+    -fx-font-size: 14pt;
+    -fx-font-family: "Segoe UI Light";
+    -fx-text-fill: #FF8C00;
+    -fx-opacity: 0.9;
+    -fx-font-weight: bold;
+}
+
+.status-bar {
+    -fx-background-color: #2D4059; /* Dark blue for status bar */
+}
+
+.status-bar .label {
+    -fx-font-family: "Segoe UI Light";
+    -fx-text-fill: white;
+    -fx-padding: 4px;
+    -fx-pref-height: 30px;
+}
+
+#commandTypeLabel {
+    -fx-font-size: 11px;
+    -fx-text-fill: #FFA500; /* Orange for label text */
+}
+
+#tags .label {
+    -fx-text-fill: white;
+    -fx-background-color: #3e7b91;
+    -fx-padding: 1 3 1 3;
+}
+
+.result-display {
+    -fx-font-size: 11pt;
+    -fx-font-family: "Segoe UI", sans-serif;
+    -fx-text-fill: #1E90FF; /* Dodger blue color for the text */
+    -fx-background-color: transparent;
+    -fx-font-weight: bold;
+    -fx-padding: 5px;
+}
+
diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml
index 8d0538bcc5d..8e7ce8210a4 100644
--- a/src/main/resources/view/MainWindow.fxml
+++ b/src/main/resources/view/MainWindow.fxml
@@ -19,17 +19,19 @@
   <scene>
     <Scene>
       <stylesheets>
-        <URL value="@DarkTheme.css" />
-        <URL value="@Extensions.css" />
+<!--        <URL value="@DarkTheme.css" />-->
+<!--        <URL value="@Extensions.css" />-->
+        <URL value="@CampusConnectTheme.css" />
+        <URL value="@CampusConnectExtensions.css" />
       </stylesheets>
 
       <VBox>
         <MenuBar fx:id="menuBar" VBox.vgrow="NEVER">
           <Menu mnemonicParsing="false" text="File">
-            <MenuItem mnemonicParsing="false" onAction="#handleExit" text="Exit" />
+            <MenuItem mnemonicParsing="false" onAction="#handleExit" text="Exit"/>
           </Menu>
           <Menu mnemonicParsing="false" text="Help">
-            <MenuItem fx:id="helpMenuItem" mnemonicParsing="false" onAction="#handleHelp" text="Help" />
+            <MenuItem fx:id="helpMenuItem" mnemonicParsing="false" onAction="#handleHelp" text="Help"/>
           </Menu>
         </MenuBar>
 
diff --git a/src/main/resources/view/ResultDisplay.fxml b/src/main/resources/view/ResultDisplay.fxml
index 01b691792a9..6dbecb4ceea 100644
--- a/src/main/resources/view/ResultDisplay.fxml
+++ b/src/main/resources/view/ResultDisplay.fxml
@@ -5,5 +5,5 @@
 
 <StackPane fx:id="placeHolder" styleClass="pane-with-border" xmlns="http://javafx.com/javafx/17"
     xmlns:fx="http://javafx.com/fxml/1">
-  <TextArea fx:id="resultDisplay" editable="false" styleClass="result-display"/>
+  <TextArea fx:id="resultDisplay" editable="false" styleClass="result-display" prefHeight="200"/>
 </StackPane>