Merge pull request #23 from ruchernchong/feature/clean-up-layout-ui

Update layout and UI to centralise contents
ruchernchong · Sep 26, 2023 · bea22bb · bea22bb
2 parents 4f6ebe2 + 8852e9d
commit bea22bb
Showing 1 changed file with 44 additions and 42 deletions.
diff --git 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) && (