[design] change menu control order

Author: zombieFox

src/index.html

@@ -171,15 +171,15 @@ <h1 class="menu-item-header-text">Global scaling</h1>
 <divclass="control-layout-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
 </div>
 </div>
+<divclass="form-wrap">
+<buttonclass="control-layout-size-default button" tabindex="1">Default Global scaling size</button>
+</div>
 <divclass="form-helper">
 <pclass="control-layout-size-helper form-helper-item">Resize all elements on the page.</p>
 </div>
 <divclass="form-helper">
 <pclass="control-layout-size-helper form-helper-item">Take care as some elements could scale up to outside the page.</p>
 </div>
-<divclass="form-wrap">
-<buttonclass="control-layout-size-default button" tabindex="1">Default Global scaling size</button>
-</div>
 </div>
 </div>
 <divclass="menu-item">
@@ -331,12 +331,12 @@ <h1 class="menu-item-header-text">Area</h1>
 <divclass="control-header-area-width-count form-group-text form-group-item-medium form-group-radius-left"></div>
 </div>
 </div>
-<divclass="form-helper">
-<pclass="control-header-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
-</div>
 <divclass="form-wrap">
 <buttonclass="control-header-area-width-match button" tabindex="-1">Match Bookmarks Area</button>
 </div>
+<divclass="form-helper">
+<pclass="control-header-area-width-helper form-helper-item">Max width is defined by Layout Area Width.</p>
+</div>
 <hr>
 <divclass="form-wrap">
 <divclass="form-wrap">
@@ -1705,12 +1705,12 @@ <h1 class="menu-item-header-text">Colour</h1>
 <inputid="control-theme-color-rgb-hex" class="form-group-item-half control-theme-color-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
 </div>
 </div>
-<divclass="form-helper">
-<pclass="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p>
-</div>
 <divclass="form-wrap">
 <buttonclass="control-theme-color-rgb-default button" tabindex="-1">Default primary colour</button>
 </div>
+<divclass="form-helper">
+<pclass="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p>
+</div>
 <hr>
 <divclass="form-wrap">
 <labelfor="control-theme-color-hsl-h">Hue</label>
@@ -1862,23 +1862,6 @@ <h1 class="menu-item-header-text">Shadow</h1>
 <divclass="form-wrap">
 <buttonclass="control-theme-shadow-default button" tabindex="-1">Default shadow size</button>
 </div>
-<hr>
-<divclass="form-wrap">
-<divclass="form-inline form-inline-space-between">
-<divclass="theme-shadow-box theme-shadow-box-small">
-<pclass="mb-0 small">Small shadows</p>
-</div>
-<divclass="theme-shadow-box theme-shadow-box-medium">
-<pclass="mb-0 small">Medium shadows</p>
-</div>
-<divclass="theme-shadow-box theme-shadow-box-large">
-<pclass="mb-0 small">Large shadows</p>
-</div>
-</div>
-</div>
-<divclass="form-helper">
-<pclass="control-theme-shadow-helper form-helper-item">Bookmarks and Modals use the Large shadow.</p>
-</div>
 </div>
 </div>
 <divclass="menu-item">