From 53d2b244a1e8361767ad988bb0d6492375a48759 Mon Sep 17 00:00:00 2001
From: Brogan Clements <brogancle@gmail.com>
Date: Thu, 17 Feb 2022 01:35:49 -0500
Subject: [PATCH] Update the styling of the forms

---
 src/App.css                    | 19 +++++++++++++++++++
 src/App.js                     | 15 +++++++++------
 src/components/LangDropdown.js |  2 +-
 src/components/SearchBar.js    |  1 +
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index b517cce..9c4052f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -269,3 +269,22 @@ footer {
     color:#444;
   }
 }
+
+.searchbar {
+  padding-bottom: 0.3em;
+}
+
+.searchterm {
+  border: 1px solid #666;
+  border-radius: 0.3em;
+  padding: 0.15em 0.15em 0.15em 0.15em;
+  width: 15em;
+}
+
+.languages {
+  border: 1px solid #666;
+  border-radius: 0.3em;
+  padding: 0.15em 0.15em 0.15em 0.15em;
+  width: 15.4em;
+
+}
diff --git a/src/App.js b/src/App.js
index 4de4e02..43e26f5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -229,11 +229,7 @@ function App() {
         <h1>
           <a href="https://ebookfoundation.github.io/free-programming-books/">free-programming-books</a>
         </h1>
-        <div>
-          <SearchBar changeParameter={changeParameter} />
-          <LangDropdown changeParameter={changeParameter} data={data} />
-        </div>
-        <br />
+
         <p>
           <img
             class="emoji"
@@ -245,13 +241,20 @@ function App() {
           />{" "}
           Freely available programming books
         </p>
+
+        <div>
+          <SearchBar changeParameter={changeParameter} />
+          <LangDropdown changeParameter={changeParameter} data={data} />
+        </div>
+        <br />
+
         <p class="view">
           <a href="https://github.com/EbookFoundation/free-programming-books">
             View the Project on GitHub <small>EbookFoundation/free-programming-books</small>
           </a>
         </p>
         <p>
-          Does a link not work? 
+          Does a link not work?
           <br />
           <a href="https://github.com/EbookFoundation/free-programming-books/issues/" target="_blank">
             Report an error on GitHub
diff --git a/src/components/LangDropdown.js b/src/components/LangDropdown.js
index 1fcf868..c8ab8ed 100644
--- a/src/components/LangDropdown.js
+++ b/src/components/LangDropdown.js
@@ -45,7 +45,7 @@ function LangDropdown({ changeParameter, data }) {
     });
   // console.log(options);
   return (
-    <select onChange={handleChange} name="languages" id="languages">
+    <select onChange={handleChange} name="languages" id="languages" class="languages">
       <option key="allLangs" value="">
         All Languages
       </option>
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index 6d700f1..d19d7d4 100644
--- a/src/components/SearchBar.js
+++ b/src/components/SearchBar.js
@@ -18,6 +18,7 @@ function SearchBar(props) {
         type="text"
         name="searchTerm"
         placeholder="Enter Book Name"
+        className="searchterm"
         onChange={handleChange}
       />
     </form>