Merge pull request #126 from NatLeong/add-ui-colours

Fix UI aesthetics
nus-cs2103-AY2324S2 · Apr 4, 2024 · 933ee3b · 933ee3b
2 parents 04c1abc + c7c3228
commit 933ee3b
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 55 deletions.
diff --git a/src/main/java/seedu/address/logic/Messages.java b/src/main/java/seedu/address/logic/Messages.java
@@ -63,9 +63,7 @@ public static String format(Person person) {
                 .append("Diagnosis: ")
                 .append(Optional.ofNullable(person.getDiagnosis()).map(Object::toString).orElse("-")).append("\n")
                 .append("Symptom: ")
-                .append(Optional.ofNullable(person.getSymptom()).map(Object::toString).orElse("-")).append("\n")
-                .append("Tags: ");
-        person.getTags().forEach(builder::append);
+                .append(Optional.ofNullable(person.getSymptom()).map(Object::toString).orElse("-")).append("\n");
         return builder.toString();
     }
 

diff --git a/src/main/java/seedu/address/ui/PersonCard.java b/src/main/java/seedu/address/ui/PersonCard.java
@@ -15,6 +15,10 @@
 public class PersonCard extends UiPart<Region> {
 
     private static final String FXML = "PersonListCard.fxml";
+    private static final Color customGreen = Color.web("#81C784");
+    private static final Color customYellow = Color.web("#FFF176");
+    private static final Color customRed = Color.web("#EF5350");
+
 
     /**
      * Note: Certain keywords such as "location" and "resources" are reserved keywords in JavaFX.
@@ -57,16 +61,16 @@ public PersonCard(Person person, int displayedIndex) {
     public void updateStatusCircle(Status status) {
         switch (status.getStatusType()) {
         case HEALTHY:
-            statusCircle.setFill(Color.GREEN);
-            statusCircle.setStroke(Color.GREEN);
+            statusCircle.setFill(customGreen);
+            statusCircle.setStroke(customGreen);
             break;
         case UNWELL:
-            statusCircle.setFill(Color.RED);
-            statusCircle.setStroke(Color.RED);
+            statusCircle.setFill(customRed);
+            statusCircle.setStroke(customRed);
             break;
         case PENDING:
-            statusCircle.setFill(Color.YELLOW);
-            statusCircle.setStroke(Color.YELLOW);
+            statusCircle.setFill(customYellow);
+            statusCircle.setStroke(customYellow);
             break;
         default:
             statusCircle.setFill(Color.GREY);

diff --git a/src/main/resources/view/CommandBox.fxml b/src/main/resources/view/CommandBox.fxml
@@ -8,13 +8,13 @@
 <?import javafx.scene.image.Image?>
 <?import javafx.geometry.Insets?>
 <StackPane styleClass="pane-with-border" prefHeight="60" xmlns="http://javafx.com/javafx/17"
-           xmlns:fx="http://javafx.com/fxml/1" style="-fx-background-color: #818589;">
+           xmlns:fx="http://javafx.com/fxml/1" style="-fx-background-color: #a7b0ae;">
     <HBox alignment="CENTER_LEFT" spacing="5">
         <ImageView fitWidth="25" fitHeight="25">
             <Image url="@/images/search_icon.png"/>
         </ImageView>
         <TextField fx:id="commandTextField" prefHeight="45" HBox.hgrow="ALWAYS" onAction="#handleCommandEntered"
-                   promptText="Input command here..." style="-fx-background-color: transparent; -fx-border-color: #818589;" />
+                   promptText="Input command here..." style="-fx-background-color: transparent; -fx-border-color: #a7b0ae;" />
     </HBox>
     <padding>
         <Insets bottom="5" left="10" right="10" top="5" />

diff --git a/src/main/resources/view/DarkTheme.css b/src/main/resources/view/DarkTheme.css
@@ -1,6 +1,6 @@
 .background {
-    -fx-background-color: derive(#1d1d1d, 20%);
-    background-color: #383838; /* Used in the default.html file */
+    -fx-background-color: derive(#b9c4c0, 20%);
+    background-color: #b9c4c0; /* Used in the default.html file */
 }
 
 .label {
@@ -40,9 +40,9 @@
 }
 
 .table-view {
-    -fx-base: #1d1d1d;
-    -fx-control-inner-background: #1d1d1d;
-    -fx-background-color: #1d1d1d;
+    -fx-base: #b9c4c0;
+    -fx-control-inner-background: #b9c4c0;
+    -fx-background-color: #b9c4c0;
     -fx-table-cell-border-color: transparent;
     -fx-table-header-border-color: transparent;
     -fx-padding: 5;
@@ -77,20 +77,20 @@
 }
 
 .split-pane:horizontal .split-pane-divider {
-    -fx-background-color: derive(#1d1d1d, 20%);
-    -fx-border-color: transparent transparent transparent #4d4d4d;
+    -fx-background-color: derive(#b9c4c0, 20%);
+    -fx-border-color: transparent transparent transparent #b9c4c0;
 }
 
 .split-pane {
     -fx-border-radius: 1;
     -fx-border-width: 1;
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(#b9c4c0, 20%);
 }
 
 .list-view {
     -fx-background-insets: 0;
     -fx-padding: 0;
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(#b9c4c0, 20%);
 }
 
 .list-cell {
@@ -100,57 +100,57 @@
 }
 
 .list-cell:filled:even {
-    -fx-background-color: #3c3e3f;
+    -fx-background-color: #ebf2ef;
 }
 
 .list-cell:filled:odd {
-    -fx-background-color: #515658;
+    -fx-background-color: #dee3e1;
 }
 
 .list-cell:filled:selected {
-    -fx-background-color: #424d5f;
+    -fx-background-color: #97b0a5;
 }
 
 .list-cell:filled:selected #cardPane {
-    -fx-border-color: #3e7b91;
+    -fx-border-color: #b9c4c0;
     -fx-border-width: 1;
 }
 
 .list-cell .label {
-    -fx-text-fill: white;
+    -fx-text-fill: #676767;
 }
 
 .cell_big_label {
-    -fx-font-family: "Segoe UI Semibold";
+    -fx-font-family: "Segoe UI Bold";
     -fx-font-size: 16px;
-    -fx-text-fill: #010504;
+    -fx-text-fill: #676767;
 }
 
 .cell_small_label {
     -fx-font-family: "Segoe UI";
     -fx-font-size: 13px;
-    -fx-text-fill: #010504;
+    -fx-text-fill: #676767;
 }
 
 .stack-pane {
-     -fx-background-color: derive(#1d1d1d, 20%);
+     -fx-background-color: derive(#b9c4c0, 20%);
 }
 
 .pane-with-border {
-     -fx-background-color: derive(#1d1d1d, 20%);
-     -fx-border-color: derive(#1d1d1d, 10%);
+     -fx-background-color: derive(#b9c4c0, 20%);
+     -fx-border-color: derive(#b9c4c0, 10%);
      -fx-border-top-width: 1px;
 }
 
 .status-bar {
-    -fx-background-color: derive(#1d1d1d, 30%);
+    -fx-background-color: derive(#469073, 30%);
 }
 
 .result-panel {
-    -fx-background-color: transparent;
+    -fx-background-color: #a7b0ae;
     -fx-font-family: "Segoe UI Light";
-    -fx-font-size: 13pt;
-    -fx-text-fill: white;
+    -fx-font-size: 15pt;
+    -fx-text-fill: #424242;
 }
 
 .result-panel .label {
@@ -165,8 +165,8 @@
 }
 
 .status-bar-with-border {
-    -fx-background-color: derive(#1d1d1d, 30%);
-    -fx-border-color: derive(#1d1d1d, 25%);
+    -fx-background-color: derive(#469073, 30%);
+    -fx-border-color: derive(#469073, 25%);
     -fx-border-width: 1px;
 }
 
@@ -175,25 +175,25 @@
 }
 
 .grid-pane {
-    -fx-background-color: derive(#1d1d1d, 30%);
-    -fx-border-color: derive(#1d1d1d, 30%);
+    -fx-background-color: derive(#b9c4c0, 30%);
+    -fx-border-color: derive(#b9c4c0, 30%);
     -fx-border-width: 1px;
 }
 
 .grid-pane .stack-pane {
-    -fx-background-color: derive(#1d1d1d, 30%);
+    -fx-background-color: derive(#b9c4c0, 30%);
 }
 
 .context-menu {
-    -fx-background-color: derive(#1d1d1d, 50%);
+    -fx-background-color: derive(#b9c4c0, 50%);
 }
 
 .context-menu .label {
     -fx-text-fill: white;
 }
 
 .menu-bar {
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(#b9c4c0, 20%);
 }
 
 .menu-bar .label {
@@ -204,7 +204,7 @@
 }
 
 .menu .left-container {
-    -fx-background-color: black;
+    -fx-background-color: #b9c4c0;
 }
 
 /*
@@ -217,10 +217,10 @@
     -fx-border-color: #e2e2e2;
     -fx-border-width: 2;
     -fx-background-radius: 0;
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: #b9c4c0;
     -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
     -fx-font-size: 11pt;
-    -fx-text-fill: #d8d8d8;
+    -fx-text-fill: #676767;
     -fx-background-insets: 0 0 0 0, 0, 1, 2;
 }
 
@@ -243,7 +243,7 @@
 
 .button:disabled, .button:default:disabled {
     -fx-opacity: 0.4;
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: #b9c4c0;
     -fx-text-fill: white;
 }
 
@@ -257,11 +257,11 @@
 }
 
 .dialog-pane {
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: #FDFFFE;
 }
 
 .dialog-pane > *.button-bar > *.container {
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: #b9c4c0;
 }
 
 .dialog-pane > *.label.content {
@@ -271,7 +271,7 @@
 }
 
 .dialog-pane:header *.header-panel {
-    -fx-background-color: derive(#1d1d1d, 25%);
+    -fx-background-color: derive(#b9c4c0, 25%);
 }
 
 .dialog-pane:header *.header-panel *.label {
@@ -282,11 +282,11 @@
 }
 
 .scroll-bar {
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(#fdfffe, 20%);
 }
 
 .scroll-bar .thumb {
-    -fx-background-color: derive(#1d1d1d, 50%);
+    -fx-background-color: derive(#b9c4c0, 50%);
     -fx-background-insets: 3;
 }
 
@@ -314,7 +314,7 @@
 
 #commandTypeLabel {
     -fx-font-size: 11px;
-    -fx-text-fill: #F70D1A;
+    -fx-text-fill: #676767;
 }
 
 #commandTextField {
@@ -333,7 +333,7 @@
 }
 
 #resultPanel .content {
-    -fx-background-color: transparent, #383838, transparent, #383838;
+    -fx-background-color: #a7b0ae, #a7b0ae, #a7b0ae, #a7b0ae;
     -fx-background-radius: 0;
 }
 

diff --git a/src/main/resources/view/Extensions.css b/src/main/resources/view/Extensions.css
@@ -5,7 +5,7 @@
 
 .list-cell:empty {
     /* Empty cells will not have alternating colours */
-    -fx-background: #383838;
+    -fx-background: #FDFFFE;
 }
 
 .tag-selector {

diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml
@@ -25,7 +25,7 @@
             </stylesheets>
 
             <VBox>
-                <MenuBar fx:id="menuBar" style="-fx-background-color: #2FAD66;" VBox.vgrow="NEVER">
+                <MenuBar fx:id="menuBar" style="-fx-background-color: #469073;" VBox.vgrow="NEVER">
                   <Menu mnemonicParsing="false" text="Help" style="-fx-font-family: Arial; -fx-font-size: 14px;">
                     <MenuItem fx:id="helpMenuItem" mnemonicParsing="false" onAction="#handleHelp" text="Help" style="-fx-font-family: Arial; -fx-font-size: 14px;" />
                   </Menu>