Fine-tune ripple effects to indicate the user's clicking

[masakudamatsu]

NOTE: This issue will be redundant if we solve issue #108 with the ripple blowing away the popup.

Problem

Currently, the ripple effect is not noticeable enough for

• clicking the autocomplete suggestions
• clicking the close button for searched place info

possible solutions for autocomplete suggestions

• Make the ripple color's contrast high enough
• Adjust the animation duration so the ripple is not too fast

possible solutions for close button

• I cannot figure out why the ripple doesn't appear...

[masakudamatsu]

If we set a very long animation duration like 2000ms, we do see the ripple effect.

But it's not clear what duration is the best.

We also need to coordinate the ripple animation with the transition animation. For the search box, the duration of animation for the ripple effect (600ms set in ButtonCircle.js) is not coordinated with that for closing the search box (duration.modal.exit used in Search.js).

Setting both to be 250ms, however, won't allow us to notice the ripple as the search box disappears quickly.