From 94424c725a08ec19791b1a5770bc05d87e1f60fb Mon Sep 17 00:00:00 2001
From: Frederic Heem <frederic.heem@gmail.com>
Date: Mon, 4 Nov 2024 18:07:28 -0300
Subject: [PATCH] rounder border

---
 .../src/mortgageRepaymentCalculator.ts        | 19 +++++++++++++------
 .../src/style.css                             |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/examples/mortgage-repayment-calculator/src/mortgageRepaymentCalculator.ts b/examples/mortgage-repayment-calculator/src/mortgageRepaymentCalculator.ts
index b9ba047a..14a5004e 100644
--- a/examples/mortgage-repayment-calculator/src/mortgageRepaymentCalculator.ts
+++ b/examples/mortgage-repayment-calculator/src/mortgageRepaymentCalculator.ts
@@ -38,10 +38,10 @@ export default function (context: Context) {
       grid-template-columns: 1fr;
     }
     > section {
-      padding: 1rem;
     }
 
     .calculator-form {
+      padding: 1rem;
       background-color: var(--white);
       header {
         display: flex;
@@ -49,7 +49,7 @@ export default function (context: Context) {
         button {
           text-decoration: underline;
           background: none;
-          color: var(--grey-500);
+          color: var(--grey-700);
         }
       }
       form {
@@ -66,11 +66,17 @@ export default function (context: Context) {
         }
       }
     }
+    .result-container {
+      background-color: var(--white);
+    }
     .result {
+      padding: 1rem;
+
       color: var(--grey-100);
       background-color: var(--grey-900);
-      padding: 1rem;
+      border-bottom-left-radius: 4rem;
       display: flex;
+      height: 100%;
       flex-direction: column;
       gap: 1rem;
       &.no-result {
@@ -83,7 +89,7 @@ export default function (context: Context) {
 
       p,
       span {
-        color: var(--grey-500);
+        color: var(--grey-300);
       }
       .payments {
         background-color: var(--grey-1000);
@@ -252,11 +258,11 @@ export default function (context: Context) {
           button({ type: "submit" }, "Calculate Repayment")
         )
       ),
-      () =>
+      section({ class: "result-container" }, () =>
         monthlyRepaymentState.val == ""
           ? section(
               { class: "result no-result" },
-              img({ src: "./assets/images/illustration-empty.svg" }),
+              img({ src: "./assets/images/illustration-empty.svg", alt: "" }),
               h1("Results shown here"),
               p(
                 "Complete the form and click “calculate repayments” to see what your monthly repayments would be."
@@ -283,6 +289,7 @@ export default function (context: Context) {
                 )
               )
             )
+      )
     );
   };
 }
diff --git a/examples/mortgage-repayment-calculator/src/style.css b/examples/mortgage-repayment-calculator/src/style.css
index bd24720a..66599dd6 100644
--- a/examples/mortgage-repayment-calculator/src/style.css
+++ b/examples/mortgage-repayment-calculator/src/style.css
@@ -39,7 +39,7 @@ button[type="submit"] {
 }
 
 label {
-  color: var(--grey-500);
+  color: var(--grey-700);
   font-size: 0.8rem;
   font-weight: 600;
   margin-bottom: 1rem;