From 2551f5590f9ee06d754031ba7487314345611581 Mon Sep 17 00:00:00 2001
From: Varun <varunv5000@gmail.com>
Date: Fri, 3 Dec 2021 11:34:29 -0500
Subject: [PATCH] Made the home page look a bit nicer

---
 .../components/layout/HomeActions.jsx         |  6 ++---
 packages/react-app/pages/index.js             | 27 +++++++++++++++----
 packages/react-app/styles/index.css           |  9 +++++++
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/packages/react-app/components/layout/HomeActions.jsx b/packages/react-app/components/layout/HomeActions.jsx
index c9596ff..1ff32a7 100644
--- a/packages/react-app/components/layout/HomeActions.jsx
+++ b/packages/react-app/components/layout/HomeActions.jsx
@@ -18,12 +18,12 @@ export const HomeActions = ({ contract, mySelf }) => {
   };
   return (
     <Flex flexDirection="column" justifyContent="center" alignItems="center" w="full">
-      <Heading>Welcome to dRecruit!</Heading>
+      <Heading>Welcome to Recruiter Party!</Heading>
       <HStack>
-        <Button m="5" size="lg" colorScheme="purple" onClick={() => router.push("/profile/edit-profile")}>
+        <Button m="5" size="md" colorScheme="purple" onClick={() => router.push("/profile/edit-profile")}>
           JOIN AS A BUILDER
         </Button>
-        <Button m="5" size="lg" colorScheme="green" onClick={() => router.push("/profile/approval")}>
+        <Button m="5" size="md" colorScheme="green" onClick={() => router.push("/profile/approval")}>
           APPROVE REQUESTS
         </Button>
       </HStack>
diff --git a/packages/react-app/pages/index.js b/packages/react-app/pages/index.js
index 8e8db33..324d2d5 100644
--- a/packages/react-app/pages/index.js
+++ b/packages/react-app/pages/index.js
@@ -6,7 +6,8 @@ import {
   Code,
   HStack,
   InputGroup,
-  InputLeftElement,
+  InputLeftAddon,
+  Input,
   Box,
   Heading,
   SimpleGrid,
@@ -17,6 +18,7 @@ import {
   AlertDialogHeader,
   AlertDialogContent,
   AlertDialogOverlay,
+  Container,
 } from "@chakra-ui/react";
 import { Web3Context } from "../helpers/Web3Context";
 import { CeramicClient } from "@ceramicnetwork/http-client";
@@ -28,7 +30,6 @@ import { fromString, toString } from "uint8arrays";
 import { DataModel } from "@glazed/datamodel";
 import { DIDDataStore } from "@glazed/did-datastore";
 import { EthereumAuthProvider, SelfID, WebClient } from "@self.id/web";
-import { Table, Modal, Form, Input, Divider, InputNumber, Select, Typography, Tag, Space, PageHeader } from "antd";
 import { randomBytes } from "@stablelib/random";
 import { ethers } from "ethers";
 
@@ -197,9 +198,25 @@ function Home() {
           </AlertDialogContent>
         </AlertDialogOverlay>
       </AlertDialog>
-      <HomeActions contract={dRecruitContract} mySelf={context.self} />
-      <Input type="search" placeholder="Search" onChange={e => setSearchTerm(e.target.value)} />
-      {isSearching && <div>Searching ...</div>}
+      <Container className="mainInput">
+        <HomeActions contract={dRecruitContract} mySelf={context.self} />
+
+      </Container>
+      <Container>
+      <div style={{ borderTop: "2px groove", padding: "20px", marginTop: "30px"}}>
+        <Heading size="md">Search for a Candidate:</Heading>
+        <InputGroup>
+
+        <Input
+          type="search"
+          placeholder="Search..."
+          borderColor="purple.500"
+          onChange={e => setSearchTerm(e.target.value)}
+        />
+        </InputGroup>
+        {isSearching && <div>Searching ...</div>}
+        </div>
+        </Container>
       <Heading>Found developers:</Heading>
       <SimpleGrid columns={4} spacing={10}>
         {isMatch &&
diff --git a/packages/react-app/styles/index.css b/packages/react-app/styles/index.css
index 537c756..72f64f3 100644
--- a/packages/react-app/styles/index.css
+++ b/packages/react-app/styles/index.css
@@ -19,3 +19,12 @@ code {
 .blockies {
   border-radius: 50%;
 }
+
+.mainInput {
+  border: 2px solid rgba(89, 50, 196, 0.6);
+  box-sizing: border-box;
+  box-shadow: 0px 8px 64px rgba(111, 63, 245, 0.08);
+  border-radius: 8px;
+  padding: 30px;
+  justify-content: center;
+}