refactor: review welcome modal design

apps/client/src/features/editors/welcome/Welcome.module.scss

@@ -24,6 +24,10 @@
   display: flex;
   gap: 1rem;
   justify-content: end;
+
+  :first-child {
+    margin-right: auto;
+  }
 }
 
 .tableContainer {
@@ -38,14 +42,20 @@
   tbody {
     background-color: $gray-1300;
     tr {
-      &:has(:hover) {
+      &:hover:not(.current) {
         background-color: $gray-1350;
       }
+      .current {
+        &:hover {
+          background-color: $blue-900;
+        }
+      }
     }
   }
 
   tr {
     height: 2rem;
+    cursor: pointer;
   }
 
   th,
@@ -62,4 +72,8 @@
 
 .current {
   background-color: $blue-700;
+
+  &:hover {
+    background-color: $blue-900;
+  }
 }

apps/client/src/features/editors/welcome/Welcome.tsx

@@ -5,6 +5,7 @@ import { loadDemo, loadProject } from '../../../common/api/db';
 import { invalidateAllCaches } from '../../../common/api/utils';
 import ExternalLink from '../../../common/components/external-link/ExternalLink';
 import { appVersion, discordUrl, documentationUrl, websiteUrl } from '../../../externals';
+import * as Editor from '../editor-utils/EditorUtils';
 
 import ImportProjectButton from './composite/ImportProjectButton';
 import WelcomeProjectList from './composite/WelcomeProjectList';
@@ -68,30 +69,29 @@ export default function Welcome(props: WelcomeProps) {
             </div>
             <div className={style.column}>
               <div className={style.header}>Welcome to Ontime</div>
+              <Editor.Title>Recent Projects</Editor.Title>
               <div className={style.tableContainer}>
                 <table className={style.table}>
                   <thead>
                     <tr>
                       <th>Project Name</th>
                       <th>Last Used</th>
-                      <th />
                     </tr>
                   </thead>
                   <WelcomeProjectList loadProject={handleLoadProject} onClose={handleClose} />
                 </table>
               </div>
-
-              <div className={style.buttonRow}>
-                <ImportProjectButton onFinish={handleClose} />
-                <Button size='sm' variant='ontime-subtle' onClick={handleLoadDemo}>
-                  Load demo project
-                </Button>
-                <Button size='sm' variant='ontime-filled' onClick={handleCallCreate}>
-                  Create new...
-                </Button>
-              </div>
             </div>
           </div>
+          <div className={style.buttonRow}>
+            <Button size='sm' variant='ontime-ghosted' onClick={handleLoadDemo}>
+              Load demo project
+            </Button>
+            <ImportProjectButton onFinish={handleClose} />
+            <Button size='sm' variant='ontime-filled' onClick={handleCallCreate}>
+              Create new...
+            </Button>
+          </div>
         </ModalBody>
       </ModalContent>
     </Modal>

apps/client/src/features/editors/welcome/composite/WelcomeProjectList.tsx

@@ -1,5 +1,3 @@
-import { Button } from '@chakra-ui/react';
-
 import { useOrderedProjectList } from '../../../../common/hooks-query/useProjectList';
 
 import style from '../Welcome.module.scss';
@@ -18,26 +16,16 @@ export default function WelcomeProjectList(props: WelcomeProjectListProps) {
       {data.reorderedProjectFiles.map((project) => {
         if (project.filename === data.lastLoadedProject) {
           return (
-            <tr className={style.current} key={project.filename}>
+            <tr className={style.current} key={project.filename} onClick={onClose}>
               <td>{project.filename}</td>
               <td>Loaded from last session</td>
-              <td>
-                <Button variant='ontime-subtle' size='sm' onClick={onClose}>
-                  Continue
-                </Button>
-              </td>
             </tr>
           );
         }
         return (
-          <tr key={project.filename}>
+          <tr key={project.filename} onClick={() => loadProject(project.filename)}>
             <td>{project.filename}</td>
             <td>{new Date(project.updatedAt).toLocaleString()}</td>
-            <td>
-              <Button variant='ontime-subtle' size='sm' onClick={() => loadProject(project.filename)}>
-                Load
-              </Button>
-            </td>
           </tr>
         );
       })}