diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css index add6a945..96f264f3 100644 --- a/src/components/Button/Button.css +++ b/src/components/Button/Button.css @@ -1,25 +1,24 @@ .root { display: block; width: 100%; - font-size: 1.4rem; padding: 0.5rem; margin: 1rem 0; - background-color: #eee; - border: 1px solid #ddd; + background-color: #9B9B9B; + border-width: 0px; - &:hover { - background-color: #ddd; + /* Font */ + font-weight: bold; + font-size: 16px; + color: #FFFFFF; + letter-spacing: -0.4px; + + &:enabled:hover { + background-color: color(#9B9B9B blackness(+ 20%)); } - &:active { + &:enabled:active { background-color: #ccc; } &:disabled { cursor: auto; - color: #aaa; - - &:hover, - &:active { - background-color: #eee; - } } } diff --git a/src/containers/HeroSearchForm/HeroSearchForm.css b/src/containers/HeroSearchForm/HeroSearchForm.css index f3a5c9e2..20cef791 100644 --- a/src/containers/HeroSearchForm/HeroSearchForm.css +++ b/src/containers/HeroSearchForm/HeroSearchForm.css @@ -12,4 +12,11 @@ width: 100%; height: 50px; margin: 0; + text-align: right; +} + +.searchIcon { + display: inline-block; + margin-left: 12px; + margin-right: 12px; } diff --git a/src/containers/HeroSearchForm/HeroSearchForm.js b/src/containers/HeroSearchForm/HeroSearchForm.js index d703af58..c6ea4061 100644 --- a/src/containers/HeroSearchForm/HeroSearchForm.js +++ b/src/containers/HeroSearchForm/HeroSearchForm.js @@ -23,6 +23,9 @@ const HeroSearchForm = props => { /> );