From 2405f03c72041b78adc345ad885eb09e7937b82f Mon Sep 17 00:00:00 2001
From: potaotototo <jingjingwang2004@outlook.com>
Date: Mon, 28 Oct 2024 11:49:32 +0800
Subject: [PATCH] Improve ui

---
 src/main/resources/view/DarkTheme.css        | 49 +++++++++++++-------
 src/main/resources/view/DisplayCard.fxml     |  2 +-
 src/main/resources/view/MainWindow.fxml      |  8 ++--
 src/main/resources/view/PersonListPanel.fxml |  8 ++--
 4 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/src/main/resources/view/DarkTheme.css b/src/main/resources/view/DarkTheme.css
index 7790e560828..3c62308a71b 100644
--- a/src/main/resources/view/DarkTheme.css
+++ b/src/main/resources/view/DarkTheme.css
@@ -77,19 +77,18 @@
 }
 
 .split-pane:horizontal .split-pane-divider {
-    -fx-background-color: derive(#1d1d1d, 20%);
-    -fx-border-color: transparent transparent transparent #4d4d4d;
+    -fx-background-color: #fdf5f5;
+    -fx-border-width: 0;
 }
 
 .split-pane {
-    -fx-border-radius: 1;
-    -fx-border-width: 1;
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: #fdf5f5;
+    -fx-border-width: 0;
 }
 
 .list-view {
     -fx-background-insets: 0;
-    -fx-padding: 5;
+    -fx-padding: 5 0 0 5; /* top right bottom left */
     -fx-background-color: #fdf5f5
 }
 
@@ -129,34 +128,30 @@
 .cell_big_label {
     -fx-font-family: "Raleway Semibold";
     -fx-font-size: 16px;
-    -fx-text-fill: derive(#757575, -10%);
+    -fx-text-fill: derive(#757575, -50%);
 }
 
 .cell_small_label {
     -fx-font-family: "Raleway";
     -fx-font-size: 12px;
-    -fx-text-fill: derive(#757575, -10%);
+    -fx-text-fill: derive(#757575, -50%);
 }
 
 .card_big_label {
-    -fx-font-family: "Raleway Semibold";
-        -fx-font-size: 16px;
-        -fx-text-fill: derive(#757575, -10%);
+    -fx-font-family: "Raleway Black";
+        -fx-font-size: 26px;
+        -fx-text-fill: derive(#757575, -50%);
+    -fx-padding: 8 0 5 0;
 }
 
 .card_small_label {
     -fx-font-family: "Raleway";
-    -fx-font-size: 12px;
-    -fx-text-fill: derive(#757575, -10%);
+    -fx-font-size: 16px;
+    -fx-text-fill: derive(#757575, -50%);
 }
 
 .stack-pane {
      -fx-background-color: #fdf5f5;
-     /*-fx-padding: 10px;*/
-}
-
-.right-pane {
-    -fx-background-color: #fdf5f5;
 }
 
 .pane-with-border {
@@ -388,3 +383,21 @@
     -fx-background-radius: 2;
     -fx-font-size: 12;
 }
+
+#remarks {
+    -fx-spacing: 2;
+    -fx-padding: 5 0 10 0;
+}
+
+#remarks .label {
+    -fx-font-family: "Raleway";
+        -fx-font-style: italic;
+    -fx-font-size: 12px;
+    -fx-text-fill: derive(#e8def8, -50%);
+    -fx-background-color: #fdf5f5;
+    -fx-padding: 3 5 3 5;
+    -fx-background-radius: 3;
+    -fx-border-radius: 3;
+    -fx-border-color: #e0e0e0;
+    -fx-border-width: 1;
+}
diff --git a/src/main/resources/view/DisplayCard.fxml b/src/main/resources/view/DisplayCard.fxml
index 6eaa86f272d..bbfeb205c77 100644
--- a/src/main/resources/view/DisplayCard.fxml
+++ b/src/main/resources/view/DisplayCard.fxml
@@ -41,7 +41,7 @@
             <Label fx:id="email" styleClass="card_small_label" text="\$email" managed="${email.visible}" />
 
             <!-- Remarks -->
-            <VBox fx:id="remarks" spacing="5">
+            <VBox fx:id="remarks">
             </VBox>
         </VBox>
     </GridPane>
diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml
index 13212a889de..0d6c98172bb 100644
--- a/src/main/resources/view/MainWindow.fxml
+++ b/src/main/resources/view/MainWindow.fxml
@@ -38,14 +38,14 @@
         <SplitPane xmlns="http://javafx.com/javafx/17"
                    xmlns:fx="http://javafx.com/fxml/1"
                    VBox.vgrow="ALWAYS"
-                   dividerPositions="0.3">
+                   dividerPositions="0.4">
           <!-- Left: Person List -->
           <StackPane fx:id="personListPanelPlaceholder"
-                     minWidth="200"
-                     maxWidth="200"/>  <!-- Add maxWidth to fix the width -->
+                     minWidth="260"
+                     maxWidth="260"/>
           <!-- Right: Display Card -->
           <StackPane fx:id="displayCardPanelPlaceholder"
-                     minWidth="200"/>
+                     minWidth="800"/>
         </SplitPane>
 
         <!-- Result Display -->
diff --git a/src/main/resources/view/PersonListPanel.fxml b/src/main/resources/view/PersonListPanel.fxml
index 39dae2a76e1..a20b06c9ae0 100644
--- a/src/main/resources/view/PersonListPanel.fxml
+++ b/src/main/resources/view/PersonListPanel.fxml
@@ -4,8 +4,6 @@
 <?import javafx.scene.layout.VBox?>
 
 <?import javafx.scene.layout.HBox?>
-<HBox>
-  <VBox xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
-    <ListView fx:id="personListView" VBox.vgrow="ALWAYS" />
-  </VBox>
-</HBox>
+<VBox xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
+  <ListView fx:id="personListView" VBox.vgrow="ALWAYS" />
+</VBox>