Replace standard giphy component with custom one to match UI design

[talmahaj]

When we originally built the giphy integration in #501 we decided to release an MVP of the feature using giphy's standard components.

However, we want to be able to implement this functionality with the beautiful UI/UX Karim designed in https://app.zeplin.io/project/5dbdf1a40bdfd3832e35c9c5/dashboard?seid=5f16767d5b45918c4c4701d4 which requires us to build a custom component. This should enable the following:

• Match the UI Karim has designed for both the Add Note screen and the giphy modal
  • Giphy modal should still slide up to accommodate the keyboard when needed, just like in the standard component
• Crop gifs to match rounded corner square in design (think we can try to center the crop horizontally and vertically, and see how good that looks...)
• Each time screen is loaded, gif carousel should display 20 random gifs from the "money" search query - https://giphy.com/search/money (maybe from the first 100 results, assuming they get less relevant eventually?)
• Tapping Search Giphy (either the fixed black button, or the last item in the carousel) brings up full-screen search. If possible, display the same 20 random "money" gifs in the same order as in carousel by default, all of which should disappear once user starts entering another search query. Tapping outside of the search modal or grabbing drawer should close modal and does not need to preserve search query in case user opens it up again - they can see the default again

Requirement Addition:19 August 2020:

• Standard GIF colored placeholder tiles should be displayed within the carousel and the search screen when GIF's are loading

[Tas4tari]

As per stand up: 25 August 2020: Moving this to the backlog for possible future implementation