Polish workbench workspace usability

frontend/src/components/project/ProjectPanel.tsx

@@ -28,45 +28,64 @@ export function ProjectPanel({
 }: ProjectPanelProps): JSX.Element {
   return (
     <section data-testid="project-panel">
-      <h2>Projects</h2>
+      <div className="panel-title-row">
+        <div>
+          <p className="eyebrow">Context</p>
+          <h2>Projects</h2>
+        </div>
+        <span className="count-pill">{projects.length}</span>
+      </div>
       {loadingProjects ? <p>Loading projects...</p> : null}
 
-      <form onSubmit={onCreateProject}>
-        <input
-          value={projectForm.name}
-          onChange={(event) => onUpdateProjectForm({ ...projectForm, name: event.target.value })}
-          placeholder="Project name"
-        />
-        <input
-          value={projectForm.description ?? ''}
-          onChange={(event) => onUpdateProjectForm({ ...projectForm, description: event.target.value })}
-          placeholder="Description"
-        />
-        <input
-          value={projectForm.region ?? 'Kempen'}
-          onChange={(event) => onUpdateProjectForm({ ...projectForm, region: event.target.value })}
-          placeholder="Region"
-        />
-        <button type="submit">Create project</button>
+      <form className="compact-form" onSubmit={onCreateProject}>
+        <label>
+          Name
+          <input
+            value={projectForm.name}
+            onChange={(event) => onUpdateProjectForm({ ...projectForm, name: event.target.value })}
+            placeholder="Project name"
+          />
+        </label>
+        <label>
+          Description
+          <input
+            value={projectForm.description ?? ''}
+            onChange={(event) => onUpdateProjectForm({ ...projectForm, description: event.target.value })}
+            placeholder="Description"
+          />
+        </label>
+        <label>
+          Region
+          <input
+            value={projectForm.region ?? 'Kempen'}
+            onChange={(event) => onUpdateProjectForm({ ...projectForm, region: event.target.value })}
+            placeholder="Region"
+          />
+        </label>
+        <button className="primary-action" type="submit">
+          Create project
+        </button>
       </form>
 
       <div className="demo-actions">
-        <button type="button" onClick={onLoadDemoWorkflow} disabled={loadingDemoWorkflow} data-testid="load-demo-workflow">
+        <button className="secondary-action" type="button" onClick={onLoadDemoWorkflow} disabled={loadingDemoWorkflow} data-testid="load-demo-workflow">
           {loadingDemoWorkflow ? 'Loading demo...' : 'Load demo workflow'}
         </button>
         {demoWorkflowMessage ? <p>{demoWorkflowMessage}</p> : null}
       </div>
 
-      <ul>
+      <ul className="entity-list">
         {projects.map((project) => (
           <li key={project.id}>
             <button
+              className={project.id === selectedProjectId ? 'entity-card entity-card-active' : 'entity-card'}
               type="button"
               onClick={() => onSelectProject(project.id)}
               aria-pressed={project.id === selectedProjectId}
               data-testid={`project-select-${project.id}`}
             >
-              {project.name}
+              <strong>{project.name}</strong>
+              <span>{project.region || 'No region'}</span>
             </button>
           </li>
         ))}