From 654ac0455d482db84d040ecf28275e4129911730 Mon Sep 17 00:00:00 2001
From: Narbeh Shahnazarian <narbwork@gmail.com>
Date: Sat, 20 Nov 2021 16:08:01 -0800
Subject: [PATCH 1/6] Adds blurb about what glosseta is

---
 public/locales/en/common.json |  1 +
 src/pages/index.tsx           | 27 +++++++++++++++++++++------
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 4cc0f11..06c52d7 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -1,5 +1,6 @@
 {
     "web3GlossaryHeading": "Web3 Glossary",
+    "glossetaDescription": "Glosseta is an open-source glossary meant to help people explore and learn the terminology behind web3",
 
     "searchInputGroupAriaLabel" : "Search Bar",
     "searchIconAriaLabel" : "Magnifying glass image",
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 85fb168..2aad549 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,9 +1,17 @@
 import type { NextPage } from "next";
-import { HStack, VStack, Image, chakra, Heading } from "@chakra-ui/react";
+import {
+  HStack,
+  VStack,
+  Image,
+  chakra,
+  Heading,
+  Text,
+  Box,
+} from "@chakra-ui/react";
 import PageLayout from "./components/layout/page";
 import SearchBar from "./search/search-bar";
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { useTranslation } from 'next-i18next';
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useTranslation } from "next-i18next";
 
 const Home: NextPage = () => {
   const { t } = useTranslation();
@@ -14,10 +22,17 @@ const Home: NextPage = () => {
         <VStack>
           <Image src="/glosseta.png" alt="Glosseta logo" width={300} />
           <Heading padding={1} color="white">
-            {t('web3GlossaryHeading')}
+            {t("web3GlossaryHeading")}
           </Heading>
           <HStack spacing={3}>
-            <SearchBar baseWidth={"80vw"} smWidth={"30vw"}/>
+            <Box>
+              <Text textAlign="center" fontSize={{ base: "xs", sm: "md" }}>
+                {t("glossetaDescription")}
+              </Text>
+            </Box>
+          </HStack>
+          <HStack spacing={3}>
+            <SearchBar baseWidth={"80vw"} smWidth={"30vw"} />
           </HStack>
         </VStack>
       </chakra.main>
@@ -27,7 +42,7 @@ const Home: NextPage = () => {
 
 export const getStaticProps = async ({ locale }: { locale: string }) => ({
   props: {
-    ...(await serverSideTranslations(locale, ['common'])),
+    ...(await serverSideTranslations(locale, ["common"])),
   },
 });
 

From a9dd158bc70232bb2237cf30450e670eaa3f1d8a Mon Sep 17 00:00:00 2001
From: Narbeh Shahnazarian <narbwork@gmail.com>
Date: Sat, 20 Nov 2021 16:11:53 -0800
Subject: [PATCH 2/6] Force text color to be white

---
 src/pages/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2aad549..609f27e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -26,7 +26,11 @@ const Home: NextPage = () => {
           </Heading>
           <HStack spacing={3}>
             <Box>
-              <Text textAlign="center" fontSize={{ base: "xs", sm: "md" }}>
+              <Text
+                textAlign="center"
+                fontSize={{ base: "xs", sm: "md" }}
+                color="white"
+              >
                 {t("glossetaDescription")}
               </Text>
             </Box>

From 5d0b8456f35b80337ce7e64ccb6be1d966fab2d0 Mon Sep 17 00:00:00 2001
From: Narbeh Shahnazarian <narbwork@gmail.com>
Date: Sat, 20 Nov 2021 17:20:55 -0800
Subject: [PATCH 3/6] Adds styling tweaks

- Adds more sizing params for the search-bar
- Adds placeholder text for the search bar
- Adds styling to the app description
---
 src/pages/index.tsx             |  7 ++++---
 src/pages/search/index.tsx      |  4 ++--
 src/pages/search/search-bar.tsx | 19 +++++++++++++++++--
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 609f27e..eca3c3d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -21,13 +21,14 @@ const Home: NextPage = () => {
       <chakra.main>
         <VStack>
           <Image src="/glosseta.png" alt="Glosseta logo" width={300} />
-          <Heading padding={1} color="white">
+          <Heading as="h1" padding={1} color="white">
             {t("web3GlossaryHeading")}
           </Heading>
           <HStack spacing={3}>
             <Box>
               <Text
-                textAlign="center"
+                width="100%"
+                padding={2}
                 fontSize={{ base: "xs", sm: "md" }}
                 color="white"
               >
@@ -36,7 +37,7 @@ const Home: NextPage = () => {
             </Box>
           </HStack>
           <HStack spacing={3}>
-            <SearchBar baseWidth={"80vw"} smWidth={"30vw"} />
+            <SearchBar baseWidth={"80vw"} smWidth={"50vw"} mdWidth={"50vw"} lgWidth={"30vw"} />
           </HStack>
         </VStack>
       </chakra.main>
diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
index e1ab12a..d4975fb 100644
--- a/src/pages/search/index.tsx
+++ b/src/pages/search/index.tsx
@@ -26,7 +26,7 @@ const SearchResults = ({
   if (isError) {
     return (
       <PageLayout>
-        <SearchBar baseWidth={"80vw"} smWidth={"50vw"} />
+        <SearchBar baseWidth={"80vw"} smWidth={"50vw"} mdWidth={"50vw"} lgWidth={"30vw"} />
         <chakra.main>
           <SimpleGrid
             columns={1}
@@ -47,7 +47,7 @@ const SearchResults = ({
   return (
     <>
       <PageLayout>
-        <SearchBar baseWidth={"80vw"} smWidth={"50vw"} />
+        <SearchBar baseWidth={"80vw"} smWidth={"50vw"} mdWidth={"50vw"} lgWidth={"30vw"} />
         <chakra.main>
           <SimpleGrid
             columns={1}
diff --git a/src/pages/search/search-bar.tsx b/src/pages/search/search-bar.tsx
index 901a4ba..471a6d9 100644
--- a/src/pages/search/search-bar.tsx
+++ b/src/pages/search/search-bar.tsx
@@ -3,7 +3,12 @@ import { Input, InputGroup, InputLeftElement, HStack } from "@chakra-ui/react";
 import { useState, SetStateAction } from "react";
 import { useTranslation } from "next-i18next";
 
-const SearchBar = ({ baseWidth, smWidth }: any): JSX.Element => {
+const SearchBar = ({
+  baseWidth,
+  smWidth,
+  mdWidth,
+  lgWidth,
+}: any): JSX.Element => {
   const [searchTerm, setSearchTerm] = useState("");
   const { t } = useTranslation();
 
@@ -36,9 +41,19 @@ const SearchBar = ({ baseWidth, smWidth }: any): JSX.Element => {
                 color="black"
                 rounded="lg"
                 onChange={handleSearchTermChange}
-                width={{ base: baseWidth, sm: smWidth }}
+                width={{
+                  base: baseWidth,
+                  sm: smWidth,
+                  md: mdWidth,
+                  lg: lgWidth,
+                }}
                 type="search"
                 id="search"
+                placeholder="Search for a word i.e. web3"
+                _placeholder={{
+                  color: "gray.300",
+                  fontSize: { base: "sm", sm: "md" },
+                }}
                 onClick={(event) => {
                   event.currentTarget.scrollIntoView();
                 }}

From da3450b09d114d29ed68d20a6b1e5068857a25af Mon Sep 17 00:00:00 2001
From: Narbeh Shahnazarian <narbwork@gmail.com>
Date: Sat, 20 Nov 2021 17:36:25 -0800
Subject: [PATCH 4/6] CSS tweaks on description

---
 src/pages/index.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index eca3c3d..f4d9f0a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -25,11 +25,10 @@ const Home: NextPage = () => {
             {t("web3GlossaryHeading")}
           </Heading>
           <HStack spacing={3}>
-            <Box>
+            <Box width="100%" letterSpacing="wide">
               <Text
-                width="100%"
                 padding={2}
-                fontSize={{ base: "xs", sm: "md" }}
+                fontSize={{ base: "sm", sm: "md" }}
                 color="white"
               >
                 {t("glossetaDescription")}
@@ -37,7 +36,12 @@ const Home: NextPage = () => {
             </Box>
           </HStack>
           <HStack spacing={3}>
-            <SearchBar baseWidth={"80vw"} smWidth={"50vw"} mdWidth={"50vw"} lgWidth={"30vw"} />
+            <SearchBar
+              baseWidth={"80vw"}
+              smWidth={"50vw"}
+              mdWidth={"50vw"}
+              lgWidth={"30vw"}
+            />
           </HStack>
         </VStack>
       </chakra.main>

From dc5ddb2462f7accc823a8978b14421686ba30667 Mon Sep 17 00:00:00 2001
From: Narbeh Shahnazarian <narbwork@gmail.com>
Date: Sat, 20 Nov 2021 17:47:42 -0800
Subject: [PATCH 5/6] Further styling tweaks to about description

---
 src/pages/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f4d9f0a..359a3ed 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -27,8 +27,9 @@ const Home: NextPage = () => {
           <HStack spacing={3}>
             <Box width="100%" letterSpacing="wide">
               <Text
+              textAlign="center"
                 padding={2}
-                fontSize={{ base: "sm", sm: "md" }}
+                fontSize={{ base: "xs", md: "sm" }}
                 color="white"
               >
                 {t("glossetaDescription")}

From acc5c5de2fdf19c3872bad6680ba6269af6c24ab Mon Sep 17 00:00:00 2001
From: Narbeh Shahnazarian <narbwork@gmail.com>
Date: Sat, 20 Nov 2021 18:05:53 -0800
Subject: [PATCH 6/6] Makes placeholder text a bit brighter

---
 src/pages/search/search-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/search/search-bar.tsx b/src/pages/search/search-bar.tsx
index 471a6d9..351096c 100644
--- a/src/pages/search/search-bar.tsx
+++ b/src/pages/search/search-bar.tsx
@@ -51,7 +51,7 @@ const SearchBar = ({
                 id="search"
                 placeholder="Search for a word i.e. web3"
                 _placeholder={{
-                  color: "gray.300",
+                  color: "gray.500",
                   fontSize: { base: "sm", sm: "md" },
                 }}
                 onClick={(event) => {