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/components/ActionIcon.tsx

@@ -0,0 +1,48 @@
+import {
+  IconDefinition,
+  faCircleExclamation,
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+const iconSizes = {
+  sm: 12,
+  md: 14.4,
+  lg: 18,
+}
+
+export interface ActionIconProps extends React.PropsWithChildren {
+  icon?: IconDefinition
+  bgClassName?: string
+  iconClassName?: string
+  size?: keyof typeof iconSizes
+}
+
+export const ActionIcon = ({
+  icon,
+  bgClassName,
+  iconClassName,
+  size = 'md',
+  children,
+}: ActionIconProps) => {
+  return (
+    <div
+      className={
+        'p-1 w-fit inline-grid place-content-center ' +
+        (bgClassName ||
+          'bg-chalkboard-100 group-hover:bg-chalkboard-90 hover:bg-chalkboard-90')
+      }
+    >
+      {children || (
+        <FontAwesomeIcon
+          icon={icon || faCircleExclamation}
+          width={iconSizes[size]}
+          height={iconSizes[size]}
+          className={
+            iconClassName ||
+            'text-liquid-20 group-hover:text-liquid-10 hover:text-liquid-10'
+          }
+        />
+      )}
+    </div>
+  )
+}