From 625f9b40015895f65abf4510a47d066e16753464 Mon Sep 17 00:00:00 2001
From: Joe Knapper <jaknapper@hotmail.com>
Date: Tue, 20 May 2025 12:59:49 +0100
Subject: [PATCH] Ttile case in all buttons and properties, larger settings
 headers

---
 webapp/src/assets/less/theme.less                  |  7 ++++++-
 webapp/src/components/appContent.vue               | 10 +++++-----
 .../aboutComponents/devTools.vue                   |  6 ------
 .../aboutComponents/statusPane.vue                 |  6 +++---
 .../paneBackgroundDetect.vue                       |  8 ++++----
 .../settingsComponents/CSMSettings.vue             |  4 ++--
 .../CSMCalibrationSettings.vue                     |  4 ++--
 .../settingsComponents/cameraSettings.vue          | 10 +++++-----
 .../cameraCalibrationSettings.vue                  | 10 +++++-----
 .../settingsComponents/streamSettings.vue          |  4 ++--
 .../tabContentComponents/settingsContent.vue       |  9 ++++-----
 .../tabContentComponents/slideScanContent.vue      | 14 +++++++-------
 12 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/webapp/src/assets/less/theme.less b/webapp/src/assets/less/theme.less
index a2a1dfcf..a8c6e80f 100644
--- a/webapp/src/assets/less/theme.less
+++ b/webapp/src/assets/less/theme.less
@@ -80,7 +80,11 @@
 // Nav
 //
 
-@nav-header-font-size: 12px;
+@nav-header-font-size: 16px;
+.uk-nav-header{
+    text-transform:none;
+}
+
 
 //
 // Subnav
