Made the home page look a bit nicer

packages/react-app/components/layout/HomeActions.jsx

@@ -20,10 +20,10 @@ export const HomeActions = ({ contract, mySelf }) => {
     <Flex flexDirection="column" justifyContent="center" alignItems="center" w="full">
       <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>

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";
 
@@ -198,9 +199,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 &&

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;
+}