[design] improve the menu with new labels and better nesting for some sections

src/css/menu.css

@@ -115,7 +115,7 @@
 }
 
 .menu-content-item {
-  padding: calc(var(--menu-space) * 3);
+  padding: calc(var(--menu-space) * 2) calc(var(--menu-space) * 3);
   position: relative;
   z-index: 1;
 }
@@ -125,7 +125,7 @@
 }
 
 .menu-item-header {
-  margin-bottom: calc(var(--menu-space) * 2);
+  margin-bottom: calc(var(--menu-space) * 1);
 }
 
 .menu-item-header-text {
@@ -196,11 +196,11 @@
   }
 
   .menu-content-item {
-    padding: calc(var(--menu-space) * 4);
+    padding: calc(var(--menu-space) * 3) calc(var(--menu-space) * 4);
   }
 
   .menu-item-header {
-    margin-bottom: calc(var(--menu-space) * 3);
+    margin-bottom: calc(var(--menu-space) * 2);
   }
 
   .menu-nav-item {
@@ -272,11 +272,7 @@
   }
 
   .menu-content-item {
-    padding: calc(var(--menu-space) * 5);
+    padding: calc(var(--menu-space) * 4) calc(var(--menu-space) * 5);
-  }
-
-  .menu-item-header {
-    margin-bottom: calc(var(--menu-space) * 4);
   }
 
   .menu-close-tab {

src/css/typography.css

@@ -68,7 +68,7 @@ hr {
   border: 0;
   border-top: var(--horizontal-rule-small);
   border-radius: var(--theme-radius);
-  margin: var(--form-wrap-space) 0;
+  margin: calc(var(--form-wrap-space) * 1.5) 0;
   clear: both;
 }
 

src/html/menu/menu-content/header.html

@@ -43,6 +43,7 @@
       <div class="form-helper">
         <p class="control-header-area-justify-helper form-helper-item">Effects may not be visible if the Header Area is full width.</p>
       </div>
+      <div class="form-wrap">
         <div class="form-indent">
           <hr>
           <div class="form-wrap">
@@ -63,6 +64,7 @@
             <p class="control-header-area-align-baseline-helper form-helper-item">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</p>
           </div>
         </div>
+      </div>
       <hr>
       <div class="form-wrap">
         <div class="form-wrap">
@@ -111,6 +113,9 @@
       </div>
       <div class="form-wrap">
         <div class="form-indent">
+          <div class="form-wrap">
+            <label class="control-header-greeting-type-label">Wording</label>
+          </div>
           <div class="form-wrap">
             <input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="-1">
             <label for="control-header-greeting-type-good"><span class="label-icon"></span> "Good morning..."</label>
@@ -163,6 +168,9 @@
       </div>
       <div class="form-wrap">
         <div class="form-indent">
+          <div class="form-wrap">
+            <label class="control-header-transitional-type-label">Wording</label>
+          </div>
           <div class="form-wrap">
             <input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="-1">
             <label for="control-header-transitional-type-timeanddate"><span class="label-icon"></span> "The time and date is"</label>

src/html/menu/menu-content/theme.html

@@ -43,6 +43,9 @@
         <input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
         <label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
       </div>
+      <div class="form-helper">
+        <p class="control-theme-style-helper form-helper-item">Flip the colour shades defined by the primary Colour.</p>
+      </div>
       <div class="form-helper">
         <p class="control-theme-style-helper form-helper-item">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
       </div>
@@ -71,6 +74,7 @@
       </div>
       <div class="form-wrap">
         <div class="form-indent">
+          <hr>
           <div class="form-wrap">
             <label for="control-theme-font-display-weight-range">Font weight</label>
             <div class="form-group form-group-block">
@@ -131,6 +135,7 @@
       </div>
       <div class="form-wrap">
         <div class="form-indent">
+          <hr>
           <div class="form-wrap">
             <label for="control-theme-font-ui-weight">Font weight</label>
             <div class="form-group form-group-block">
@@ -270,6 +275,8 @@
       <div class="form-helper">
         <p class="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p>
       </div>
+      <div class="form-wrap">
+        <div class="form-indent">
           <hr>
           <div class="form-wrap">
             <label for="control-theme-color-hsl-h-range">Hue</label>
@@ -333,6 +340,8 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
   <div id="menu-content-theme-accent" class="menu-content-item">
     <div class="menu-item-header">
       <h1 class="menu-item-header-text">Accent</h1>

src/js/control.js

@@ -6441,6 +6441,7 @@ var control = (function() {
             return [
               "[for=control-header-greeting-name]",
               ".control-header-greeting-name",
+              ".control-header-greeting-type-label",
               ".control-header-greeting-type-good",
               ".control-header-greeting-type-hello",
               ".control-header-greeting-type-hi",
@@ -6549,6 +6550,7 @@ var control = (function() {
           },
           dependents: function() {
             return [
+              ".control-header-transitional-type-label",
               ".control-header-transitional-type-timeanddate",
               ".control-header-transitional-type-its",
               "[for=control-header-transitional-size-range]",