Account switcher (#85)

* Update the account-create and signin views to use the design system.

Also:
- Add borderDark to the theme
- Start to an account selector in the signin flow

* Dark mode fixes in signin ui

* Track multiple active accounts and provide account-switching UI

* Add test tooling for an in-memory pds

* Add complete integration tests for login and the account switcher

src/view/lib/ThemeContext.tsx

@@ -18,6 +18,7 @@ export type PaletteColor = {
   textInverted: string
   link: string
   border: string
+  borderDark: string
   icon: string
   [k: string]: string
 }

src/view/lib/hooks/usePalette.ts

@@ -6,6 +6,7 @@ export interface UsePaletteValue {
   view: ViewStyle
   btn: ViewStyle
   border: ViewStyle
+  borderDark: ViewStyle
   text: TextStyle
   textLight: TextStyle
   textInverted: TextStyle
@@ -25,6 +26,9 @@ export function usePalette(color: PaletteColorName): UsePaletteValue {
     border: {
       borderColor: palette.border,
     },
+    borderDark: {
+      borderColor: palette.borderDark,
+    },
     text: {
       color: palette.text,
     },

src/view/lib/themes.ts

@@ -13,6 +13,7 @@ export const defaultTheme: Theme = {
       textInverted: colors.white,
       link: colors.blue3,
       border: '#f0e9e9',
+      borderDark: '#e0d9d9',
       icon: colors.gray3,
 
       // non-standard
@@ -32,6 +33,7 @@ export const defaultTheme: Theme = {
       textInverted: colors.blue3,
       link: colors.blue0,
       border: colors.blue4,
+      borderDark: colors.blue5,
       icon: colors.blue4,
     },
     secondary: {
@@ -42,6 +44,7 @@ export const defaultTheme: Theme = {
       textInverted: colors.green4,
       link: colors.green1,
       border: colors.green4,
+      borderDark: colors.green5,
       icon: colors.green4,
     },
     inverted: {
@@ -52,6 +55,7 @@ export const defaultTheme: Theme = {
       textInverted: colors.black,
       link: colors.blue2,
       border: colors.gray3,
+      borderDark: colors.gray2,
       icon: colors.gray5,
     },
     error: {
@@ -62,6 +66,7 @@ export const defaultTheme: Theme = {
       textInverted: colors.red3,
       link: colors.red1,
       border: colors.red4,
+      borderDark: colors.red5,
       icon: colors.red4,
     },
   },
@@ -257,6 +262,7 @@ export const darkTheme: Theme = {
       textInverted: colors.black,
       link: colors.blue3,
       border: colors.gray6,
+      borderDark: colors.gray5,
       icon: colors.gray5,
 
       // non-standard
@@ -284,6 +290,7 @@ export const darkTheme: Theme = {
       textInverted: colors.white,
       link: colors.blue3,
       border: colors.gray3,
+      borderDark: colors.gray4,
       icon: colors.gray1,
     },
   },