Add settings UI page (#171)

* Add theme colors from Figma

* Rough-in of AppHeader

* Add styled ActionButton

* Add react-router and placeholder Settings page

* Add ability to set persistent defaultDir

* Add react-hot-toast for save success message

* Add defaultProjectName setting

* Handle case of stale empty defaultDir in storage

* Wrap app in BrowserRouter

* Wrap test App in BrowserRouter

* Don't need BrowserRouter outside of testing
because we use RouterProvider

src/App.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { App } from './App'
+import { BrowserRouter } from 'react-router-dom';
 
 let listener: ((rect: any) => void) | undefined = undefined
 ;(global as any).ResizeObserver = class ResizeObserver {
@@ -12,7 +13,9 @@ let listener: ((rect: any) => void) | undefined = undefined
 }
 
 test('renders learn react link', () => {
-  render(<App />)
+  render(<BrowserRouter>
+    <App />
+  </BrowserRouter>)
   const linkElement = screen.getByText(/Variables/i)
   expect(linkElement).toBeInTheDocument()
 })