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/routes/Home.tsx

@@ -17,7 +17,7 @@ import { Link } from 'react-router-dom'
 import { ProjectWithEntryPointMetadata, HomeLoaderData } from '../Router'
 import Loading from '../components/Loading'
 import { useMachine } from '@xstate/react'
-import { homeCommandMeta, homeMachine } from '../machines/homeMachine'
+import { homeCommandConfig, homeMachine } from '../machines/homeMachine'
 import { ContextFrom, EventFrom } from 'xstate'
 import { paths } from '../Router'
 import {
@@ -147,7 +147,7 @@ const Home = () => {
     commands,
     send,
     state,
-    commandBarMeta: homeCommandMeta,
+    commandBarConfig: homeCommandConfig,
     owner: 'home',
   })
 
@@ -178,23 +178,24 @@ const Home = () => {
       <div className="w-full max-w-5xl px-4 mx-auto my-24 overflow-y-auto lg:px-0">
         <section className="flex justify-between">
           <h1 className="text-3xl text-bold">Your Projects</h1>
-          <div className="flex">
+          <div className="flex gap-2 items-center">
+            <small>Sort by</small>
             <ActionButton
               Element="button"
               className={
-                !sort.includes('name')
+                'text-sm ' +
+                (!sort.includes('name')
                   ? 'text-chalkboard-80 dark:text-chalkboard-40'
-                  : ''
+                  : '')
               }
               onClick={() => setSearchParams(getNextSearchParams(sort, 'name'))}
               icon={{
                 icon: getSortIcon(sort, 'name'),
-                bgClassName: !sort?.includes('name')
-                  ? 'bg-liquid-50 dark:bg-liquid-70'
-                  : '',
-                iconClassName: !sort?.includes('name')
-                  ? 'text-liquid-80 dark:text-liquid-30'
+                className: 'p-1.5',
+                iconClassName: !sort.includes('name')
+                  ? '!text-chalkboard-40'
                   : '',
+                size: 'sm',
               }}
             >
               Name
@@ -202,21 +203,19 @@ const Home = () => {
             <ActionButton
               Element="button"
               className={
-                !isSortByModified
+                'text-sm ' +
+                (!isSortByModified
                   ? 'text-chalkboard-80 dark:text-chalkboard-40'
-                  : ''
+                  : '')
               }
               onClick={() =>
                 setSearchParams(getNextSearchParams(sort, 'modified'))
               }
               icon={{
                 icon: sort ? getSortIcon(sort, 'modified') : faArrowDown,
-                bgClassName: !isSortByModified
-                  ? 'bg-liquid-50 dark:bg-liquid-70'
-                  : '',
-                iconClassName: !isSortByModified
-                  ? 'text-liquid-80 dark:text-liquid-30'
-                  : '',
+                className: 'p-1.5',
+                iconClassName: !isSortByModified ? '!text-chalkboard-40' : '',
+                size: 'sm',
               }}
             >
               Last Modified
@@ -225,11 +224,15 @@ const Home = () => {
         </section>
         <section>
           <p className="my-4 text-sm text-chalkboard-80 dark:text-chalkboard-30">
-            Are being saved at{' '}
-            <code className="text-liquid-80 dark:text-liquid-30">
+            Loaded from{' '}
+            <span className="text-energy-70 dark:text-energy-40">
               {defaultDirectory}
-            </code>
-            , which you can change in your <Link to="settings">Settings</Link>.
+            </span>
+            .{' '}
+            <Link to="settings" className="underline underline-offset-2">
+              Edit in settings
+            </Link>
+            .
           </p>
           {state.matches('Reading projects') ? (
             <Loading>Loading your Projects...</Loading>
@@ -254,7 +257,7 @@ const Home = () => {
               <ActionButton
                 Element="button"
                 onClick={() => send('Create project')}
-                icon={{ icon: faPlus }}
+                icon={{ icon: faPlus, iconClassName: 'p-1 w-4' }}
                 data-testid="home-new-file"
               >
                 New file