Reviewer UI (first version)

[smacker]

Part of #47

Based on #45

It's a little different from wireframes:

1. There are no breadcrumbs
2. Tables aren't scrollable, but tab content is. It's huge pain to make TBODY scrollable (actually you can't without overriding table layout by css) And then they are inside another flexible div. It's nightmare. I spent half of the day and almost implemented it. But it has too many hacks and I found few cases when it works wrong. We definitely need separate task for it or maybe @ricardobaeta can come up with another solution
3. Better select control is implemented in @ricardobaeta PR, we will replace it later

P.S. There is some magic of mixing grid with flexbox because I had no choice.

[bzz]

@smacker great!

For changes that touch UI part, I find that also having a screenshot attached to PR helps to speed up the review process.

[smacker]

@bzz screenshot added

[bzz]

Looks great to me.

I guess there will be subsequent tasks on using a mock data in components to show features, and then replacing it with real data from endpoint in #44

[carlosms]

Looks like a very good first version

I've seen just one issue, the contents appear to go past the width no matter my window size:

And a couple of comments:

• I'd prefer to see the mock data somehow separated, and the table code close to final
• If we merge this as a first version, let's add a comment to Reviewer: new page on the frontend, showing ML-extracted features #47 saying that breadcrumbs and scrollable table are missing

[smacker]

Thanks, @carlosms I didn't have the bug with the width of the table. Will try to reproduce.

I want to rebase this PR using new components, so @ricardobaeta will be able to start doing visual design on this page without reimplementing the work he did already for annotation page.

[smacker]

Rebased on #65 to unlock Ricardo.
It looks like this now:

Problem with table width is fixed.