From 25457c550804ce8f03dddc741595a837b7d0544c Mon Sep 17 00:00:00 2001
From: Wang Shiyao <furytoar@gmail.com>
Date: Sun, 3 Nov 2019 18:44:17 +0800
Subject: [PATCH] fix: update UI css: Liberry Theme

---
 .../address/logic/commands/SetCommand.java    |   5 +-
 .../java/seedu/address/ui/MainWindow.java     |   1 -
 src/main/java/seedu/address/ui/UiManager.java |   2 +-
 src/main/resources/view/BookListCard.fxml     |  42 ++-
 src/main/resources/view/BookListPanel.fxml    |   2 +-
 src/main/resources/view/BorrowerPanel.fxml    |  16 +-
 src/main/resources/view/CommandBox.fxml       |   2 +-
 src/main/resources/view/LiBerryTheme.css      | 277 ++++++++++++++++++
 src/main/resources/view/MainWindow.fxml       |  24 +-
 src/main/resources/view/ResultDisplay.fxml    |   5 +-
 10 files changed, 337 insertions(+), 39 deletions(-)
 create mode 100644 src/main/resources/view/LiBerryTheme.css

diff --git a/src/main/java/seedu/address/logic/commands/SetCommand.java b/src/main/java/seedu/address/logic/commands/SetCommand.java
index 37e9f9da6d3..a89616d4e54 100644
--- a/src/main/java/seedu/address/logic/commands/SetCommand.java
+++ b/src/main/java/seedu/address/logic/commands/SetCommand.java
@@ -26,10 +26,9 @@ public class SetCommand extends ReversibleCommand {
 
     public static final String MESSAGE_USAGE = COMMAND_WORD + ": Sets custom user settings of the application. \n"
             + "Existing values will be overwritten by the input values.\n"
-            + "Parameters: INDEX (must be a positive integer) \n"
             + "[" + PREFIX_LOAN_PERIOD + "LOAN_PERIOD] "
-            + "[" + PREFIX_RENEW_PERIOD + "RENEW_PERIOD]\n"
-            + "[" + PREFIX_FINE_INCREMENT + "FINE_INCREMENT]\n"
+            + "[" + PREFIX_RENEW_PERIOD + "RENEW_PERIOD] "
+            + "[" + PREFIX_FINE_INCREMENT + "FINE_INCREMENT] "
             + "[" + PREFIX_MAX_RENEWS + "MAX_RENEWS]\n"
             + "Example: " + COMMAND_WORD + " "
             + PREFIX_LOAN_PERIOD + "14 "
diff --git a/src/main/java/seedu/address/ui/MainWindow.java b/src/main/java/seedu/address/ui/MainWindow.java
index a7e8e6c6ffe..8c4bccd42ed 100644
--- a/src/main/java/seedu/address/ui/MainWindow.java
+++ b/src/main/java/seedu/address/ui/MainWindow.java
@@ -68,7 +68,6 @@ public MainWindow(Stage primaryStage, Logic logic) {
         } else {
             mode.setText(NORMAL_MODE);
         }
-        resultDisplayPlaceholder.setStyle("-fx-background-color: #2b2b2b#2b2b2b");
     }
 
     public Stage getPrimaryStage() {
diff --git a/src/main/java/seedu/address/ui/UiManager.java b/src/main/java/seedu/address/ui/UiManager.java
index fca2157ad18..000949baca9 100644
--- a/src/main/java/seedu/address/ui/UiManager.java
+++ b/src/main/java/seedu/address/ui/UiManager.java
@@ -63,7 +63,7 @@ void showAlertDialogAndWait(Alert.AlertType type, String title, String headerTex
     private static void showAlertDialogAndWait(Stage owner, AlertType type, String title, String headerText,
                                                String contentText) {
         final Alert alert = new Alert(type);
-        alert.getDialogPane().getStylesheets().add("view/DarkTheme.css");
+        alert.getDialogPane().getStylesheets().add("view/LiBerryTheme.css");
         alert.initOwner(owner);
         alert.setTitle(title);
         alert.setHeaderText(headerText);
diff --git a/src/main/resources/view/BookListCard.fxml b/src/main/resources/view/BookListCard.fxml
index 31cb0ce25c8..192d19535c2 100644
--- a/src/main/resources/view/BookListCard.fxml
+++ b/src/main/resources/view/BookListCard.fxml
@@ -10,18 +10,17 @@
 <?import javafx.scene.layout.Region?>
 <?import javafx.scene.layout.RowConstraints?>
 <?import javafx.scene.layout.VBox?>
-<?import javafx.scene.text.Font?>
 
-<HBox id="cardPane" fx:id="cardPane" xmlns="http://javafx.com/javafx/11.0.0" xmlns:fx="http://javafx.com/fxml/1">
+<HBox id="cardPane" fx:id="cardPane" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <GridPane HBox.hgrow="ALWAYS">
     <columnConstraints>
       <ColumnConstraints hgrow="SOMETIMES" maxWidth="Infinity" minWidth="10.0" prefWidth="205.0" />
     </columnConstraints>
-    <VBox alignment="CENTER_LEFT" minHeight="105" GridPane.columnIndex="0" GridPane.hgrow="ALWAYS">
+    <VBox alignment="CENTER_LEFT" minHeight="80" GridPane.columnIndex="0" GridPane.hgrow="ALWAYS">
       <padding>
         <Insets bottom="5" left="15" right="5" top="5" />
       </padding>
-      <HBox alignment="CENTER_LEFT" spacing="5">
+      <HBox alignment="CENTER_LEFT" spacing="5.0">
         <Label fx:id="id" styleClass="cell_big_label">
           <minWidth>
             <!-- Ensures that the label text is never truncated -->
@@ -29,20 +28,35 @@
           </minWidth>
         </Label>
         <Label fx:id="title" styleClass="cell_big_label" text="\$first" />
+          <Pane HBox.hgrow="ALWAYS" />
+          <Label fx:id="serialNumber" alignment="CENTER_RIGHT" styleClass="cell_big_label" text="\$serialNumber">
+              <minWidth>
+                  <!-- Ensures that the label text is never truncated -->
+                  <Region fx:constant="USE_PREF_SIZE" />
+              </minWidth>
+              <HBox.margin>
+                  <Insets right="30.0" />
+               </HBox.margin>
+            </Label>
       </HBox>
-      <FlowPane fx:id="genres" />
-      <Label fx:id="serialNumber" styleClass="cell_small_label" text="\$serialNumber" />
-      <Label fx:id="author" styleClass="cell_small_label" text="\$author" />
+        <Label fx:id="author" styleClass="cell_small_label" text="\$author">
+            <VBox.margin>
+               <Insets bottom="1.0" />
+            </VBox.margin></Label>
+      <FlowPane fx:id="genres">
+            <VBox.margin>
+               <Insets bottom="2.0" top="2.0" />
+            </VBox.margin></FlowPane>
     </VBox>
       <rowConstraints>
          <RowConstraints />
       </rowConstraints>
   </GridPane>
-   <Pane maxWidth="100.0" minHeight="105.0" minWidth="120.0" prefHeight="105.0" prefWidth="120.0">
-      <children>
-          <Label fx:id="loanStatus" layoutY="41.0" text="" />
-          <Label fx:id="dueDate" layoutY="62.0" text="" styleClass="cell_small_label" />
-          <Label fx:id="renewCount" layoutY="78.0" text="" styleClass="cell_small_label" />
-      </children>
-   </Pane>
+    <VBox minHeight="70.0" minWidth="120.0" prefHeight="70.0" prefWidth="150.0">
+        <Pane VBox.vgrow="ALWAYS" />
+        <Label fx:id="loanStatus" text="" />
+        <Label fx:id="dueDate" styleClass="cell_small_label" text="" />
+        <Label fx:id="renewCount" styleClass="cell_small_label" text="" />
+        <Pane VBox.vgrow="ALWAYS" />
+    </VBox>
 </HBox>
diff --git a/src/main/resources/view/BookListPanel.fxml b/src/main/resources/view/BookListPanel.fxml
index 895468d8e27..5e45690098e 100644
--- a/src/main/resources/view/BookListPanel.fxml
+++ b/src/main/resources/view/BookListPanel.fxml
@@ -4,5 +4,5 @@
 <?import javafx.scene.layout.VBox?>
 
 <VBox xmlns="http://javafx.com/javafx/11.0.0" xmlns:fx="http://javafx.com/fxml/1">
-  <ListView fx:id="bookListView" VBox.vgrow="ALWAYS" />
+  <ListView fx:id="bookListView" styleClass="listing-panel" VBox.vgrow="ALWAYS" />
 </VBox>
diff --git a/src/main/resources/view/BorrowerPanel.fxml b/src/main/resources/view/BorrowerPanel.fxml
index d4d8dc4afc8..e816ea7bda6 100644
--- a/src/main/resources/view/BorrowerPanel.fxml
+++ b/src/main/resources/view/BorrowerPanel.fxml
@@ -5,21 +5,25 @@
 <?import javafx.scene.control.ListView?>
 <?import javafx.scene.layout.VBox?>
 
-<VBox fx:id="borrowerPanel" prefWidth="500.0" minWidth="500" maxWidth="500" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
-       <Label fx:id="name" prefHeight="60.0" styleClass="result-display" text="Borrower: ">
+<?import javafx.scene.layout.Pane?>
+<VBox fx:id="borrowerPanel" prefHeight="100.0" prefWidth="500.0" minWidth="500" maxWidth="500"
+      xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
+    <VBox prefHeight="120.0">
+    <Label fx:id="name" prefHeight="20.0" styleClass="borrower-particulars-bold" text="Borrower:">
          <padding>
-            <Insets left="20.0" />
+            <Insets left="20.0" top="10.0"/>
          </padding>
        </Label>
-       <Label fx:id="id" prefHeight="60.0" styleClass="result-display" text="ID:">
+       <Label fx:id="id" prefHeight="20.0" styleClass="borrower-particulars" text="ID:">
          <padding>
             <Insets left="20.0" />
          </padding>
        </Label>
-        <Label fx:id="fines" prefHeight="60.0" styleClass="result-display" text="ID:">
+        <Label fx:id="fines" prefHeight="20.0" styleClass="borrower-particulars" text="Fines:">
             <padding>
                 <Insets left="20.0" />
             </padding>
         </Label>
-    <ListView fx:id="bookListView" VBox.vgrow="ALWAYS" />
+    </VBox>
+    <ListView fx:id="bookListView" styleClass="listing-panel" VBox.vgrow="ALWAYS" />
 </VBox>
diff --git a/src/main/resources/view/CommandBox.fxml b/src/main/resources/view/CommandBox.fxml
index b259411826f..c46c0822864 100644
--- a/src/main/resources/view/CommandBox.fxml
+++ b/src/main/resources/view/CommandBox.fxml
@@ -6,5 +6,5 @@
 
 <TextField fx:id="commandTextField" maxHeight="35.0" maxWidth="Infinity" minHeight="35.0" minWidth="0.0"
            onAction="#handleCommandEntered" prefHeight="35.0" prefWidth="600.0" promptText="Enter command here..."
-           AnchorPane.leftAnchor="5" AnchorPane.rightAnchor="5" xmlns="http://javafx.com/javafx/11.0.0"
+           AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="5" xmlns="http://javafx.com/javafx/11.0.0"
            xmlns:fx="http://javafx.com/fxml/1" />
diff --git a/src/main/resources/view/LiBerryTheme.css b/src/main/resources/view/LiBerryTheme.css
new file mode 100644
index 00000000000..2c419184b34
--- /dev/null
+++ b/src/main/resources/view/LiBerryTheme.css
@@ -0,0 +1,277 @@
+.background {
+    -fx-background-color: purple;
+    background-color: green; /* Used in the default.html file */
+}
+
+.label {
+    -fx-font-size: 11pt;
+    -fx-font-family: "Segoe UI Semibold";
+    -fx-text-fill: #555555;
+    -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: white;
+    -fx-opacity: 1;
+}
+
+.text-field {
+    -fx-font-size: 12pt;
+    -fx-font-family: "Segoe UI Semibold";
+}
+
+.list-view {
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+    -fx-background-color: green;
+}
+
+.list-cell {
+    -fx-label-padding: 0 0 0 0;
+    -fx-graphic-text-gap : 0;
+    -fx-padding: 0 0 0 0;
+}
+
+.list-cell:filled:even {
+    -fx-background-color: #EEEFF0;
+}
+
+.list-cell:filled:odd {
+    -fx-background-color: #E3E5E6;
+}
+
+.list-cell:filled:selected {
+    -fx-background-color: #B3B8C1;
+}
+
+.list-cell:filled:selected #cardPane {
+    -fx-border-color: #373849;
+    -fx-border-width: 1;
+}
+
+.list-cell .label {
+    -fx-text-fill: #212232;
+}
+
+.cell_big_label {
+    -fx-font-family: "Segoe UI Semibold";
+    -fx-font-size: 16px;
+    -fx-text-fill: #010504;
+}
+
+.cell_small_label {
+    -fx-font-family: "Segoe UI";
+    -fx-font-size: 13px;
+    -fx-text-fill: #010504;
+}
+
+#borrowerPanel {
+     -fx-background-color: #D9DBE0;
+}
+
+.stack-pane {
+     -fx-background-color: #D9DBE0;
+}
+
+.pane-with-border {
+     -fx-background-color: #D9DBE0;
+     -fx-border-color: #1D1D1D;
+}
+
+.status-bar {
+    -fx-background-color: #D9DBE0;
+}
+
+.result-display {
+    -fx-background-color: transparent;
+    -fx-font-family: "Segoe UI Light";
+    -fx-font-size: 12pt;
+    -fx-text-fill: #010504;
+}
+
+.borrower-particulars {
+    -fx-background-color: transparent;
+    -fx-font-family: "Segoe UI Light";
+    -fx-font-size: 12pt;
+    -fx-text-fill: #13222B;
+}
+
+.borrower-particulars-bold {
+    -fx-background-color: transparent;
+    -fx-font-family: "Segoe UI Bold";
+    -fx-font-size: 20pt;
+    -fx-text-fill: #13222B;
+}
+
+.mode-status {
+    -fx-background-color: transparent;
+    -fx-font-family: "Segoe UI Bold";
+    -fx-font-size: 20pt;
+    -fx-text-fill: #373849;
+}
+
+.status-bar .label {
+    -fx-font-family: "Segoe UI Light";
+    -fx-text-fill: white;
+    -fx-padding: 4px;
+    -fx-pref-height: 30px;
+}
+
+.status-bar-with-border {
+    -fx-background-color: derive(#1d1d1d, 30%);
+    -fx-border-color: derive(#1d1d1d, 25%);
+    -fx-border-width: 1px;
+}
+
+.status-bar-with-border .label {
+    -fx-text-fill: white;
+}
+.dialog-pane:header *.header-panel {
+    -fx-background-color: derive(#1d1d1d, 25%);
+}
+
+.dialog-pane:header *.header-panel *.label {
+    -fx-font-size: 18px;
+    -fx-font-style: italic;
+    -fx-fill: white;
+    -fx-text-fill: white;
+}
+
+.scroll-bar {
+    -fx-background-color: #D9DBE0;
+}
+
+.scroll-bar .thumb {
+    -fx-background-color: #808999;
+    -fx-background-insets: 3;
+}
+
+.scroll-bar .increment-button, .scroll-bar .decrement-button {
+    -fx-background-color: transparent;
+    -fx-padding: 0 0 0 0;
+}
+
+.scroll-bar .increment-arrow, .scroll-bar .decrement-arrow {
+    -fx-shape: " ";
+}
+
+.scroll-bar:vertical .increment-arrow, .scroll-bar:vertical .decrement-arrow {
+    -fx-padding: 1 8 1 8;
+}
+
+.scroll-bar:horizontal .increment-arrow, .scroll-bar:horizontal .decrement-arrow {
+    -fx-padding: 8 1 8 1;
+}
+
+#cardPane {
+    -fx-background-color: transparent;
+    -fx-border-width: 0;
+}
+
+#commandTypeLabel {
+    -fx-font-size: 11px;
+    -fx-text-fill: #1B1B29;
+}
+
+#commandTextField {
+    -fx-background-color: transparent #383838 transparent #383838;
+    -fx-background-insets: 0;
+    -fx-border-insets: 0;
+    -fx-border-width: 1;
+    -fx-font-family: "Segoe UI Light";
+    -fx-font-size: 12pt;
+    -fx-text-fill: #1B1B29;
+}
+
+
+#genres {
+    -fx-hgap: 7;
+    -fx-vgap: 3;
+}
+
+#genres .label {
+    -fx-text-fill: #242537;
+    -fx-background-color: #CDD1D2;
+    -fx-padding: 1 3 1 3;
+    -fx-border-radius: 2;
+    -fx-background-radius: 2;
+    -fx-font-size: 12;
+}
+
+#resultDisplayPlaceholder {
+    -fx-background-color: #1B1B29;
+}
+
+.listing-panel {
+    -fx-background-color: derive(#1d1d1d, 20%);
+}
+
+.text-field {
+    -fx-font-size: 12pt;
+    -fx-font-family: "Segoe UI Semibold";
+    -fx-prompt-text-fill: #808999;
+}
+
+
+.tab-pane .tab-header-area {
+    -fx-padding: 0 0 0 0;
+    -fx-min-height: 0;
+    -fx-max-height: 0;
+}
+
+.table-view {
+    -fx-base: #1d1d1d;
+    -fx-control-inner-background: #1d1d1d;
+     -fx-background-color: #1d1d1d;
+     -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
+         derive(-fx-base, 80%)
+         transparent;
+     -fx-border-insets: 0 10 1 0;
+ }
+
+.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;
+}
+
+.table-view:focused .table-row-cell:filled:focused:selected {
+    -fx-background-color: -fx-focus-color;
+}
+
+.split-pane:horizontal .split-pane-divider {
+    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-border-color: transparent transparent transparent #4d4d4d;
+}
+
+.split-pane {
+    -fx-border-radius: 1;
+    -fx-border-width: 1;
+    -fx-background-color: derive(#1d1d1d, 20%);
+}
diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml
index d9880bd8313..9a02e07e5e3 100644
--- a/src/main/resources/view/MainWindow.fxml
+++ b/src/main/resources/view/MainWindow.fxml
@@ -18,17 +18,14 @@
     <scene>
         <Scene>
             <stylesheets>
-                <URL value="@DarkTheme.css" />
+<!--                <URL value="@DarkTheme.css" />-->
+                <URL value="@LiBerryTheme.css" />
                 <URL value="@Extensions.css" />
             </stylesheets>
 
             <BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="510.0" prefWidth="615.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
-                <bottom>
-                    <AnchorPane fx:id="commandBoxPlaceholder" maxHeight="35.0" minHeight="35.0" minWidth="0.0" prefHeight="35.0" prefWidth="600.0" styleClass="pane-with-border" BorderPane.alignment="CENTER">
-                    </AnchorPane>
-                </bottom>
                 <right>
-                    <VBox maxWidth="500.0" minWidth="500.0" prefWidth="500.0" style="-fx-background-color: #d8dae3#d8dae3;" BorderPane.alignment="CENTER">
+                    <VBox maxWidth="500.0" minWidth="500.0" prefWidth="500.0" BorderPane.alignment="CENTER">
                         <children>
                             <VBox VBox.vgrow="ALWAYS">
                                 <children>
@@ -43,11 +40,12 @@
                         <padding>
                             <Insets bottom="10" left="10" right="10" top="10" />
                         </padding>
-                        <StackPane fx:id="bookListPanelPlaceholder" VBox.vgrow="ALWAYS" />
-                        <Pane fx:id="resultDisplayPlaceholder" maxHeight="150.0" minHeight="150.0" prefHeight="120.0">
+                        <StackPane fx:id="bookListPanelPlaceholder" styleClass="placeholder" VBox.vgrow="ALWAYS" />
+                        <Pane fx:id="resultDisplayPlaceholder" maxHeight="150.0" minHeight="150.0" prefHeight="120.0" VBox.vgrow="ALWAYS">
                             <padding>
                                 <Insets left="20.0" />
-                            </padding></Pane>
+                            </padding>
+                        </Pane>
                     </VBox>
                 </center>
                 <top>
@@ -58,14 +56,18 @@
                                     <Image url="@../images/LiBerryLogo.png" />
                                 </image>
                                 <HBox.margin>
-                                    <Insets left="7.0" top="7.0" />
+                                    <Insets left="13.0" top="7.0" />
                                 </HBox.margin>
                             </ImageView>
                             <Pane prefHeight="47.0" prefWidth="286.0" HBox.hgrow="ALWAYS" />
-                            <Label fx:id="mode" prefHeight="47.0" prefWidth="201.0" />
+                            <Label fx:id="mode" prefHeight="47.0" prefWidth="201.0" styleClass="mode-status" />
                         </children>
                     </HBox>
                 </top>
+            <bottom>
+                    <AnchorPane fx:id="commandBoxPlaceholder" maxHeight="35.0" minHeight="35.0" minWidth="0.0" prefHeight="35.0" prefWidth="600.0" styleClass="pane-with-border" BorderPane.alignment="CENTER">
+                    </AnchorPane>
+            </bottom>
             </BorderPane>
         </Scene>
     </scene>
diff --git a/src/main/resources/view/ResultDisplay.fxml b/src/main/resources/view/ResultDisplay.fxml
index ac6bc292efb..b37835860a5 100644
--- a/src/main/resources/view/ResultDisplay.fxml
+++ b/src/main/resources/view/ResultDisplay.fxml
@@ -3,7 +3,10 @@
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Label?>
 
-<Label fx:id="resultDisplay" maxHeight="150.0" minHeight="150.0" minWidth="-Infinity" prefHeight="150.0" styleClass="result-display" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
+<Label fx:id="resultDisplay"
+       styleClass="result-display"
+       maxHeight="150.0" minHeight="150.0" minWidth="-Infinity" prefHeight="150.0"
+       xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
    <padding>
       <Insets left="10.0" />
    </padding>