Reach parity with last web iteration. (#162)

* feat: add Api and Session contexts

* feat(web): add machinery/new-session

* feat(web): add servers page

* chore(web): AppRouter spacing/ordering

* feat(web): add picker, missing update-roles call for now

* feat(web): add picker saves

* chore: add roleTransactions tests

* feat(web): add auth/login

packages/design-system/organisms/masthead/Authed.tsx

@@ -32,7 +32,7 @@ export const Authed = (props: Props) => {
         <MastheadBase>
             <MastheadAlignment>
                 <MastheadLeft>
-                    <MastheadA href="/servers">
+                    <MastheadA to="/servers">
                         <DynamicLogomark height={35} />
                     </MastheadA>
                     <InteractionBase

packages/design-system/organisms/masthead/Guest.tsx

@@ -14,12 +14,12 @@ export const Guest = () => (
     <MastheadBase>
         <MastheadAlignment>
             <MastheadLeft>
-                <MastheadA href="/">
+                <MastheadA to="/">
                     <DynamicLogotype height={30} />
                 </MastheadA>
             </MastheadLeft>
             <MastheadRight>
-                <MastheadA href="/auth/login">
+                <MastheadA to="/auth/login">
                     <Button size="small">
                         Login{' '}
                         <FaSignInAlt

packages/design-system/organisms/masthead/Masthead.styled.tsx

@@ -1,3 +1,4 @@
+import { Link } from '@reach/router';
 import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
 import { palette } from '@roleypoly/design-system/atoms/colors';
 import { transitions } from '@roleypoly/design-system/atoms/timings';
@@ -66,7 +67,7 @@ export const InteractionBase = styled.div<InteractionBaseProps>`
     }
 `;
 
-export const MastheadA = styled.a`
+export const MastheadA = styled(Link)`
     display: flex;
     align-items: center;
     justify-content: center;