Fix alignment by changing index font

For a non-monospace font such as Segoe UI, "1."
takes up less horizontal space than "2.". This
results in the first name having different
vertical alignment compared to all the names
below the first one in the PersonListCard.

Lets change the font of the index in the
PersonListCard to a monospaced font such as
Arial Mono, which seems to eliminate the
misalignment issue so that the names in the
PersonListCard are aligned.

src/main/java/seedu/address/ui/UiManager.java

@@ -6,6 +6,7 @@
 import javafx.scene.control.Alert;
 import javafx.scene.control.Alert.AlertType;
 import javafx.scene.image.Image;
+import javafx.scene.text.Font;
 import javafx.stage.Stage;
 import seedu.address.MainApp;
 import seedu.address.commons.core.LogsCenter;
@@ -38,6 +39,7 @@ public void start(Stage primaryStage) {
 
         //Set the application icon.
         primaryStage.getIcons().add(getImage(ICON_APPLICATION));
+        Font.loadFont(getClass().getResourceAsStream("/styles/ArialMonoMTProRegular.ttf"), 16);
 
         try {
             mainWindow = new MainWindow(primaryStage, logic);

src/main/resources/view/DarkTheme.css

@@ -120,7 +120,13 @@
     -fx-text-fill: white;
 }
 
-.cell_big_label {
+.cell_big_index {
+    -fx-font-family: "Arial Mono MT Pro";
+    -fx-font-size: 16.65px;
+    -fx-text-fill: #010504;
+}
+
+.cell_big_name {
     -fx-font-family: "Segoe UI Semibold";
     -fx-font-size: 16px;
     -fx-text-fill: #010504;

src/main/resources/view/PersonListCard.fxml

@@ -18,14 +18,14 @@
       <padding>
         <Insets top="5" right="5" bottom="5" left="15" />
       </padding>
-      <HBox spacing="0.5" alignment="CENTER_LEFT">
-        <Label fx:id="id" styleClass="cell_big_label">
+      <HBox spacing="-9" alignment="CENTER_LEFT">
+        <Label fx:id="id" styleClass="cell_big_index">
           <minWidth>
             <!-- Ensures that the label text is never truncated -->
             <Region fx:constant="USE_PREF_SIZE" />
           </minWidth>
         </Label>
-        <Label fx:id="name" text="\$first" styleClass="cell_big_label" />
+        <Label fx:id="name" text="\$first" styleClass="cell_big_name" />
       </HBox>
       <FlowPane fx:id="tags" />
       <Label fx:id="phone" styleClass="cell_small_label" text="\$phone" />