Redesign Friends Page according to new design

[timea-solid]

New Design: https://www.figma.com/proto/88xQawSSXzfQprEZPaKplZ/Solid-OS?node-id=1881-5435&starting-point-node-id=1881%3A5435&show-proto-sidebar=1

At the moment, we need to branch off post-milestone3m branch in solid-panes for this work to start. (state of 18.05.26)

[timea-solid]

@SharonStrats you have worked on socialPane. Here I attempted to breakdown the new design in smaller PRs. I would like you to go through the sub-tasks and add details or comment if you think it is possible to have the feature. If you see something missing, either in new design feel free to create sub-tasks. If you know there are features in the code which are not in the new design, also make sub-tasks so we can discuss.