improved filter design

[VishakhaSainani]

fixes : #141

Screenshots:

I used div , li and ul were giving lint errors. Check this out.

[VishakhaSainani]

@wingkwong Please review it.

[wingkwong]

1. the filter is not working at all...
2. the new filter is a bit large. You may refer to ant design select - the first one in basic usage. It's close to my expectation.
3. wrap the style by .react-quiz-container. i.e. .react-quiz-container .quiz-result-filter
4. need a better name for custom-select

[VishakhaSainani]

@wingkwong Requested changes updated please check.

[wingkwong]

now it's better. got some comments left.

• the select is a bit large. let's set the height to 32px.
• make the arrow down a bit smaller
• the select option should be overlap the content instead of pushing it down
• there is a slide effect when you open the options then un-focus. please remove that.

[VishakhaSainani]

@wingkwong

• the select is a bit large. let's set the height to 32px
  Can you please elaborate this one, of what item exactly the height needs to be changed. The select button or the cursor arrow or the dropdown menu.

Check it out now :-
Screenshots:-

[wingkwong]

Can you please elaborate this one, of what item exactly the height needs to be changed. The select button or the cursor arrow or the dropdown menu.

The overall height. Now it's 42px. Change to 32px. The text and arrow down icon can be a bit smaller.

[VishakhaSainani]

@wingkwong Check it out. Thankyou.

[wingkwong]

• open a select option list, unfocus should close the list.
• the font size of selected option and that of options in the list are not aligned
• the gap between the select and the list should be reduced a bit
  

[VishakhaSainani]

@wingkwong I hope it's good enough now, check it out. Thankyou