@@ -358,6 +362,7 @@ a:hover {
     padding: 0 8px;
     border-color: @global-border;
     margin-bottom: 2px;
+    text-transform:none !important;
 }
 
 .uk-button-default {
diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index 2662eebc..fcbf7296 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -205,27 +205,27 @@ export default {
     topTabs: function() {
       let tabs = [
         {
-          id: "view",
+          id: "View",
           icon: "visibility",
           component: viewContent
         },
         {
-          id: "navigate",
+          id: "Navigate",
           icon: "gamepad",
           component: navigateContent
         },
         {
-          id: "background detect",
+          id: "Background Detect",
           icon: "background_replace",
           component: backgroundDetectContent
         },
         {
-          id: "slide scan",
+          id: "Slide Scan",
           icon: "settings_overscan",
           component: slideScanContent
         },
         {
-          id: "scan list",
+          id: "Scan List",
           icon: "photo_library",
           component: ScanListContent
         }
diff --git a/webapp/src/components/tabContentComponents/aboutComponents/devTools.vue b/webapp/src/components/tabContentComponents/aboutComponents/devTools.vue
index 0bcc9cb5..0c17a105 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/devTools.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/devTools.vue
@@ -25,12 +25,6 @@
         Apply
       </button>
     </form>
-    <form class="uk-form-stacked" @submit.prevent="resetTour">
-      <label class="uk-form-label">Re-run tour on next load</label>
-      <button class="uk-button uk-button-default uk-margin-small">
-        Reset
-      </button>
-    </form>
   </div>
 </template>
 
diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index dc34291f..e3ca4f35 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -3,12 +3,12 @@
     <div v-if="$store.state.available">
       <div>
         <div class="uk-margin-small-bottom">
-          <b>Microscope hostname:</b>
+          <b>Microscope Hostname:</b>
           <br />
           {{ $store.state.microscopeHostname }}
         </div>
         <div class="uk-margin-small-bottom">
-          <b>API origin:</b>
+          <b>API Origin:</b>
           <br />
           {{ $store.state.origin }}
         </div>
@@ -24,7 +24,7 @@
       <hr />
 
       <div>
-        <b>Server version:</b> <br />
+        <b>Server Version:</b> <br />
         TODO
       </div>
 
diff --git a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
index 11c4cc64..8d6c8bac 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
@@ -19,14 +19,14 @@
               <propertyControl
                 thing-name="background_detect"
                 property-name="fraction"
-                label="Sample coverage required (%)"
+                label="Sample Coverage Required (%)"
               />
             </div>
             <div class="uk-margin">
               <action-button
                 thing="background_detect"
                 action="background_fraction"
-                submit-label="Check coverage"
+                submit-label="Check Coverage"
                 :can-terminate="false"
                 :poll-interval="0.1"
                 @response="alertBackgroundFraction"
@@ -40,7 +40,7 @@
         <action-button
           thing="background_detect"
           action="set_background"
-          submit-label="Set background"
+          submit-label="Set Background"
           :can-terminate="false"
           :poll-interval="0.1"
           @response="alertBackgroundSet"
@@ -50,7 +50,7 @@
         <action-button
           thing="background_detect"
           action="image_is_sample"
-          submit-label="Check current image"
+          submit-label="Check Current Image"
           :can-terminate="false"
           :poll-interval="0.1"
           @response="alertImageLabel"
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index adf0c863..0aaf3af7 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -5,9 +5,9 @@
     uk-grid
   >
     <div class="uk-width-large">
-      <h3>Camera/stage mapping</h3>
+      <h3>Camera to Stage Mapping</h3>
       <p>
-        Camera/stage mapping allows the stage to move relative to the camera
+        Camera-stage mapping allows the stage to move relative to the camera
         view. This enables functions like click-to-move, and more precise tile
         scans.
       </p>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index 5c9d02c4..8c892057 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -11,7 +11,7 @@
         "
         thing="camera_stage_mapping"
         action="calibrate_xy"
-        :submit-label="'Auto-Calibrate using camera'"
+        :submit-label="'Auto-Calibrate Using Camera'"
         :modal-progress="true"
         @response="onRecalibrateResponse"
         @error="modalError"
@@ -24,7 +24,7 @@
       class="uk-button uk-button-default uk-width-1-1"
       @click="getCalibrationData()"
     >
-      Download calibration data
+      Download Calibration Data
     </button>
   </div>
 </template>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index 2ad51115..69f3f837 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -13,19 +13,19 @@
                 <a class="uk-accordion-title" href="#">Pi Camera Settings</a>
                 <div class="uk-accordion-content">
                   <PropertyControl
-                    label="Exposure time (0-33251)"
+                    label="Exposure Time (0-33251)"
                     property-name="exposure_time"
                     thing-name="camera"
                     :read-back-delay="1000"
                   />
                   <PropertyControl
-                    label="Analogue gain"
+                    label="Analogue Gain"
                     property-name="analogue_gain"
                     thing-name="camera"
                     :read-back-delay="1000"
                   />
                   <PropertyControl
-                    label="Colour gains"
+                    label="Colour Gains"
                     property-name="colour_gains"
                     thing-name="camera"
                     :read-back-delay="1000"
@@ -36,13 +36,13 @@
                 <a class="uk-accordion-title" href="#">Image Quality</a>
                 <div class="uk-accordion-content">
                   <PropertyControl
-                    label="MJPEG stream bit rate"
+                    label="MJPEG Stream Bit Rate"
                     property-name="mjpeg_bitrate"
                     thing-name="camera"
                     :read-back-delay="100"
                   />
                   <PropertyControl
-                    label="MJPEG stream resolution"
+                    label="MJPEG Stream Resolution"
                     property-name="stream_resolution"
                     thing-name="camera"
                     :read-back-delay="100"
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
index 324ddcc5..348a9227 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
@@ -21,7 +21,7 @@
         :requires-confirmation="false"
         thing="camera"
         action="auto_expose_from_minimum"
-        :submit-label="'Auto gain &amp; shutter speed'"
+        :submit-label="'Auto Gain &amp; Shutter Speed'"
         @response="onRecalibrateResponse"
         @error="modalError"
       />
@@ -32,7 +32,7 @@
         :requires-confirmation="false"
         thing="camera"
         action="calibrate_white_balance"
-        :submit-label="'Auto white balance'"
+        :submit-label="'Auto White Balance'"
         @response="onRecalibrateResponse"
         @error="modalError"
       />
@@ -47,7 +47,7 @@
         "
         thing="camera"
         action="calibrate_lens_shading"
-        :submit-label="'Auto flat field correction'"
+        :submit-label="'Auto Flat Field Correction'"
         @response="onRecalibrateResponse"
         @error="modalError"
       />
@@ -63,7 +63,7 @@
         :requires-confirmation="false"
         thing="camera"
         action="flat_lens_shading"
-        :submit-label="'Disable flat field correction'"
+        :submit-label="'Disable Flat Field Correction'"
         @response="onRecalibrateResponse"
         @error="modalError"
       />
@@ -78,7 +78,7 @@
         :requires-confirmation="false"
         thing="camera"
         action="reset_lens_shading"
-        :submit-label="'Reset flat field correction'"
+        :submit-label="'Reset Flat Field Correction'"
         @response="onRecalibrateResponse"
         @error="modalError"
       />
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue
index c85ff7d9..b6013c11 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue
@@ -1,10 +1,10 @@
 <template>
   <div id="streamSettings" class="uk-width-large">
     <div>
-      <h3>Stream settings</h3>
+      <h3>Stream Settings</h3>
       <label
         ><input v-model="disableStream" class="uk-checkbox" type="checkbox" />
-        Disable web stream</label
+        Disable Web Stream</label
       >
       <p class="uk-margin-small">
         This will disable the embedded web stream of the camera.
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index 58ad15fd..6bd51825 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -3,7 +3,7 @@
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="settings-nav">
       <ul class="uk-nav uk-nav-default">
-        <li class="uk-nav-header">Application settings</li>
+        <li class="uk-nav-header">Application Settings</li>
         <li>
           <tabIcon
             id="settings-display-icon"
@@ -30,7 +30,7 @@
             Features
           </tabIcon>
         </li>
-        <li class="uk-nav-header">Microscope settings</li>
+        <li class="uk-nav-header">Microscope Settings</li>
         <li>
           <tabIcon
             id="settings-camera-icon"
@@ -67,15 +67,14 @@
             :current-tab="currentTab"
             @set-tab="setTab"
           >
-            Camera/stage mapping
+            Camera to Stage Mapping
           </tabIcon>
         </li>
       </ul>
       <action-button
         thing="settings"
         action="save_all_thing_settings"
-        submit-label="Save all settings"
-        class="uk-margin"
+        submit-label="Save All Settings"
       />
     </div>
     <div class="view-component uk-width-expand uk-padding-small">
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index a0e1267f..fb031ddf 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -21,7 +21,7 @@
                 <propertyControl
                   thing-name="smart_scan"
                   property-name="autofocus_dz"
-                  label="Autofocus range (steps)"
+                  label="Autofocus Range (steps)"
                 />
               </div>
               <div class="uk-margin">
@@ -35,21 +35,21 @@
                 <propertyControl
                   thing-name="autofocus"
                   property-name="stack_images_to_capture"
-                  label="Images in stack to capture"
+                  label="Images in Stack to Capture"
                 />
               </div>
               <div class="uk-margin">
                 <propertyControl
                   thing-name="smart_scan"
                   property-name="overlap"
-                  label="Image overlap (0-1)"
+                  label="Image Overlap (0-1)"
                 />
               </div>
               <div class="uk-margin">
                 <propertyControl
                   thing-name="smart_scan"
                   property-name="stitch_tiff"
-                  label="When stitching, produce a pyramidal tiff"
+                  label="When Stitching, Produce a Pyramidal TIFF"
                 />
               </div>
             </div>
@@ -61,14 +61,14 @@
                 <propertyControl
                   thing-name="smart_scan"
                   property-name="skip_background"
-                  label="Detect and skip empty fields"
+                  label="Detect and Skip Empty Fields"
                 />
               </div>
               <div class="uk-margin">
                 <propertyControl
                   thing-name="smart_scan"
                   property-name="stitch_automatically"
-                  label="Automatically stitch images together"
+                  label="Automatically Stitch Images Together"
                 />
               </div>
             </div>
@@ -89,7 +89,7 @@
             thing="smart_scan"
             action="sample_scan"
             :submit-data="{ scan_name: scan_name }"
-            submit-label="Start smart scan"
+            submit-label="Start Smart Scan"
             :can-terminate="true"
             @taskStarted="startScanning"
             @update:taskStatus="taskStatus = $event"