Cleaned some form styling

Removed uppercasing of labels to make a little friendlier.
Extracted out toggleswitch JS into own component.
Improved basic code input for html-head-input area.

resources/assets/js/components/index.js

@@ -16,6 +16,7 @@ let componentMapping = {
     'editor-toolbox': require('./editor-toolbox'),
     'image-picker': require('./image-picker'),
     'collapsible': require('./collapsible'),
+    'toggle-switch': require('./toggle-switch'),
 };
 
 window.components = {};

resources/assets/js/components/toggle-switch.js

@@ -0,0 +1,19 @@
+
+class ToggleSwitch {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.input = elem.querySelector('input');
+
+        this.elem.onclick = this.onClick.bind(this);
+    }
+
+    onClick(event) {
+        let checked = this.input.value !== 'true';
+        this.input.value = checked ? 'true' : 'false';
+        checked ? this.elem.classList.add('active') : this.elem.classList.remove('active');
+    }
+
+}
+
+module.exports = ToggleSwitch;

resources/assets/sass/_forms.scss

@@ -98,7 +98,6 @@ label {
   font-size: 0.94em;
   font-weight: 400;
   color: #999;
-  text-transform: uppercase;
   padding-bottom: 2px;
   margin-bottom: 0.2em;
   &.inline {
@@ -192,6 +191,13 @@ input:checked + .toggle-switch {
   }
 }
 
+.simple-code-input {
+  background-color: #F8F8F8;
+  font-family: monospace;
+  font-size: 12px;
+  min-height: 100px;
+}
+
 .form-group {
   .text-pos, .text-neg {
     padding: $-xs 0;

resources/lang/en/settings.php

@@ -19,7 +19,7 @@ return [
     'app_settings' => 'App Settings',
     'app_name' => 'Application name',
     'app_name_desc' => 'This name is shown in the header and any emails.',
-    'app_name_header' => 'Show Application name in header?',
+    'app_name_header' => 'Show application name in header?',
     'app_public_viewing' => 'Allow public viewing?',
     'app_secure_images' => 'Enable higher security image uploads?',
     'app_secure_images_desc' => 'For performance reasons, all images are public. This option adds a random, hard-to-guess string in front of image urls. Ensure directory indexes are not enabled to prevent easy access.',
@@ -31,7 +31,7 @@ return [
     'app_logo_desc' => 'This image should be 43px in height. <br>Large images will be scaled down.',
     'app_primary_color' => 'Application primary color',
     'app_primary_color_desc' => 'This should be a hex value. <br>Leave empty to reset to the default color.',
-    'app_homepage' => 'Application Homepage',
+    'app_homepage' => 'Application homepage',
     'app_homepage_desc' => 'Select a page to show on the homepage instead of the default view. Page permissions are ignored for selected pages.',
     'app_homepage_default' => 'Default homepage view chosen',
     'app_disable_comments' => 'Disable comments',

resources/views/components/toggle-switch.blade.php

@@ -1,15 +1,4 @@
 <div toggle-switch="{{$name}}" class="toggle-switch @if($value) active @endif">
     <input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
     <div class="switch-handle"></div>
-</div>
-<script>
-    (function() {
-       var toggle = document.querySelector('[toggle-switch="{{$name}}"]');
-       var toggleInput = toggle.querySelector('input');
-       toggle.onclick = function(event) {
-           var checked = toggleInput.value !== 'true';
-           toggleInput.value = checked ? 'true' : 'false';
-           checked ? toggle.classList.add('active') : toggle.classList.remove('active');
-       };
-    })()
-</script>
+</div>

resources/views/settings/index.blade.php

@@ -88,7 +88,7 @@
                 <div class="form-group">
                     <label for="setting-app-custom-head">{{ trans('settings.app_custom_html') }}</label>
                     <p class="small">{{ trans('settings.app_custom_html_desc') }}</p>
-                    <textarea name="setting-app-custom-head" id="setting-app-custom-head">{{ setting('app-custom-head', '') }}</textarea>
+                    <textarea class="simple-code-input" name="setting-app-custom-head" id="setting-app-custom-head">{{ setting('app-custom-head', '') }}</textarea>
                 </div>
 
                 <div class="form-group text-right">