From a93b5c4dcf114a4e1148a9b686b4c10105f5838e Mon Sep 17 00:00:00 2001
From: Pete-Y-CS <133757676+Pete-Y-CS@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:32:48 +0000
Subject: [PATCH] Put about on landing page, remove ATIP word, fix small font
 thing (#550)

* Put about on landing page, remove ATIP word, fix small font thing

* Fix npm run check

* changes suggested in PR

---------

Co-authored-by: Peter York <peter.york@dft.gov.uk>
---
 src/lib/sketch/About.svelte          | 23 +++++++++++++++--------
 src/lib/sketch/FileManagement.svelte |  4 ++--
 src/pages/ChooseArea.svelte          | 12 +-----------
 src/pages/LandingPage.svelte         |  8 ++++++++
 src/pages/SketchSchemes.svelte       | 13 +------------
 5 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/src/lib/sketch/About.svelte b/src/lib/sketch/About.svelte
index 343f3e9e9..eb1e42b43 100644
--- a/src/lib/sketch/About.svelte
+++ b/src/lib/sketch/About.svelte
@@ -4,10 +4,10 @@
   export let open: boolean;
 </script>
 
-<Modal title="About the Active Travel Infrastructure Platform" bind:open>
+<Modal title="About Plan Your Active Travel Schemes" bind:open>
   <div class="govuk-prose">
     <p>
-      ATIP Scheme Sketcher v2 is an
+      Plan Your Active Travel Schemes is an
       <ExternalLink href="https://github.com/acteng/atip">
         open source project
       </ExternalLink> supported by Active Travel England and developed by:
@@ -26,6 +26,12 @@
           Peter York
         </ExternalLink>
       </li>
+      <li>
+        With UX design led by 
+        <ExternalLink href="https://www.linkedin.com/in/jadene-aderonmu-b4713771">
+          Jadene Aderonmu
+        </ExternalLink>
+      </li>
       <li>
         With UX help from
         <ExternalLink href="https://www.linkedin.com/in/madison-wang-841977bb/">
@@ -38,13 +44,13 @@
         </ExternalLink>
       </li>
       <li>
-        With great thanks to ATIP's various users for feedback, testing, and
+        With great thanks to our various users for feedback, testing, and
         ideas
       </li>
     </ul>
 
     <p>
-      ATIP builds on
+      Plan Your Active Travel Schemes builds on
       <ExternalLink href="https://www.openstreetmap.org/about">
         OpenStreetMap
       </ExternalLink>
@@ -54,16 +60,13 @@
         svelte-maplibre
       </ExternalLink>,
       <ExternalLink href="https://georust.org/">GeoRust</ExternalLink>,
-      <ExternalLink href="https://github.com/a-b-street/osm2streets">
-        osm2streets
-      </ExternalLink>,
       <ExternalLink href="https://material.io/resources/icons/">
         Material icons
       </ExternalLink>, and other open source projects.
     </p>
 
     <p>
-      We want your feedback about ATIP! Please <ExternalLink
+      We want your feedback about Plan Your Active Travel Schemes! Please <ExternalLink
         href="https://github.com/acteng/atip/issues/new"
       >
         start an issue on Github
@@ -77,6 +80,10 @@
 
     <h2>Recent changes</h2>
     <ul>
+      <li>
+        <b>Public Beta</b>
+        launched December 2024, with various UI improvements, better integration of browse and sketch tools, and official public access.
+      </li>
       <li>
         <b>v2</b>
         launched on 2 June 2023. Changes: a complete UI rewrite, new draw tools,
diff --git a/src/lib/sketch/FileManagement.svelte b/src/lib/sketch/FileManagement.svelte
index 275276066..735a0c03d 100644
--- a/src/lib/sketch/FileManagement.svelte
+++ b/src/lib/sketch/FileManagement.svelte
@@ -76,11 +76,11 @@
   </nav>
 
   <div style="display: flex; justify-content: space-between">
-    <div>
+    <p>
       <b>You are editing</b>
       <br />
       <span>{filename}</span>
-    </div>
+    </p>
 
     <SecondaryButton
       on:click={() => exportFile(authority, filename, $gjSchemes)}
diff --git a/src/pages/ChooseArea.svelte b/src/pages/ChooseArea.svelte
index 4570679bd..29b1d1753 100644
--- a/src/pages/ChooseArea.svelte
+++ b/src/pages/ChooseArea.svelte
@@ -7,7 +7,6 @@
     ErrorMessage,
     FileInput,
     Radio,
-    SecondaryButton,
     AutocompleteTextInput,
   } from "govuk-svelte";
   import { onMount } from "svelte";
