From 21d5d545805aa808886c76b3fd526e9457c8fa25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?=
 <100827540+reneaaron@users.noreply.github.com>
Date: Wed, 20 Dec 2023 12:32:34 +0100
Subject: [PATCH] fix: styles for paymentsummary (#2947)

* fix: styles for paymentsummary

* fix: tests
---
 src/app/components/PaymentSummary/index.tsx   | 59 +++++++++----------
 src/app/screens/ConfirmKeysend/index.test.tsx |  4 +-
 src/app/screens/ConfirmPayment/index.test.tsx |  6 +-
 .../ConfirmPaymentAsync/index.test.tsx        |  2 +-
 4 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/src/app/components/PaymentSummary/index.tsx b/src/app/components/PaymentSummary/index.tsx
index 15ae87942b..634350bc2b 100644
--- a/src/app/components/PaymentSummary/index.tsx
+++ b/src/app/components/PaymentSummary/index.tsx
@@ -4,50 +4,45 @@ import { useSettings } from "~/app/context/SettingsContext";
 
 export type Props = {
   amount: string | number;
-  amountAlt?: string;
   description?: string | React.ReactNode;
   fiatAmount: string;
 };
 
-const PaymentSummary: FC<Props> = ({
-  amount,
-  amountAlt,
-  description,
-  fiatAmount,
-}) => {
+const PaymentSummary: FC<Props> = ({ amount, description, fiatAmount }) => {
   const { t: tCommon } = useTranslation("common");
   const { getFormattedSats } = useSettings();
 
   return (
-    <dl className="mb-0">
-      <dt className="text-sm text-gray-500 dark:text-neutral-500">
-        {tCommon("amount")}
-      </dt>
-      <dd className="text-lg text-gray-700 dark:text-neutral-200 flex flex-row justify-between">
-        <div>{getFormattedSats(amount)}</div>
-        {!!fiatAmount && (
-          <span
-            className="text-gray-500 dark:text-neutral-500"
-            data-testid="fiat_amount"
-          >
-            {" "}
-            (~{fiatAmount})
-          </span>
-        )}
-      </dd>
-      {amountAlt && <dd className="text-gray-400">{amountAlt}</dd>}
+    <dl className="space-y-4">
+      <div>
+        <Dt>{tCommon("amount")}</Dt>
+        <Dd>
+          <div className="flex flex-row justify-between">
+            <div>{getFormattedSats(amount)}</div>
+            {!!fiatAmount && (
+              <span data-testid="fiat_amount">~{fiatAmount}</span>
+            )}
+          </div>
+        </Dd>
+      </div>
       {!!description && (
-        <>
-          <dt className="mt-4 font-medium dark:text-white">
-            {tCommon("description")}
-          </dt>
-          <dd className="text-gray-500 dark:text-neutral-400 break-words whitespace-pre-wrap overflow-y-auto max-h-36">
-            {description}
-          </dd>
-        </>
+        <div>
+          <Dt>{tCommon("description")}</Dt>
+          <Dd>{description}</Dd>
+        </div>
       )}
     </dl>
   );
 };
 
+const Dt = ({ children }: { children: React.ReactNode }) => (
+  <dt className="text-sm font-medium text-gray-800 dark:text-neutral-200">
+    {children}
+  </dt>
+);
+
+const Dd = ({ children }: { children: React.ReactNode }) => (
+  <dd className="text-lg text-gray-600 dark:text-neutral-400">{children}</dd>
+);
+
 export default PaymentSummary;
diff --git a/src/app/screens/ConfirmKeysend/index.test.tsx b/src/app/screens/ConfirmKeysend/index.test.tsx
index e71af1aaa2..618399a1bf 100644
--- a/src/app/screens/ConfirmKeysend/index.test.tsx
+++ b/src/app/screens/ConfirmKeysend/index.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, act } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router-dom";
 import { settingsFixture as mockSettings } from "~/../tests/fixtures/settings";
@@ -86,7 +86,7 @@ describe("ConfirmKeysend", () => {
     });
 
     expect(screen.getByText("21 sats")).toBeInTheDocument();
-    expect(screen.getByText("(~$0.01)")).toBeInTheDocument();
+    expect(screen.getByText("~$0.01")).toBeInTheDocument();
     expect(screen.queryByText("~$0.05")).not.toBeInTheDocument();
 
     await act(() => {
diff --git a/src/app/screens/ConfirmPayment/index.test.tsx b/src/app/screens/ConfirmPayment/index.test.tsx
index cdbc2ad214..36c3ca9a68 100644
--- a/src/app/screens/ConfirmPayment/index.test.tsx
+++ b/src/app/screens/ConfirmPayment/index.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, act } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import lightningPayReq from "bolt11";
 import { MemoryRouter } from "react-router-dom";
@@ -77,7 +77,7 @@ describe("ConfirmPayment", () => {
 
     expect(await screen.findByText("Amount")).toBeInTheDocument();
     expect(await screen.findByText("Description")).toBeInTheDocument();
-    expect(await screen.findByText("(~$0.01)")).toBeInTheDocument();
+    expect(await screen.findByText("~$0.01")).toBeInTheDocument();
     expect(
       await screen.findByLabelText("Remember and set a budget")
     ).toBeInTheDocument();
@@ -135,7 +135,7 @@ describe("ConfirmPayment", () => {
 
     expect(await screen.findByText("Amount")).toBeInTheDocument();
     expect(await screen.findByText("Description")).toBeInTheDocument();
-    expect(screen.getByText("(~$0.01)")).toBeInTheDocument();
+    expect(screen.getByText("~$0.01")).toBeInTheDocument();
     expect(
       await screen.queryByText("Remember and set a budget")
     ).not.toBeInTheDocument();
diff --git a/src/app/screens/ConfirmPaymentAsync/index.test.tsx b/src/app/screens/ConfirmPaymentAsync/index.test.tsx
index dd525f0fed..d67accb558 100644
--- a/src/app/screens/ConfirmPaymentAsync/index.test.tsx
+++ b/src/app/screens/ConfirmPaymentAsync/index.test.tsx
@@ -75,6 +75,6 @@ describe("ConfirmPaymentAsync", () => {
 
     expect(await screen.findByText("Amount")).toBeInTheDocument();
     expect(await screen.findByText("Description")).toBeInTheDocument();
-    expect(await screen.findByText("(~$0.01)")).toBeInTheDocument();
+    expect(await screen.findByText("~$0.01")).toBeInTheDocument();
   });
 });