From 46f598b6412dac7cf53c6692c1805fb876a2f386 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Tue, 2 Jan 2018 00:21:00 +0100
Subject: [PATCH] update to settings tab for theme switcher

---
 src/app/tabs/settings-tab.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js
index 108dbd1ce2..5a1e67aeb8 100644
--- a/src/app/tabs/settings-tab.js
+++ b/src/app/tabs/settings-tab.js
@@ -28,6 +28,9 @@ var css = csjs`
     padding: .5em;
     font-weight: bold;
   }
+  .crow label {
+    cursor:pointer;
+  }
   .crowNoFlex {
     overflow: auto;
     clear: both;
@@ -81,6 +84,15 @@ function SettingsTab (container, appAPI, appEvents, opts) {
         <div><input id="optimize" type="checkbox"></div>
         <span class="${css.checkboxText}">Enable Optimization</span>
       </div>
+      <h4 class="${css.heading}">Themes</h4>
+      <div class="${css.crow}">
+        <div><input class="${css.col1}" name="theme" id="themeLight" type="radio"></div>
+        <label for="themeLight">Light Theme</label>
+      </div>
+      <div class="${css.crow}">
+        <div><input class="${css.col1}" name="theme" id="themeDark" type="radio"></div>
+        <label for="themeDark">Dark Theme</label>
+      </div>
       <hr>
       <div class="${css.crowNoFlex}">
         <div>Plugin (<i title="Do not use this feature yet" class="fa fa-exclamation-triangle" aria-hidden="true"></i><span> Do not use this alpha feature if you are not sure what you are doing!</span>)</div>
@@ -89,15 +101,6 @@ function SettingsTab (container, appAPI, appEvents, opts) {
           <input onclick=${loadPlugin} type="button" value="Load" class="${css.pluginLoad}">
         </div>
       </div>
-      <h4 class="${css.heading}">Themes</h4>
-      <div class="${css.crow}">
-        <div><input class="${css.col1}" name="theme" id="themeLight" type="radio"></div>
-        <span class="${css.radioText}">Light Theme</span>
-      </div>
-      <div class="${css.crow}">
-        <div><input class="${css.col1}" name="theme" id="themeDark" type="radio"></div>
-        <span class="${css.radioText}">Dark Theme</span>
-      </div>
     </div>
   `