Polish: UI theme colors, onboarding dismiss, Export button in sidebar (#270)

* Light mode style fixes

* Fix dismissing onboarding for nested routes

* Refactor: move export button to  user side panel

* Refactor: add project data to modeling page loader

* Add new ProjectSidebarMenu

* Convert AppHeader to use ProjectSidebarMenu

* Move ExportButton to ProjectSidebarMenu

* Fix: hide default dir setting in Web

* Add DownloadAppBanner when in Prod

* Add unit tests to ProjectSidebarMenu

* Tiny CSS rounding tweak to sidebars

* Fix formatting in unit tests

* Update icons and logos to use full-color Kitt

* Fix: dim UI on camera drag, not click

src/routes/Home.tsx

@@ -40,6 +40,8 @@ const Home = () => {
     defaultProjectName: s.defaultProjectName,
   }))
 
+  const modifiedSelected = sort?.includes('modified') || !sort || sort === null
+
   const refreshProjects = useCallback(
     async (projectDir = defaultDir) => {
       const readProjects = (
@@ -184,11 +186,19 @@ const Home = () => {
           <div className="flex">
             <ActionButton
               Element="button"
+              className={
+                !sort.includes('name')
+                  ? 'text-chalkboard-80 dark:text-chalkboard-40'
+                  : ''
+              }
               onClick={() => setSearchParams(getNextSearchParams('name'))}
               icon={{
                 icon: getSortIcon('name'),
                 bgClassName: !sort?.includes('name')
-                  ? 'bg-liquid-30 dark:bg-liquid-70'
+                  ? 'bg-liquid-50 dark:bg-liquid-70'
+                  : '',
+                iconClassName: !sort?.includes('name')
+                  ? 'text-liquid-80 dark:text-liquid-30'
                   : '',
               }}
             >
@@ -196,15 +206,19 @@ const Home = () => {
             </ActionButton>
             <ActionButton
               Element="button"
+              className={
+                !modifiedSelected
+                  ? 'text-chalkboard-80 dark:text-chalkboard-40'
+                  : ''
+              }
               onClick={() => setSearchParams(getNextSearchParams('modified'))}
               icon={{
                 icon: sort ? getSortIcon('modified') : faArrowDown,
-                bgClassName: !(
-                  sort?.includes('modified') ||
-                  !sort ||
-                  sort === null
-                )
-                  ? 'bg-liquid-30 dark:bg-liquid-70'
+                bgClassName: !modifiedSelected
+                  ? 'bg-liquid-50 dark:bg-liquid-70'
+                  : '',
+                iconClassName: !modifiedSelected
+                  ? 'text-liquid-80 dark:text-liquid-30'
                   : '',
               }}
             >