Base layout

[slifty]

This adds some styling to what has been made so far to get it to match the designs, this is in preparation for adding functionality around the side pane.

Resolves #56

[reefdog]

Looks good. Over in TPT I followed the convention of prefixing Styled to styled components themselves, so rather than AppWrapper I'd have gone StyledApp (or maybe StyledAppWrapper for combined explicitness). I do like that as it distinguishes them from standard React components. It does get noisy though. What do you think?

[slifty]

Ahh that is nice -- more explicit for sure. I'll go add that in now.

[slifty]

Hmmm ok so the problem with the Styled prefix is that it might be TOO explicit in some cases. For example:

        <EditorWrapper>
          <Backdrop
            ref="backdrop">
            <Highlights>
              {this.generateFlaggedText()}
            </Highlights>
          </Backdrop>
          <EditorTextArea/>
        </EditorWrapper>

I don't THINK I would want to prefix Styled to all of those things (even though they are all styled components).

I wonder if something even more generic would make sense, like "Root" or "StyledRoot" for cases when it is just a, well, root styled component.

[slifty]

Did some reading up on this.

This article outlines an approach that uses an "S" namespace for styled components. So for instance:

const S = {};
S.Navigation = styled.div`/* styles */`;
S.Content = styled.div`/* styles */`;

This thread basically says to just call the root wrapper "Wrapper" instead of "NavigationWrapper"

I'm not entirely sure which path I prefer so I'm going to... punt temporarily and just keep it as is, not use the Styled convention after all. I like the idea of the namespace but I'm worried it will be one of those things where I do it and then two weeks later say "why did I get this triforce face tattoo"