style: change survey parameter style

[sgratzl]

closes #716

Prerequisites:

• Unless it is a hotfix it should be merged against the dev branch
• Branch is up-to-date with the branch to be merged with, i.e. dev
• Build is successful
• Code is cleaned up and formatted

Summary

current state:

@Letsgohyde take a look, please

[netlify]

✔️ Preview link ready!

🔨 Explore the source changes: 328a363

🔍 Inspect the deploy logs: https://app.netlify.com/sites/cmu-delphi-covidcast/deploys/60001243c579270008969f9a

😎 Browse the preview: https://deploy-preview-717--cmu-delphi-covidcast.netlify.app

[tildechris]

Can you make the spacing below the geo search bar match the spacing above?

Also, what are your thoughts on selecting all text in the search box when it is focused? I when I go to type in a different geo I found myself typing in the middle of the previous value. I think select-all-on-focus is default behavior in many search boxes.

[sgratzl]

[tildechris]

Thanks the spacing and highlighting looks good. For counties without enough data, the "no data available" is above the search bar (z-index issue maybe?):

[sgratzl]

Thanks the spacing and highlighting looks good. For counties without enough data, the "no data available" is above the search bar (z-index issue maybe?):

fixed

[Raphael-Hyde]

This is looking great, can you update the spacing between the cal arrows to 36px?

Thanks @sgratzl

[Raphael-Hyde]

Other styling and spacing feedback:
1.

2.

3.

4.

Thanks @sgratzl

[sgratzl]

it is difficult to create a pixel-perfect match of the design cause

• the search field has to be compatible with the remaining website, since it is the same widget as in the other views
• the HTML/DOM hierarchy implied by the implementation makes it tricky to sometimes align items
• it should work on different screen resolutions

we can take a look at it together in a screenshare session, since in my experience it is faster than applying designs based on screenshots

[tildechris]

LGTM. I think this version looks and functions well. Thanks.

[Raphael-Hyde]

Thanks for making those updates and sharing the limitations. LGTM! :)