[search][s]: improve layout/design in the search page.

components/search/Input.tsx

@@ -27,6 +27,7 @@ export default function Input({ query }) {
          onChange={handleChange}
          placeholder='Search'
          aria-label='Search'
+         className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
        />
     </form>
   )

components/search/Item.tsx

@@ -2,8 +2,8 @@ import Link from 'next/link'
 
 export default function Item({ datapackage }) {
   return (
-    <div>
-      <h3 className="text-2xl font-semibold">
+    <div className="mb-6">
+      <h3 className="text-xl font-semibold">
         <Link href={`/@${datapackage.organization ? datapackage.organization.name : 'dataset'}/${datapackage.name}`}>
           <a className="text-primary">{ datapackage.title || datapackage.name }</a>
         </Link>

components/search/Sort.tsx

@@ -1,6 +1,6 @@
 export default function Sort({ selected }) {
   return (
-    <div>
+    <div className="inline-block my-6 float-right">
       <label htmlFor="field-order-by">Order by:</label>
       <select className="bg-white" id="field-order-by" name="sort">
         <option value="score:desc">Relevance</option>

components/search/Total.tsx

@@ -1,3 +1,7 @@
 export default function Total({ total }) {
-  return <h1 className="text-4xl font-semibold text-primary">{ total } results found</h1>
+  return (
+    <h1 className="text-3xl font-semibold text-primary my-6 inline-block">
+      { total } results found
+    </h1>
+  )
 }