Prepare command bar to support modeling commands (#1184)

* Tweak toaster look and feel

* Add icons, tweak plus icon names

* Rename commandBarMeta to commandBarConfig

* Refactor command bar, add support for icons

* Create a tailwind plugin for aria-pressed button state

* Remove overlay from behind command bar

* Clean up toolbar

* Button and other style tweaks

* Icon tweaks follow-up: make old icons work with new sizing

* Delete unused static icons

* More CSS tweaks

* Small CSS tweak to project sidebar

* Add command bar E2E test

* fumpt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* fix typo in a comment

* Fix icon padding (built version only)

* Update onboarding and warning banner icons padding

* Misc minor style fixes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/index.tsx

@@ -4,8 +4,6 @@ import reportWebVitals from './reportWebVitals'
 import { Toaster } from 'react-hot-toast'
 import { Router } from './Router'
 import { HotkeysProvider } from 'react-hotkeys-hook'
-import { inspect } from '@xstate/inspect'
-import { DEV } from 'env'
 
 // uncomment for xstate inspector
 // if (DEV)
@@ -19,10 +17,20 @@ root.render(
   <HotkeysProvider>
     <Router />
     <Toaster
-      position="bottom-center"
+      position="top-center"
       toastOptions={{
+        style: {
+          borderRadius: '0.25rem',
+        },
         className:
-          'bg-chalkboard-10 dark:bg-chalkboard-90 text-chalkboard-110 dark:text-chalkboard-10',
+          'bg-chalkboard-10 dark:bg-chalkboard-90 text-chalkboard-110 dark:text-chalkboard-10 rounded-sm border-chalkboard-20/50 dark:border-chalkboard-80/50',
+        success: {
+          iconTheme: {
+            primary: 'oklch(93.31% 0.227 122.3deg)',
+            secondary: 'oklch(24.49% 0.01405 158.7deg)',
+          },
+          duration: 1500,
+        },
       }}
     />
   </HotkeysProvider>