From f886e09aa5fcbc4d12e2377e56ec25122dddafd7 Mon Sep 17 00:00:00 2001
From: Gurkaran-Singh <Gurkaran.Singh@coxautoinc.com>
Date: Thu, 6 Jan 2022 01:06:19 -0500
Subject: [PATCH] changes to save button

---
 src/components/Header.tsx                 | 2 +-
 src/components/PageHeading.tsx            | 9 +++++++++
 src/components/UserName.tsx               | 2 +-
 src/components/index.ts                   | 1 +
 src/layouts/GeneralLayout.tsx             | 1 +
 src/pages/CreateContact/Createcontact.tsx | 9 +++++----
 tailwind.config.js                        | 3 ++-
 7 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 src/components/PageHeading.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f572db3..a779e3f 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -6,7 +6,7 @@ import logo from "../images/logo.svg";
 import { UserName } from "../components";
 const Header = () => {
   return (
-    <div className="w-container flex border-b bg-whiteSmoke border-grey-dark h-70 justify-center">
+    <div className="w-container flex border-b bg-whiteSmoke border-grey-header h-70 justify-center">
       <input
         onClick={() => {
           //Go Back
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
new file mode 100644
index 0000000..937a2ae
--- /dev/null
+++ b/src/components/PageHeading.tsx
@@ -0,0 +1,9 @@
+const PageHeading = () => {
+  return (
+    <div className="mb-20 text-center py-20 h-70 text-lg w-full bg-white border-grey-header  border-b">
+      New Contact
+    </div>
+  );
+};
+
+export default PageHeading;
diff --git a/src/components/UserName.tsx b/src/components/UserName.tsx
index 5ec0b5f..a394c38 100644
--- a/src/components/UserName.tsx
+++ b/src/components/UserName.tsx
@@ -13,7 +13,7 @@ const UserName = () => {
         alt="text"
       />
       <p className="text-tiny text-center py-14 ml-8 justify-center">
-        {"JOhndow.near"}
+        {"Johndoe.near"}
       </p>
       <input
         onClick={() => {
diff --git a/src/components/index.ts b/src/components/index.ts
index e647f5a..e2eef66 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
 export { default as CustomInput } from "./CustomInput";
 export { default as Header } from "./Header";
 export { default as UserName } from "./UserName";
+export { default as PageHeading } from "./PageHeading";
diff --git a/src/layouts/GeneralLayout.tsx b/src/layouts/GeneralLayout.tsx
index e29a095..88d8da7 100644
--- a/src/layouts/GeneralLayout.tsx
+++ b/src/layouts/GeneralLayout.tsx
@@ -4,6 +4,7 @@ const GeneralLayout: React.FC = ({ children }) => {
   return (
     <Suspense fallback={null}>
       <Header />
+      <div>New Contact</div>
       {children}
     </Suspense>
   );
diff --git a/src/pages/CreateContact/Createcontact.tsx b/src/pages/CreateContact/Createcontact.tsx
index 7354bf4..c5e58da 100644
--- a/src/pages/CreateContact/Createcontact.tsx
+++ b/src/pages/CreateContact/Createcontact.tsx
@@ -1,6 +1,6 @@
 import { Form, Formik, ErrorMessage } from "formik";
 import * as yup from "yup";
-import { CustomInput, Header } from "../../components";
+import { CustomInput, Header, PageHeading } from "../../components";
 const fields = [
   {
     title: "Full Name",
@@ -52,11 +52,12 @@ const CreateContact = () => {
   };
   const renderError = (message: string) => <p className="">{message}</p>;
   const onSubmit = (values: typeof initialValues) => {
-    console.log(values);
+    //Handle the form values -> make post request
   };
   return (
     <div>
       <Header />
+      <PageHeading />
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
@@ -79,9 +80,9 @@ const CreateContact = () => {
             ))}
 
             <button
-              className="bg-blue w-115 text-white h-40 mt-30 rounded-lg mx-auto flex m-20 justify-center"
+              className="bg-blue px-10 w-115 text-white h-40 mt-30 rounded-lg mx-auto flex m-20 justify-center"
               type="submit">
-              Save
+              <span className="pt-5 text-lg">{"Save  >"}</span>
             </button>
           </Form>
         )}
diff --git a/tailwind.config.js b/tailwind.config.js
index 7987625..1fc6847 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,6 +17,7 @@ module.exports = {
     },
     spacing: {
       1: "1px",
+      5: "5px",
       8: "8px",
       10: "10px",
       14: "14px",
@@ -41,7 +42,7 @@ module.exports = {
     },
     extend: {},
     colors: {
-      grey: { light: "#FCFCFC", dark: "#BEBEC2" },
+      grey: { light: "#FCFCFC", dark: "#BEBEC2", header: "#DFDFE0" },
       title: "#6F6E73",
       white: "#FFFFFF",
       blue: "#885FFF",