Begin work on UI design improvements

src/lib/shared/SchemeSummaryArea.svelte

@@ -0,0 +1,54 @@
+<DateInput
+  label="Date of design review"
+  bind:value={$state.summary.dateDesignReview}
+/>
+<TextInput
+  label="Scheme reference"
+  bind:value={$state.summary.schemeReference}
+/>
+<TextInput label="Scheme name" bind:value={$state.summary.schemeName} />
+<TextArea label="Scheme summary" bind:value={$state.summary.schemeSummary} />
+<TextArea
+  label="Scheme information reviewed"
+  bind:value={$state.summary.schemeInfoReviewed}
+/>
+
+<Select
+  label="Authority"
+  emptyOption
+  choices={pairs(authorities)}
+  bind:value={$state.summary.authority}
+/>
+<Select
+  label="Transport / Combined Authority"
+  emptyOption
+  choices={pairs(transportOrCombinedAuthorities)}
+  bind:value={$state.summary.transportOrCombinedAuthority}
+/>
+<SelectWithCustom
+  label="Region"
+  emptyOption
+  choices={pairs(regions)}
+  bind:value={$state.summary.region}
+/>
+<SelectWithCustom
+  label="Funding programme"
+  emptyOption
+  choices={pairs(fundingProgrammes)}
+  bind:value={$state.summary.fundingProgramme}
+/>
+<SelectWithCustom
+  label="Design stage"
+  emptyOption
+  choices={pairs(designStages)}
+  bind:value={$state.summary.designStage}
+/>
+<TextArea
+  label="Funding conditions"
+  bind:value={$state.summary.fundingConditions}
+/>
+
+<TextInput
+  label="Inspector email address"
+  bind:value={$state.summary.inspectorEmail}
+/>

src/lib/shared/SchemeSummaryRoute.svelte

@@ -0,0 +1,52 @@
+<DateInput
+  label="Date of design review"
+  bind:value={$state.summary.dateDesignReview}
+/>
+<TextInput
+  label="Scheme reference"
+  bind:value={$state.summary.schemeReference}
+/>
+<TextInput label="Scheme name" bind:value={$state.summary.schemeName} />
+<TextArea label="Scheme summary" bind:value={$state.summary.schemeSummary} />
+<TextArea
+  label="Scheme information reviewed"
+  bind:value={$state.summary.schemeInfoReviewed}
+/>
+
+<AutocompleteTextInput
+  label="Authority"
+  name="Authority"
+  options={pairs(authorities)}
+  bind:value={$state.summary.authority}
+/>
+<AutocompleteTextInput
+  label="Transport / Combined Authority"
+  name="Transport / Combined Authority"
+  options={pairs(transportOrCombinedAuthorities)}
+  bind:value={$state.summary.transportOrCombinedAuthority}
+/>
+<SelectWithCustom
+  label="Region"
+  emptyOption
+  choices={pairs(regions)}
+  bind:value={$state.summary.region}
+/>
+<Radio
+  legend="Funding programme"
+  choices={pairs(fundingProgrammes)}
+  bind:value={$state.summary.fundingProgramme}
+/>
+<Radio
+  legend="Design stage"
+  choices={pairs(designStages)}
+  bind:value={$state.summary.designStage}
+/>
+<TextArea
+  label="Funding conditions"
+  bind:value={$state.summary.fundingConditions}
+/>
+
+<TextInput
+  label="Inspector email address"
+  bind:value={$state.summary.inspectorEmail}
+/>

src/routes/+layout.svelte

@@ -2,7 +2,7 @@
   import "../style/main.css";
   // @ts-expect-error no declarations
   import { initAll } from "govuk-frontend";
-  import { WarningText } from "govuk-svelte";
+  import { AlphaBanner, WarningText } from "govuk-svelte";
   import { page } from "$app/stores";
   import { getTitle } from "$lib/nav";
 
@@ -12,23 +12,32 @@
 <svelte:head>
   <title>{getTitle($page.url.pathname)}</title>
 </svelte:head>
-
-<WarningText>
-  This is an experimental tool by <a href="mailto:[email protected]">
-    Dustin
-  </a>
-  and
-  <a href="mailto:[email protected]">Pete</a>
-  . Use only for internal testing. Please give feedback in the
-  <a
-    href="https://departmentfortransportuk.sharepoint.com/:x:/r/sites/ATE-Data-and-DigitalRLG-ATE-ATE/Shared%20Documents/ATIP/ATE%20Tools%202024%20Feedback%20Log_V2.xlsx?d=w31a14d35e31f46a8b9cf6f4f697b2692&csf=1&web=1&e=jLUWFN"
-    target="_blank"
-  >
-    Web Tools tab
-  </a>
-  .
-</WarningText>
+<div class="govuk-width-container">
+  <header class="govuk-header">
+    <img class="ate-logo" src="/assets/images/ATE-Logo.webp" />
+  </header>
+</div>
+<div class="sub-header-border" />
+<div class="govuk-width-container">
+  <AlphaBanner />
+</div>
 
 <div class="govuk-prose">
   <slot />
 </div>
+
+<style>
+  .govuk-header {
+    background: white;
+    height: 150px;
+  }
+  .sub-header-border {
+    width: 100vw;
+    margin-left: -8px;
+    border-bottom: 0.5rem solid #007161;
+  }
+  .ate-logo {
+    height: 90%; 
+    background: white;
+  }
+</style>