Styled Component Refactor

[ajbdev]

Current problems:

Styled Components are combined with actual interface components

At the very least move the styled components to their own related component style (a la CSS modules styles).

Styled Components could be more reusable

There are a few common UI elements (e.g., menu buttons) that could be organized into a shared style component. Identify which components can be reused and put it into it's own file.

Styled Component declarations are unnecessarily verbose (use generics to remove function signatures)

There's a much better convention that simplifies the syntax and maintains types using generics:

const Heading = styled.h1<{ active: boolean }>`
  color: ${props => (props.active ? 'red' : 'blue')};
`;

(From: https://blog.agney.dev/styled-components-&-typescript/)

Rewrite all styled components declarations in this form.

[ajbdev]

See here, this method is even better: https://stackoverflow.com/questions/47077210/using-styled-components-with-props-and-typescript/52045733#52045733