From 42fa72a315a49324b265901d2c84d22ab746ea3e Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Fri, 26 May 2023 20:49:17 +0100
Subject: [PATCH] Getting search looking decent

---
 src/app/components/search/SubmitButton.tsx | 19 +++++++++
 src/app/search/page.tsx                    | 45 +++++++++++++---------
 2 files changed, 46 insertions(+), 18 deletions(-)
 create mode 100644 src/app/components/search/SubmitButton.tsx

diff --git a/src/app/components/search/SubmitButton.tsx b/src/app/components/search/SubmitButton.tsx
new file mode 100644
index 0000000..a64541c
--- /dev/null
+++ b/src/app/components/search/SubmitButton.tsx
@@ -0,0 +1,19 @@
+interface SubmitButtonProps {
+  buttonDisabled: boolean;
+  redirectFunc: () => void;
+}
+
+const SubmitButton = ({ buttonDisabled, redirectFunc }: SubmitButtonProps) => {
+  return (
+    <button
+      type="button"
+      disabled={buttonDisabled}
+      onClick={redirectFunc}
+      className="focus:shadow-outline mt-3 rounded bg-brandtan px-4 py-2 font-bold text-white shadow hover:bg-hovertan focus:outline-none disabled:opacity-25 disabled:hover:bg-hovetan"
+    >
+      Submit
+    </button>
+  );
+};
+
+export default SubmitButton;
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index eb95d9a..47f5666 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -39,24 +39,33 @@ export default function Search() {
   };
 
   return (
-    <div className="flex min-h-screen flex-col items-center pt-40">
-      <form>
-        <label
-          className="mb-2 block text-sm font-bold text-gray-700"
-          htmlFor="search"
-        >
-          Enter your postcode to get started
-        </label>
-        <input
-          id="search"
-          className="w-full appearance-none rounded border-2 border-gray-200 bg-gray-200 px-4 py-2 leading-tight text-gray-700 focus:border-brandmidblue focus:bg-white focus:outline-none"
-          type="text"
-          placeholder="Enter your postcode"
-          onChange={handlePostcodeChange}
-          onKeyDown={handleSubmit}
-        />
-        <SubmitButton {...submitProps} />
-      </form>
+    <div className="flex min-h-screen flex-col items-center pt-20">
+      <div className="w-1/2 flex flex-col justify-center bg-gray-100 rounded p-4 shadow-md">
+        <div className="w-full flex justify-center text-center mb-7 text-gray-700">
+          We'll search for the most recent data about your property, so we can
+          begin to build a profile of the works that can be done and the impact
+          that will have
+        </div>
+        <form className="w-full flex flex-col items-center">
+          <label
+            className="mb-2 block text-sm font-bold text-gray-700 text-center"
+            htmlFor="search"
+          >
+            Enter your postcode to get started
+          </label>
+          <div className="flex justify-center">
+            <input
+              id="search"
+              className="w-full appearance-none rounded border-2 border-gray-200 bg-gray-200 px-8 py-2 leading-tight text-gray-700 focus:border-brandmidblue focus:bg-white focus:outline-none"
+              type="text"
+              placeholder="Enter your postcode"
+              onChange={handlePostcodeChange}
+              onKeyDown={handleSubmit}
+            />
+          </div>
+          <SubmitButton {...submitProps} />
+        </form>
+      </div>
     </div>
   );
 }