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
and https://www.figma.com/proto/88xQawSSXzfQprEZPaKplZ/Solid-OS?node-id=2692-9781&t=Idjpnqw0NDfwgMKZ-1&scaling=scale-down-width&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=2415%3A9068
We branch off staging

[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.