@@ -21,7 +20,6 @@
     Popup,
     describeAuthority,
   } from "lib/common";
-  import About from "lib/sketch/About.svelte";
   import { schema as schemaStore } from "stores";
   import {
     FillLayer,
@@ -42,7 +40,6 @@
     features: [],
   };
 
-  let showAbout = false;
   const params = new URLSearchParams(window.location.search);
   let pageErrorMessage = params.get("error") || "";
   let uploadErrorMessage = "";
@@ -97,13 +94,7 @@
         <LoggedIn />
       </div>
 
-      <div style="display: flex; justify-content: space-between">
-        <h1>Scheme Sketcher</h1>
-
-        <SecondaryButton on:click={() => (showAbout = !showAbout)}>
-          About
-        </SecondaryButton>
-      </div>
+      <h1>Scheme Sketcher</h1>
 
       <ErrorMessage errorMessage={pageErrorMessage} />
 
@@ -204,7 +195,6 @@
     </div>
   </div>
 </div>
-<About bind:open={showAbout} />
 
 <style>
   :global(body) {
diff --git a/src/pages/LandingPage.svelte b/src/pages/LandingPage.svelte
index b7ad1c838..92136a44d 100644
--- a/src/pages/LandingPage.svelte
+++ b/src/pages/LandingPage.svelte
@@ -3,9 +3,13 @@
   // @ts-expect-error no declarations
   import { initAll } from "govuk-frontend";
   import { AlphaBanner, DefaultButton } from "govuk-svelte";
+  import About from "lib/sketch/About.svelte";
+  import { SecondaryButton } from "govuk-svelte";
   import { Header } from "lib/common";
   import { onMount } from "svelte";
 
+  let showAbout = false;
+
   onMount(async () => {
     // For govuk components. Must happen here.
     initAll();
@@ -25,6 +29,10 @@
   <AlphaBanner />
 
   <h1 style="margin-top: 30px">Welcome to Plan Your Active Travel Schemes!</h1>
+  <SecondaryButton on:click={() => (showAbout = true)}>
+    About
+  </SecondaryButton>
+  <About bind:open={showAbout} />
 
   <h2>Sketch Your Scheme:</h2>
   <p>
diff --git a/src/pages/SketchSchemes.svelte b/src/pages/SketchSchemes.svelte
index 06f19964c..214601b06 100644
--- a/src/pages/SketchSchemes.svelte
+++ b/src/pages/SketchSchemes.svelte
@@ -20,8 +20,6 @@
     Header,
   } from "lib/common";
   import { mode } from "scheme-sketcher-lib/draw/stores";
-  import { SecondaryButton } from "govuk-svelte";
-  import About from "lib/sketch/About.svelte";
   import FileManagement from "lib/sketch/FileManagement.svelte";
   import { ListMode, EditFeatureForm } from "scheme-sketcher-lib/sidebar";
   import { map, mapStyle, schema } from "stores";
@@ -35,8 +33,6 @@
   // FileManagement will set this up
   let gjSchemes = writable(emptySchemes(cfg));
 
-  let showAbout = false;
-
   let params = new URLSearchParams(window.location.search);
   // If the authority is invalid, it'll be handled in onMount asynchronously
   let authority = params.get("authority") || "";
@@ -93,12 +89,7 @@
         <LoggedIn />
       </div>
 
-      <div style="display: flex; justify-content: space-between">
-        <h2 style="margin-bottom: 0px">Scheme Sketcher</h2>
-        <SecondaryButton on:click={() => (showAbout = true)} noBottomMargin>
-          About
-        </SecondaryButton>
-      </div>
+      <h2 style="margin-bottom: 0px">Scheme Sketcher</h2>
     {/if}
 
     <FileManagement {gjSchemes} {authority} {filename} />
@@ -128,8 +119,6 @@
   </div>
 </div>
 
-<About bind:open={showAbout} />
-
 <style>
   * {
     box-sizing: border-box;