Fix more UX/design debt

frontend/app/component/form/account_setup/AccountSetupForm.tsx

@@ -15,7 +15,7 @@ export function AccountSetupForm() {
   const navigate = useNavigate();
   function handleSubmit(event: React.FormEvent<AccountSetupFormElement>) {
     event.preventDefault();
-    navigate("/overview");
+    navigate("/overview#new_account");
   }
 
   return (

frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx

@@ -78,13 +78,11 @@ export function PollingStationChoiceForm() {
       </BottomBar>
       <details>
         <summary>
-          <p>
-            Weet je het nummer niet?
-            <br />
-            <span id="openPollingStationList" className="underlined pointer">
-              Bekijk de lijst met alle stembureaus
-            </span>
-          </p>
+          Weet je het nummer niet?
+          <br />
+          <span id="openPollingStationList" className="underlined pointer">
+            Bekijk de lijst met alle stembureaus
+          </span>
         </summary>
         <h2 className="form_title table_title">Kies het stembureau</h2>
         {(() => {

frontend/app/component/form/polling_station_choice/PollingStationSelector.module.css

@@ -6,6 +6,10 @@
 
 .input {
   text-align: right;
+  font-family: var(--font-number);
+  font-size: var(--font-size-body);
+  font-style: normal;
+  font-feature-settings: "ss09" on;
 }
 
 .message {

frontend/app/module/input/page/InputHomePage.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
 import { PollingStationChoiceForm } from "app/component/form/polling_station_choice/PollingStationChoiceForm";
@@ -11,11 +10,6 @@ export function InputHomePage() {
   const navigate = useNavigate();
   const { election } = useElection();
   const { statuses } = useElectionStatus();
-  const [showAlert, setShowAlert] = useState(true);
-
-  function hideAlert() {
-    setShowAlert(!showAlert);
-  }
 
   function finishInput() {
     navigate("/");
@@ -36,22 +30,16 @@ export function InputHomePage() {
         </section>
       </header>
       {statuses.every((s) => s.status === "Complete") && (
-        <Alert type="success" onClose={hideAlert}>
+        <Alert type="success">
           <h2>Alle stembureaus zijn twee keer ingevoerd</h2>
           <p>
             De resultaten van alle stembureaus in jouw gemeente zijn correct ingevoerd. Je kunt de
             uitslag nu definitief maken en het proces verbaal opmaken. Doe dit alleen als er vandaag
             niks meer herteld hoeft te worden.
           </p>
-          <Button onClick={finishInput}>Invoer afronden</Button>
-        </Alert>
-      )}
-      {showAlert && (
-        <Alert type="success" onClose={hideAlert}>
-          <h2>Je account is ingesteld</h2>
-          <p>
-            Zodra je een tellijst van een stembureau hebt gekregen kan je beginnen met invoeren.
-          </p>
+          <Button onClick={finishInput} size="md">
+            Invoer afronden
+          </Button>
         </Alert>
       )}
       <main>

frontend/app/module/overview/OverviewLayout.tsx

@@ -10,11 +10,11 @@ export function OverviewLayout() {
   return (
     <div className="app-layout">
       <PageTitle title="Overzicht verkiezingen - Abacus" />
-      <NavBar />
       <ElectionListProvider>
+        <NavBar />
         <Outlet />
+        <Footer />
       </ElectionListProvider>
-      <Footer />
     </div>
   );
 }

frontend/app/module/overview/page/OverviewPage.tsx

@@ -1,18 +1,25 @@
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import { Election, useElectionList } from "@kiesraad/api";
 import { IconCheckHeart, IconChevronRight } from "@kiesraad/icon";
-import { WorkStationNumber } from "@kiesraad/ui";
+import { Alert, WorkStationNumber } from "@kiesraad/ui";
 
 export function OverviewPage() {
   const navigate = useNavigate();
+  const location = useLocation();
   const handleRowClick = (election: Election) => {
     return () => {
       navigate(`/${election.id}/input`);
     };
   };
   const { electionList } = useElectionList();
 
+  const isNewAccount = location.hash === "#new_account";
+
+  function closeNewAccountAlert() {
+    navigate(location.pathname);
+  }
+
   return (
     <>
       <header>
@@ -23,6 +30,14 @@ export function OverviewPage() {
           <WorkStationNumber>16</WorkStationNumber>
         </section>
       </header>
+      {isNewAccount && (
+        <Alert type="success" onClose={closeNewAccountAlert}>
+          <h2>Je account is ingesteld</h2>
+          <p>
+            Zodra je een tellijst van een stembureau hebt gekregen kan je beginnen met invoeren.
+          </p>
+        </Alert>
+      )}
       <main>
         <article>
           <table id="overview" className="overview_table">

frontend/lib/ui/Alert/Alert.module.css

@@ -3,28 +3,24 @@
   background-color: var(--base-white);
   padding: 2rem 2rem 2rem 5rem;
   position: relative;
+  display: flex;
 
   > button {
     position: absolute;
     right: 2rem;
     top: 2rem;
   }
 
-  display: flex;
   aside {
     padding-top: 2px;
     flex: 0 0 40px;
     svg {
       width: 24px;
     }
   }
+
   section {
-    flex: 1 1 auto;
     max-width: 38rem;
-    p {
-      padding-bottom: 0;
-      margin-bottom: 0;
-    }
   }
 
   &.error {

frontend/lib/ui/Button/Button.module.css

@@ -77,6 +77,12 @@
     padding: 0.5rem 0.875rem;
   }
 
+  &.md {
+    font-size: var(--font-size-md);
+    line-height: 1.25rem;
+    padding: 0.625rem 1rem;
+  }
+
   &.lg {
     min-width: 13rem;
     font-weight: bold;

frontend/lib/ui/style/variables.css

@@ -25,7 +25,7 @@
   --font-header: "SpaceGrotesk";
   --font-header-body: "DMSans";
   --font-text: "DMSans";
-  --font-number: "GeistMono";
+  --font-number: "GeistMono", monospace, monospace;
 
   --font-size-body: 1.125rem;
   /* TODO: pick a better font size scale */