From 8852e9d65b49f6ee281d8b7019b98870571320e0 Mon Sep 17 00:00:00 2001
From: Ru Chern Chong <hello@ruchern.xyz>
Date: Wed, 27 Sep 2023 01:13:33 +0800
Subject: [PATCH] Update layout and UI to centralise contents

---
 src/App.tsx | 86 +++++++++++++++++++++++++++--------------------------
 1 file changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2afc732..6808572 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -45,7 +45,7 @@ const App = () => {
 
   return (
     <div className="flex min-h-screen flex-col text-neutral-50">
-      <div className="prose prose-invert mx-auto flex w-full max-w-6xl grow flex-col justify-center px-4 py-16">
+      <div className="prose prose-invert mx-auto flex w-full max-w-6xl grow flex-col justify-center px-4 py-16 md:px-8">
         <div className="text-center">
           <h1>CPF Contribution Calculator</h1>
           <h2 className="flex flex-col items-center">
@@ -57,51 +57,53 @@ const App = () => {
             )}
           </h2>
         </div>
-        <SelectBox
-          name="age-group"
-          id="age-group"
-          onChange={(e) => setAgeGroup(ageGroups[Number(e.target.value)])}
-        >
-          {ageGroups.map(({ description }, index) => {
-            return (
-              <option key={index} value={index}>
-                {description}
-              </option>
-            );
-          })}
-        </SelectBox>
-        <SelectBox
-          name="cpf-income-ceiling"
-          id="cpf-income-ceiling"
-          defaultValue={currentYear}
-          onChange={(e) => setSelectedYear(e.target.value)}
-        >
-          {cpfIncomeCeilings.map(({ year }) => {
-            if (year === "SEPT2023") {
+        <div className="flex flex-col items-center">
+          <SelectBox
+            name="age-group"
+            id="age-group"
+            onChange={(e) => setAgeGroup(ageGroups[Number(e.target.value)])}
+          >
+            {ageGroups.map(({ description }, index) => {
               return (
-                <option key={year} value={year}>
-                  September 2023
+                <option key={index} value={index}>
+                  {description}
                 </option>
               );
-            }
+            })}
+          </SelectBox>
+          <SelectBox
+            name="cpf-income-ceiling"
+            id="cpf-income-ceiling"
+            defaultValue={currentYear}
+            onChange={(e) => setSelectedYear(e.target.value)}
+          >
+            {cpfIncomeCeilings.map(({ year }) => {
+              if (year === "SEPT2023") {
+                return (
+                  <option key={year} value={year}>
+                    September 2023
+                  </option>
+                );
+              }
 
-            return (
-              <option key={year} value={year}>
-                January {year}
-              </option>
-            );
-          })}
-        </SelectBox>
-        <input
-          type="number"
-          inputMode="decimal"
-          pattern="\d*"
-          placeholder="Gross Income e.g. 10000"
-          className="mb-2 w-full rounded-lg p-2 text-neutral-900 md:w-1/3"
-          onChange={(e) => setGrossIncome(Number(e.target.value))}
-        />
-        <div className="mb-4 italic text-red-300">
-          This is for illustration purposes only. No data are being stored.
+              return (
+                <option key={year} value={year}>
+                  January {year}
+                </option>
+              );
+            })}
+          </SelectBox>
+          <input
+            type="number"
+            inputMode="decimal"
+            pattern="\d*"
+            placeholder="Gross Income e.g. 10000"
+            className="mb-2 w-full rounded-lg p-2 text-neutral-900 md:w-1/3"
+            onChange={(e) => setGrossIncome(Number(e.target.value))}
+          />
+          <div className="mb-4 italic text-red-300">
+            This is for illustration purposes only. No data are being stored.
+          </div>
         </div>
         <div className="flex flex-col gap-y-2">
           {Boolean(grossIncome) && (