Merge pull request #195 from bryanwee023/rebrand-aesthetics

Rebrand aesthetics
AY2122S1-CS2103-F10-2 · Nov 6, 2021 · 4deec40 · 4deec40
2 parents dd73f29 + 227287f
commit 4deec40
Show file tree

Hide file tree

Showing 21 changed files with 80 additions and 64 deletions.
diff --git a/docs/images/Ui.png b/docs/images/Ui.png
diff --git a/docs/images/screenshots/add_item.png b/docs/images/screenshots/add_item.png
diff --git a/docs/images/screenshots/clear.png b/docs/images/screenshots/clear.png
diff --git a/docs/images/screenshots/corder.png b/docs/images/screenshots/corder.png
diff --git a/docs/images/screenshots/delete_item.png b/docs/images/screenshots/delete_item.png
diff --git a/docs/images/screenshots/edit_item.png b/docs/images/screenshots/edit_item.png
diff --git a/docs/images/screenshots/eorder.png b/docs/images/screenshots/eorder.png
diff --git a/docs/images/screenshots/find_item.png b/docs/images/screenshots/find_item.png
diff --git a/docs/images/screenshots/iorder.png b/docs/images/screenshots/iorder.png
diff --git a/docs/images/screenshots/list_items.png b/docs/images/screenshots/list_items.png
diff --git a/docs/images/screenshots/remove_item.png b/docs/images/screenshots/remove_item.png
diff --git a/docs/images/screenshots/sorder.png b/docs/images/screenshots/sorder.png
diff --git a/docs/images/screenshots/sort_items.png b/docs/images/screenshots/sort_items.png
diff --git a/src/main/java/seedu/address/model/display/ItemCard.java b/src/main/java/seedu/address/model/display/ItemCard.java
@@ -52,7 +52,7 @@ public ItemCard(Item item, int displayedIndex) {
         this.item = item;
         index.setText(displayedIndex + ". ");
         name.setText(item.getName().fullName);
-        id.setText(String.format("#%06d", item.getId()));
+        id.setText(String.format("%06d", item.getId()));
         count.setText(String.format("Quantity: %d", item.getCount()));
         costPrice.setText(String.format("Cost Price: $ %.2f", item.getCostPrice()));
         salesPrice.setText(String.format("Sales Price: $ %.2f", item.getSalesPrice()));

diff --git a/src/main/java/seedu/address/model/item/Item.java b/src/main/java/seedu/address/model/item/Item.java
@@ -174,7 +174,7 @@ public int hashCode() {
     public String toString() {
         final StringBuilder builder = new StringBuilder();
         builder.append(getName())
-                .append(String.format("; count: %06d", getId()))
+                .append(String.format("; id: %06d", getId()))
                 .append("; count: ")
                 .append(getCount())
                 .append(String.format("; costPrice: $%.2f", getCostPrice()))

diff --git a/src/main/resources/images/barcode.png b/src/main/resources/images/barcode.png
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: white;
+    background-color: white; /* Used in the default.html file */
 }
 
 .label {
@@ -13,14 +13,14 @@
 .label-bright {
     -fx-font-size: 11pt;
     -fx-font-family: "Open Sans Semibold";
-    -fx-text-fill: white;
+    -fx-text-fill: black;
     -fx-opacity: 1;
 }
 
 .label-header {
     -fx-font-size: 32pt;
     -fx-font-family: "Open Sans Light";
-    -fx-text-fill: white;
+    -fx-text-fill: black;
     -fx-opacity: 1;
 }
 
@@ -40,9 +40,9 @@
 }
 
 .table-view {
-    -fx-base: #1d1d1d;
-    -fx-control-inner-background: #1d1d1d;
-    -fx-background-color: #1d1d1d;
+    -fx-base: #f5f6fa;
+    -fx-control-inner-background: #f5f6fa;
+    -fx-background-color: #f5f6fa;
     -fx-table-cell-border-color: transparent;
     -fx-table-header-border-color: transparent;
     -fx-padding: 5;
@@ -67,7 +67,7 @@
 .table-view .column-header .label {
     -fx-font-size: 20pt;
     -fx-font-family: "Open Sans Light";
-    -fx-text-fill: white;
+    -fx-text-fill: black;
     -fx-alignment: center-left;
     -fx-opacity: 1;
 }
@@ -77,20 +77,20 @@
 }
 
 .split-pane:horizontal .split-pane-divider {
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(#f5f6fa, 20%);
     -fx-border-color: transparent transparent transparent #4d4d4d;
 }
 
 .split-pane {
     -fx-border-radius: 1;
     -fx-border-width: 1;
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(#f5f6fa, 20%);
 }
 
 .list-view {
     -fx-background-insets: 0;
     -fx-padding: 0;
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(#f5f6fa, 20%);
 }
 
 .list-cell {
@@ -100,57 +100,58 @@
 }
 
 .list-cell:filled:even {
-    -fx-background-color: #3c3e3f;
+    -fx-background-color: #f2f3f7;
 }
 
 .list-cell:filled:odd {
-    -fx-background-color: #515658;
-}
-
-.list-cell:filled:selected {
-    -fx-background-color: #424d5f;
-}
-
-.list-cell:filled:selected #cardPane {
-    -fx-border-color: #3e7b91;
-    -fx-border-width: 1;
+    -fx-background-color: #f5f6fa;
 }
 
 .list-cell .label {
-    -fx-text-fill: white;
+    -fx-text-fill: #3d238c;
 }
 
 .cell_big_label {
     -fx-font-family: "Open Sans Semibold";
     -fx-font-size: 16px;
-    -fx-text-fill: #010504;
+    -fx-text-fill: #3d238c;
+}
+
+.cell_big_label_tinted {
+    -fx-font-family: "Open Sans Semibold";
+    -fx-font-size: 16px;
+    -fx-text-fill: #00a17b !important;
 }
 
 .cell_small_label {
     -fx-font-family: "Open Sans Regular";
     -fx-font-size: 13px;
-    -fx-text-fill: #010504;
+    -fx-text-fill: black !important;
 }
 
+/* Command Box */
 .stack-pane {
-     -fx-background-color: derive(#1d1d1d, 20%);
+     -fx-background-color: white;
+     -fx-background-radius: 5px;
+     -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.1), 10, 0, 0, 0);
 }
 
 .pane-with-border {
-     -fx-background-color: derive(#1d1d1d, 20%);
-     -fx-border-color: derive(#1d1d1d, 10%);
+     -fx-background-color: white;
+     -fx-border-color: white;
      -fx-border-top-width: 1px;
 }
 
 .status-bar {
-    -fx-background-color: derive(#1d1d1d, 30%);
+    -fx-background-color: derive(#e4dbff, 30%);
 }
 
 .result-display {
-    -fx-background-color: transparent;
+    -fx-background-color: #f5f6fa;
+    -fx-background-radius: 5px;
     -fx-font-family: "Open Sans Light";
     -fx-font-size: 13pt;
-    -fx-text-fill: white;
+    -fx-text-fill: #7f2df5;
 }
 
 .result-display .label {
@@ -159,54 +160,63 @@
 
 .status-bar .label {
     -fx-font-family: "Open Sans Light";
-    -fx-text-fill: white;
+    -fx-text-fill: #666666;
     -fx-padding: 4px;
     -fx-pref-height: 30px;
 }
 
 .status-bar-with-border {
-    -fx-background-color: derive(#1d1d1d, 30%);
-    -fx-border-color: derive(#1d1d1d, 25%);
+    -fx-background-color: derive(#f5f6fa, 30%);
+    -fx-border-color: derive(#f5f6fa, 25%);
     -fx-border-width: 1px;
 }
 
 .status-bar-with-border .label {
-    -fx-text-fill: white;
+    -fx-text-fill: #666666;
 }
 
 .grid-pane {
-    -fx-background-color: derive(#1d1d1d, 30%);
-    -fx-border-color: derive(#1d1d1d, 30%);
+    -fx-background-color: #f5f6fa;
+    -fx-border-color: #f5f6fa;
     -fx-border-width: 1px;
 }
 
 .grid-pane .stack-pane {
-    -fx-background-color: derive(#1d1d1d, 30%);
+    -fx-background-color: #f5f6fa;
 }
 
 .context-menu {
-    -fx-background-color: derive(#1d1d1d, 50%);
+    -fx-background-color: #f5f6fa;
 }
 
 .context-menu .label {
-    -fx-text-fill: white;
+    -fx-text-fill: black;
 }
 
 .menu-bar {
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(#942bf0, 20%);
 }
 
 .menu-bar .label {
     -fx-font-size: 14pt;
-    -fx-font-family: "Open Sans Light";
+    -fx-font-family: "Open Sans Semibold";
     -fx-text-fill: white;
     -fx-opacity: 0.9;
 }
 
+.menu:showing .label {
+    -fx-text-fill: #3d238c;
+}
+
 .menu .left-container {
     -fx-background-color: black;
 }
 
+.menu-bar .menu-button:hover, .menu-bar .menu-button:focused, .menu-bar .menu-button:showing {
+    -fx-background: transparent;
+    -fx-cursor: hand;
+}
+
 /*
  * Metro style Push Button
  * Author: Pedro Duque Vieira
@@ -244,49 +254,49 @@
 .button:disabled, .button:default:disabled {
     -fx-opacity: 0.4;
     -fx-background-color: #1d1d1d;
-    -fx-text-fill: white;
+    -fx-text-fill: black;
 }
 
 .button:default {
     -fx-background-color: -fx-focus-color;
-    -fx-text-fill: #ffffff;
+    -fx-text-fill: black;
 }
 
 .button:default:hover {
     -fx-background-color: derive(-fx-focus-color, 30%);
 }
 
 .dialog-pane {
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: #f5f6fa;
 }
 
 .dialog-pane > *.button-bar > *.container {
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: #f5f6fa;
 }
 
 .dialog-pane > *.label.content {
     -fx-font-size: 14px;
     -fx-font-weight: bold;
-    -fx-text-fill: white;
+    -fx-text-fill: black;
 }
 
 .dialog-pane:header *.header-panel {
-    -fx-background-color: derive(#1d1d1d, 25%);
+    -fx-background-color: derive(#f5f6fa, 25%);
 }
 
 .dialog-pane:header *.header-panel *.label {
     -fx-font-size: 18px;
     -fx-font-style: italic;
     -fx-fill: white;
-    -fx-text-fill: white;
+    -fx-text-fill: black;
 }
 
 .scroll-bar {
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: transparent;
 }
 
 .scroll-bar .thumb {
-    -fx-background-color: derive(#1d1d1d, 50%);
+    -fx-background-color: derive(#cccccc, 50%);
     -fx-background-insets: 3;
 }
 
@@ -320,21 +330,20 @@
 #commandTextField {
     -fx-background-color: transparent #383838 transparent #383838;
     -fx-background-insets: 0;
-    -fx-border-color: #383838 #383838 #ffffff #383838;
     -fx-border-insets: 0;
     -fx-border-width: 1;
     -fx-font-family: "Open Sans Light";
     -fx-font-size: 13pt;
-    -fx-text-fill: white;
+    -fx-text-fill: black;
 }
 
-#filterField, #personListPanel, #personWebpage {
+#filterField, #displayListPanel, #personWebpage {
     -fx-effect: innershadow(gaussian, black, 10, 0, 0, 0);
 }
 
 #resultDisplay .content {
-    -fx-background-color: transparent, #383838, transparent, #383838;
-    -fx-background-radius: 0;
+    -fx-background-color: transparent, #f5f6fa, transparent, #f5f6fa;
+    -fx-background-radius: 5px;
 }
 
 #tags {
@@ -344,7 +353,7 @@
 
 #tags .label {
     -fx-text-fill: white;
-    -fx-background-color: #3e7b91;
+    -fx-background-color: #cd70ff;
     -fx-padding: 1 3 1 3;
     -fx-border-radius: 2;
     -fx-background-radius: 2;

diff --git a/src/main/resources/view/Extensions.css b/src/main/resources/view/Extensions.css
@@ -1,11 +1,18 @@
 
 .error {
-    -fx-text-fill: #d06651 !important; /* The error class should always override the default text-fill style */
+    -fx-text-fill: #ff9e9e !important; /* The error class should always override the default text-fill style */
 }
 
 .list-cell:empty {
     /* Empty cells will not have alternating colours */
-    -fx-background: #383838;
+    -fx-background: #f5f6fa;
+}
+
+.barcode_label {
+    -fx-font-family: "Open Sans Semibold";
+    -fx-font-size: 15px;
+    -fx-text-fill: #4d4d4d !important;
+    -fx-graphic: url("../images/barcode.png");
 }
 
 .tag-selector {

diff --git a/src/main/resources/view/ItemListCard.fxml b/src/main/resources/view/ItemListCard.fxml
@@ -28,7 +28,7 @@
         <Label fx:id="name" text="\$first" styleClass="cell_big_label" />
       </HBox>
       <FlowPane fx:id="tags" />
-      <Label fx:id="id" styleClass="cell_small_label" text="\$no ID" />
+      <Label fx:id="id" styleClass="barcode_label" text="\$no ID" />
       <Label fx:id="count" styleClass="cell_small_label" text="\$0" />
       <Label fx:id="costPrice" styleClass="cell_small_label" text="\$0" />
       <Label fx:id="salesPrice" styleClass="cell_small_label" text="\$0" />

diff --git a/src/main/resources/view/TransactionListCard.fxml b/src/main/resources/view/TransactionListCard.fxml
@@ -26,7 +26,7 @@
         </Label>
         <Label fx:id="timestamp" text="transaction" styleClass="cell_big_label" />
         <Region HBox.hgrow="ALWAYS" />
-        <Label fx:id="id" alignment="CENTER_RIGHT" text="id" styleClass="cell_big_label" />
+        <Label fx:id="id" alignment="CENTER_RIGHT" text="id" styleClass="cell_big_label_tinted" />
       </HBox>
       <Label fx:id="totalPrice" styleClass="cell_small_label" text="Total price: -" />
       <Label fx:id="totalItems" styleClass="cell_small_label" text="Total items: -" />

diff --git a/src/test/java/seedu/address/logic/commands/AddCommandIntegrationTest.java b/src/test/java/seedu/address/logic/commands/AddCommandIntegrationTest.java
@@ -50,7 +50,7 @@ public void execute_newItem_addSuccessful() {
 
         AddCommand addCommand = new AddCommand(validDescriptor);
         String expectedMessage = String.format(AddCommand.MESSAGE_SUCCESS_NEW, validItem);
-        System.out.println(expectedMessage);
+
         Model expectedModel = new ModelManager();
         expectedModel.addItem(validItem);
         expectedModel.addCostBookKeeping(BAGEL.getCostPrice() * 5);