Merge pull request #164 from althea28/Update-Color-Scheme

Update color scheme
AY2425S1-CS2103-F11-1 · Oct 29, 2024 · f4d5b6e · f4d5b6e
2 parents ddb3c16 + dfab1c0
commit f4d5b6e
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 64 deletions.
diff --git a/src/main/resources/view/DarkTheme.css b/src/main/resources/view/DarkTheme.css
@@ -1,5 +1,18 @@
-.background {
-    -fx-background-color: derive(#1d1d1d, 20%);
+.root {
+    -blue-darkest: #455e7e;
+    -blue-dark: #426695;
+    -blue-light: #4ba1f1;
+    -white-dark: #d4e2ee;
+    -white-light: #eef4fa;
+    -white-border: #C8C2C2;
+    -tag-color: #db6b3d;
+    -text-dark: #1d1b1a;
+    -status-submitted: #54be56;
+    -status-unsubmitted: #d55050;
+}
+
+.background { /*?*/
+    -fx-background-color: derive(-blue-dark, 20%);
     background-color: #383838; /* Used in the default.html file */
 }
 
@@ -39,10 +52,10 @@
     -fx-max-height: 0;
 }
 
-.table-view {
-    -fx-base: #1d1d1d;
-    -fx-control-inner-background: #1d1d1d;
-    -fx-background-color: #1d1d1d;
+.table-view { /* ?*/
+    -fx-base: -blue-dark;
+    -fx-control-inner-background: -blue-dark;
+    -fx-background-color: -blue-dark;
     -fx-table-cell-border-color: transparent;
     -fx-table-header-border-color: transparent;
     -fx-padding: 5;
@@ -76,21 +89,21 @@
     -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:horizontal .split-pane-divider { /*middle bar btwn 2 planes*/
+    -fx-background-color: derive(-white-dark, 20%);
+    -fx-border-color: transparent;
 }
 
-.split-pane {
+.split-pane { /*border arnd list and details panel*/
     -fx-border-radius: 1;
     -fx-border-width: 1;
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(-white-dark, 1%);
 }
 
 .list-view {
     -fx-background-insets: 0;
     -fx-padding: 0;
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(-white-dark, 20%);
 }
 
 .list-cell {
@@ -100,24 +113,24 @@
 }
 
 .list-cell:filled:even {
-    -fx-background-color: #3c3e3f;
+    -fx-background-color: -white-light;
 }
 
 .list-cell:filled:odd {
-    -fx-background-color: #515658;
+    -fx-background-color: derive(-white-dark, 10%);
 }
 
 .list-cell:filled:selected {
-    -fx-background-color: #424d5f;
+    -fx-background-color: transparent;
 }
 
 .list-cell:filled:selected #cardPane {
-    -fx-border-color: #3e7b91;
+    -fx-border-color: -blue-light;
     -fx-border-width: 1;
 }
 
 .list-cell .label {
-    -fx-text-fill: white;
+    -fx-text-fill: -text-dark;
 }
 
 .cell_big_label {
@@ -135,50 +148,56 @@
 .details_big_label {
     -fx-font-family: "Segoe UI Semibold";
     -fx-font-size: 28px;
-    -fx-text-fill: white;
+    -fx-text-fill: -text-dark;
 }
 
 .details_small_label {
     -fx-font-family: "Segoe UI";
     -fx-font-size: 20px;
-    -fx-text-fill: white;
+    -fx-text-fill: -text-dark;
 }
 
 .details_field_headers {
     -fx-font-family: "Segoe UI";
     -fx-font-size: 15px;
-    -fx-text-fill: white;
+    -fx-text-fill: -text-dark;
 }
 
 .details-pane {
-    -fx-background-color: #3c3e3f;
-    -fx-border-color: derive(#1d1d1d, 10%);
+    -fx-background-color: -white-light;
+    -fx-border-color: derive(-white-dark, 10%);
     -fx-border-top-width: 1px;
 }
 
 .details-pane .viewport {
-    -fx-background-color: #3c3e3f;
+    -fx-background-color: -white-light;
 }
 
-.stack-pane {
-     -fx-background-color: derive(#1d1d1d, 20%);
+.stack-pane { /*enter command bar*/
+     -fx-background-color: derive(-blue-dark, 20%);
 }
 
-.pane-with-border {
-     -fx-background-color: derive(#1d1d1d, 20%);
-     -fx-border-color: derive(#1d1d1d, 10%);
+.pane-with-border { /*border arnd command bar and feedback box*/
+     -fx-background-color: derive(-blue-dark, 20%);
+     -fx-border-color: derive(-blue-dark, 10%);
      -fx-border-top-width: 1px;
 }
 
-.status-bar {
-    -fx-background-color: derive(#1d1d1d, 30%);
+.results-pane { /*border arnd command bar and feedback box*/
+     -fx-background-color: derive(-blue-dark, 20%);
+     -fx-border-color: derive(-white-dark, 10%);
+     -fx-border-top-width: 1px;
+}
+
+.status-bar { /*last bar addressbook.json*/
+    -fx-background-color: derive(-blue-dark, 30%);
 }
 
-.result-display {
+.result-display { /*bg color=border arnd feedback box*/
     -fx-background-color: transparent;
     -fx-font-family: "Segoe UI Light";
     -fx-font-size: 13pt;
-    -fx-text-fill: white;
+    -fx-text-fill: white; /*feedback text*/
 }
 
 .result-display .label {
@@ -193,35 +212,35 @@
 }
 
 .status-bar-with-border {
-    -fx-background-color: derive(#1d1d1d, 30%);
-    -fx-border-color: derive(#1d1d1d, 25%);
+    -fx-background-color: derive(-white-dark, 30%);
+    -fx-border-color: derive(-white-dark, 25%);
     -fx-border-width: 1px;
 }
 
 .status-bar-with-border .label {
     -fx-text-fill: white;
 }
 
-.grid-pane {
-    -fx-background-color: derive(#1d1d1d, 30%);
-    -fx-border-color: derive(#1d1d1d, 30%);
+.grid-pane { /*?*/
+    -fx-background-color: derive(-blue-dark, 30%);
+    -fx-border-color: derive(-white-dark, 30%);
     -fx-border-width: 1px;
 }
 
-.grid-pane .stack-pane {
-    -fx-background-color: derive(#1d1d1d, 30%);
+.grid-pane .stack-pane { /*?*/
+    -fx-background-color: derive(-blue-dark, 30%);
 }
 
-.context-menu {
-    -fx-background-color: derive(#1d1d1d, 50%);
+.context-menu { /* file and help popup*/
+    -fx-background-color: derive(-blue-dark, 50%);
 }
 
 .context-menu .label {
     -fx-text-fill: white;
 }
 
-.menu-bar {
-    -fx-background-color: derive(#1d1d1d, 20%);
+.menu-bar { /*file, help label*/
+    -fx-background-color: derive(-blue-dark, 20%);
 }
 
 .menu-bar .label {
@@ -245,7 +264,7 @@
     -fx-border-color: #e2e2e2;
     -fx-border-width: 2;
     -fx-background-radius: 0;
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: -blue-dark;
     -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
     -fx-font-size: 11pt;
     -fx-text-fill: #d8d8d8;
@@ -258,7 +277,7 @@
 
 .button:pressed, .button:default:hover:pressed {
   -fx-background-color: white;
-  -fx-text-fill: #1d1d1d;
+  -fx-text-fill: -blue-dark;
 }
 
 .button:focused {
@@ -271,7 +290,7 @@
 
 .button:disabled, .button:default:disabled {
     -fx-opacity: 0.4;
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: -blue-dark;
     -fx-text-fill: white;
 }
 
@@ -284,12 +303,12 @@
     -fx-background-color: derive(-fx-focus-color, 30%);
 }
 
-.dialog-pane {
-    -fx-background-color: #1d1d1d;
+.dialog-pane { /*?*/
+    -fx-background-color: -blue-dark;
 }
 
 .dialog-pane > *.button-bar > *.container {
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: -blue-dark;
 }
 
 .dialog-pane > *.label.content {
@@ -299,7 +318,7 @@
 }
 
 .dialog-pane:header *.header-panel {
-    -fx-background-color: derive(#1d1d1d, 25%);
+    -fx-background-color: derive(-white-dark, 25%);
 }
 
 .dialog-pane:header *.header-panel *.label {
@@ -310,11 +329,11 @@
 }
 
 .scroll-bar {
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(-white-dark, 20%);
 }
 
 .scroll-bar .thumb {
-    -fx-background-color: derive(#1d1d1d, 50%);
+    -fx-background-color: derive(-text-dark, 50%);
     -fx-background-insets: 3;
 }
 
@@ -346,9 +365,9 @@
 }
 
 #commandTextField {
-    -fx-background-color: transparent #383838 transparent #383838;
+    -fx-background-color: transparent;
     -fx-background-insets: 0;
-    -fx-border-color: #383838 #383838 #ffffff #383838;
+    -fx-border-color: -blue-darkest -blue-darkest -white-dark -blue-darkest;
     -fx-border-insets: 0;
     -fx-border-width: 1;
     -fx-font-family: "Segoe UI Light";
@@ -360,8 +379,8 @@
     -fx-effect: innershadow(gaussian, black, 10, 0, 0, 0);
 }
 
-#resultDisplay .content {
-    -fx-background-color: transparent, #383838, transparent, #383838;
+#resultDisplay .content { /*1st is ?, 2nd is feedback box*/
+    -fx-background-color: transparent, transparent, transparent, -blue-dark;
     -fx-background-radius: 0;
 }
 
@@ -372,7 +391,7 @@
 
 #tags .label {
     -fx-text-fill: white;
-    -fx-background-color: #3e7b91;
+    -fx-background-color: -tag-color;
     -fx-padding: 1 3 1 3;
     -fx-border-radius: 2;
     -fx-background-radius: 2;
@@ -386,31 +405,34 @@
 
 #detailsTags .label {
     -fx-text-fill: white;
-    -fx-background-color: #3e7b91;
+    -fx-background-color: -tag-color;
     -fx-padding: 1 3 1 3;
     -fx-border-radius: 2;
     -fx-background-radius: 2;
     -fx-font-size: 20;
 }
 
 .assignment-box {
-    -fx-background-color: #f0f0f0;
+    -fx-background-color: -white-dark;
     -fx-padding: 10;
     -fx-border-color: #cccccc;
     -fx-border-radius: 5;
     -fx-background-radius: 5;
-    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.2), 5, 0, 0, 0);
+    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.1), 8, 0, 0, 0);
+    -fx-text-fill: -text-dark;
 }
 
 .assignment-name {
+    -fx-text-fill: -text-dark;
     -fx-font-weight: bold;
+    -fx-font-size: 15;
 }
 
 .assignment-status-submitted {
     -fx-hgap: 7;
     -fx-vgap: 3;
     -fx-text-fill: white;
-    -fx-background-color: #54be56;
+    -fx-background-color: -status-submitted;
     -fx-padding: 1 3 1 3;
     -fx-border-radius: 2;
     -fx-background-radius: 2;
@@ -420,7 +442,7 @@
     -fx-hgap: 7;
     -fx-vgap: 3;
     -fx-text-fill: white;
-    -fx-background-color: #e54444;
+    -fx-background-color: -status-unsubmitted;
     -fx-padding: 1 3 1 3;
     -fx-border-radius: 2;
     -fx-background-radius: 2;

diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml
@@ -50,7 +50,7 @@
           <padding>
             <Insets top="10" right="10" bottom="10" left="10" />
           </padding>
-          <StackPane fx:id="studentListPanelPlaceholder" styleClass="pane-with-border" />
+          <StackPane fx:id="studentListPanelPlaceholder" styleClass="results-pane" />
           <StackPane fx:id="studentDetailsPanelPlaceholder" styleClass="details-pane" />
         </SplitPane>
 

diff --git a/src/main/resources/view/StudentDetailsPanel.fxml b/src/main/resources/view/StudentDetailsPanel.fxml
@@ -33,7 +33,11 @@
                             <Insets top="5" right="5" bottom="3" left="5" />
                         </padding>
                     </HBox>
-                    <Separator />
+                    <Separator>
+                        <style>
+                            -fx-background-color: #1d1b1a;
+                        </style>
+                    </Separator>
                     <FlowPane fx:id="detailsTags" >
                         <padding>
                             <Insets top="10" bottom="8" left="5"/>
@@ -42,6 +46,9 @@
 
                     <HBox alignment="CENTER_LEFT">
                         <VBox alignment="CENTER_LEFT" spacing="10" minWidth="70">
+                            <padding>
+                                <Insets left="8" />
+                            </padding>
                             <Label text="Phone:" styleClass="details_field_headers" />
                             <Label text="Email:" styleClass="details_field_headers" />
                             <Label text="Remark:" styleClass="details_field_headers" />