From 2f9d8ca63418e99aebfb36fca47e9625766370c4 Mon Sep 17 00:00:00 2001
From: Alexander Harding <2166114+aeharding@users.noreply.github.com>
Date: Wed, 28 Jun 2023 23:30:45 -0500
Subject: [PATCH] Refactor showScoreAlert, preserve line breaks in alert

---
 src/features/user/Scores.tsx | 23 +++++++++++++++--------
 src/index.css                |  4 ++++
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/features/user/Scores.tsx b/src/features/user/Scores.tsx
index 779ffbe625..554a8afd85 100644
--- a/src/features/user/Scores.tsx
+++ b/src/features/user/Scores.tsx
@@ -44,18 +44,25 @@ export default function Scores({ aggregates, accountCreated }: ScoreProps) {
 
   const postScore = aggregates.post_score;
   const commentScore = aggregates.comment_score;
+  const totalScore = postScore + commentScore;
 
   const showScoreAlert = async (focus: "post" | "comment") => {
-    const subHeader = `${focus === "post" ? commentScore : postScore} ${
-      focus === "post" ? "Comment" : "Post"
-    } Points`;
-    const message = `${postScore + commentScore} Total Points`;
+    const postPointsLine = `${postScore.toLocaleString()} Post Points`;
+    const commentPointsLine = `${commentScore.toLocaleString()} Comment Points`;
+
+    const totalScoreLine = `${totalScore.toLocaleString()} Total Points`;
+
+    const header = focus === "post" ? postPointsLine : commentPointsLine;
+
+    const message = [
+      focus === "post" ? commentPointsLine : postPointsLine,
+      totalScoreLine,
+    ];
 
     await present({
-      header: `${focus === "post" ? postScore : commentScore} ${focus} points`,
-      htmlAttributes: { style: "white-space: pre-line;" },
-      subHeader,
-      message,
+      header,
+      cssClass: "preserve-newlines",
+      message: message.join("\n"),
       buttons: [{ text: "OK" }],
     });
   };
diff --git a/src/index.css b/src/index.css
index 1281ff9603..849db2200d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -48,3 +48,7 @@ ion-modal.small {
 ion-modal.small ion-header ion-toolbar:first-of-type {
   padding-top: 0px;
 }
+
+ion-alert.preserve-newlines {
+  white-space: pre-line;
+}