Style 💅

chrisjm · Aug 6, 2018 · a91f810 · a91f810
1 parent 4646cb7
commit a91f810
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 7 deletions.
diff --git a/src/App.js b/src/App.js
@@ -4,7 +4,7 @@ import BrewerySearch from './containers/BrewerySearch'
 class App extends Component {
   render() {
     return (
-      <div>
+      <div className="container mx-auto mt-8 mb-4">
         <BrewerySearch />
       </div>
     );

diff --git a/src/components/Brewery.js b/src/components/Brewery.js
@@ -5,7 +5,7 @@ class Brewery extends PureComponent {
   render() {
     const { brewery } = this.props
     return (
-      <li>
+      <li className="p-4 mb-2 rounded bg-grey-light">
         <span>{brewery.name}, </span>
         <span>{brewery.address}, </span>
         <span>{brewery.city}, </span>

diff --git a/src/components/BreweryList.js b/src/components/BreweryList.js
@@ -5,8 +5,8 @@ class BreweryList extends PureComponent {
   render() {
     const { breweries } = this.props
     return (
-      <div>
-        <ul>
+      <div className="p-6 rounded bg-grey-lighter">
+        <ul className="list-reset">
           {breweries.map((brewery) => <Brewery key={brewery.id} brewery={brewery} />)}
         </ul>
       </div>

diff --git a/src/containers/SearchForm.js b/src/containers/SearchForm.js
@@ -21,9 +21,8 @@ class SearchForm extends Component {
 
   render() {
     return (
-      <form onSubmit={this.handleSubmit}>
-        <input type="text" onChange={this.handleChange} placeholder="e.g. 'san diego' or 'ohio'" />
-        <input type="submit" value="Search" />
+      <form onSubmit={this.handleSubmit} className="m-4 sm:m-0 sm:mb-4">
+        <input type="text" onChange={this.handleChange} placeholder="e.g. 'san diego' or 'ohio'" className="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline" />
       </form>
     )
   }