Applying govuk controls in a few more places

acteng · Jul 14, 2023 · 4b16635 · 4b16635
1 parent 2bdad6d
commit 4b16635
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 22 deletions.
diff --git a/src/lib/common/ConfirmationModal.svelte b/src/lib/common/ConfirmationModal.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
+  import SecondaryButton from "../govuk/SecondaryButton.svelte";
+  import WarningButton from "../govuk/WarningButton.svelte";
   import Modal from "./Modal.svelte";
 
   const dispatch = createEventDispatcher();
@@ -28,6 +30,10 @@
   bind:canCloseByClickingBackground
 >
   <p>{message}</p>
-  <button type="button" on:click={onClickConfirm}>{confirmButtonText}</button>
-  <button type="button" on:click={onClickCancel}>{cancelButtonText}</button>
+  <div class="govuk-button-group">
+    <WarningButton on:click={onClickConfirm}>{confirmButtonText}</WarningButton>
+    <SecondaryButton on:click={onClickCancel}
+      >{cancelButtonText}</SecondaryButton
+    >
+  </div>
 </Modal>
diff --git a/src/lib/draw/StreetViewMode.svelte b/src/lib/draw/StreetViewMode.svelte
@@ -3,6 +3,7 @@
   import { currentMode, map, userSettings } from "../../stores";
   import type { Mode } from "../../types";
   import CollapsibleCard from "../common/CollapsibleCard.svelte";
+  import Radio from "../govuk/Radio.svelte";
   import type { EventHandler } from "./event_handler";
 
   export let eventHandler: EventHandler;
@@ -43,23 +44,16 @@
 </script>
 
 {#if $currentMode == thisMode}
-  <label>
-    <input
-      type="radio"
-      bind:group={$userSettings.streetViewImagery}
-      value="google"
-    />
-    Google Street View
-  </label>
-  <br />
-  <label>
-    <input
-      type="radio"
-      bind:group={$userSettings.streetViewImagery}
-      value="bing"
-    />
-    Bing Streetside
-  </label>
+  <Radio
+    legend="Source"
+    id="streetViewImagery"
+    choices={[
+      ["google", "Google Street View"],
+      ["bing", "Bing Streetside"],
+    ]}
+    inlineSmall
+    bind:value={$userSettings.streetViewImagery}
+  />
 
   <CollapsibleCard label="Help">
     <ul>

diff --git a/src/lib/sidebar/EntireScheme.svelte b/src/lib/sidebar/EntireScheme.svelte
@@ -175,8 +175,6 @@
   Export to GeoJSON
 </SecondaryButton>
 
-<hr />
-
 <div style="display: flex; justify-content: space-between">
   <p>{$gjScheme.features.length} {schemaPluralNoun(schema)}</p>
   <p>{$gjScheme.features.length} objects</p>

diff --git a/src/pages/App.svelte b/src/pages/App.svelte
@@ -110,7 +110,7 @@
       <ZoomOutMap {boundaryGeojson} />
     </div>
     <EntireScheme {authorityName} {schema} />
-    <br />
+    <hr />
     <InterventionList {schema} />
     <hr />
     <ContextualLayers />