diff --git a/src/App.scss b/src/App.scss index e92aa97..abb39f3 100644 --- a/src/App.scss +++ b/src/App.scss @@ -126,6 +126,16 @@ html, body, #root, .app { width: 70%; } + label[for=zipInput] { + color: white; + position: fixed; + font-size: 24px; + } + + [data-has-input=true] label[for=zipInput] { + color: transparent; + } + #zipInput{ width: 100%; height: 30%; @@ -141,7 +151,7 @@ html, body, #root, .app { #locateMe { height: 35px; - width: 35px; + padding: 0; color: white; background-color: #232444; border: none; @@ -153,21 +163,6 @@ html, body, #root, .app { } - - -::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: white; - opacity: 1; /* Firefox */ -} - -:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: white; -} - -::-ms-input-placeholder { /* Microsoft Edge */ - color: white; -} - .eventList{ background-color: white; height: 500px; diff --git a/src/SearchBar.js b/src/SearchBar.js index f69a41b..efd971d 100644 --- a/src/SearchBar.js +++ b/src/SearchBar.js @@ -6,12 +6,11 @@ import locateImage from './img/icon_512x512.png'; export function SearchBar(props){ - const[input, setInput] = useState(props.currZip); + const [input, setInput] = useState(props.currZip || ''); function onlySetNumbers(event){ let baseValue = event.target.value; let replacedVal = baseValue.replace(/\D*/g, '') - console.log(`baseValue: ${baseValue}, replacedVal: ${replacedVal}`); setInput(replacedVal) } @@ -48,14 +47,14 @@ export function SearchBar(props){ History.push(window.location.pathname+'?zip='+input); } - return(