themes setting tabbed styled

the themes tab has been brought into alignment with the new design, so
the only thing that remains is redoing responsive styles for the
settings page

whew

public/assets/css/dash/settings.css

@@ -251,17 +251,62 @@ section#site-features > div.site-maintenance {
   color: var(--primary);
 }
 
-section[class="member-settings"] > div[class="theme"] button[data-enabled="true"] {
+/*
-  color: var(--white);
+    SITE FEATURES TAB
-  background: var(--secondary-highlight);
+*/
+
+section#site-themes > button {
+  background: var(--secondary);
   display: inline-block;
   border-radius: 3px;
   padding: 3px;
-  width: 83%;
+  width: 250px;
-  margin-right: 5px;
+  height: 200px;
+  margin: 10px 0;
 }
 
-section[class="member-settings"] > div[class="theme"] a {
+section#site-themes > button > div {
+  height: 145px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: -10px;
+  position: relative;
+  border-radius: 3px;
+}
+
+section#site-themes > button[data-enabled="true"] > div {
+  background: var(--secondary-highlight);
+  color: var(--secondary);
+}
+
+section#site-themes > button[data-enabled="true"] label {
+  color: var(--primary);
+}
+
+section#site-themes > button[data-enabled="false"] > div {
+  background: var(--primary);
+  color: var(--secondary);
+}
+
+section#site-themes > button[data-enabled="false"] label {
+  color: var(--secondary);
+}
+
+section#site-themes > button[data-enabled="true"] > svg {
+  fill: var(--primary);
+  position: relative;
+  top: 5px;
+}
+
+section#site-themes > button[data-enabled="false"] > svg {
+  fill: var(--primary);
+  position: relative;
+  top: 5px;
+}
+
+section#site-themes > a {
   background: var(--secondary-highlight);
   display: inline-block;
   width: 15%;
@@ -269,15 +314,8 @@ section[class="member-settings"] > div[class="theme"] a {
   text-align: center;
   vertical-align: top;
   top: 13px;
-  position: relative;
+  position: absolute;
-}
+  z-index: 30;
-
-section[class="member-settings"] > div[class="theme"] button[data-enabled="false"] {
-  color: var(--primary);
-  background: var(--secondary);
-  display: block;
-  border-radius: 3px;
-  padding: 3px;
 }
 
 section[class="data-settings"] {

public/assets/scripts/dash/app/controllers/SettingsIndex.js

@@ -170,9 +170,19 @@ export default class SettingsIndex {
 		e.preventDefault();
 		let themes = document.querySelectorAll('.theme-select');
 		for (var i = 0, length = themes.length; i < length; i++) {
-			e.target.id == themes[i].id
+			let theme = e.target.id;
-				? themes[i].setAttribute('data-enabled', 'true')
+			if (e.target.id == '') {
-				: themes[i].setAttribute('data-enabled', 'false');
+				theme = e.target.getAttribute('for');
+			}
+			if (theme == themes[i].id) {
+				themes[i].setAttribute('data-enabled', 'true');
+				document.getElementById('label-' + themes[i].id).innerHTML =
+					'ACTIVE THEME';
+			} else {
+				themes[i].setAttribute('data-enabled', 'false');
+				document.getElementById('label-' + themes[i].id).innerHTML =
+					'INACTIVE THEME';
+			}
 		}
 	}
 	handleMailOptions(e) {

resources/views/back/settings.blade.php

@@ -43,7 +43,7 @@
 
                 </div>
             </section>
-            <section id="site-features" class="section-tab show">
+            <section id="site-features" class="section-tab hide">
                 <div class="features-mail">
                     <label>SYSTEM EMAIL</label>
                     <div>
@@ -142,28 +142,33 @@
                     </div>
                 </div>
             </section>
-            <section id="site-themes" class="section-tab hide">
+            <section id="site-themes" class="section-tab show">
-                MEMBER THEMES
-                <div class="theme">
-                    <label>Themes</label><br/>
                 @foreach($themes as $theme)
                     @if($theme['name'] == $currentTheme)
+                        <!--
+                        <a target="_blank" href='/theme'>Edit</a>
+                        -->
                         <button id="{{ $theme['name'] }}" class="theme-select" data-enabled="true">
+                            <div for="{{ $theme['name'] }}">
+                                <label id="label-{{ $theme['name'] }}">ACTIVE THEME</label>
+                            </div>
                             <svg id="nav-menu-icon" class="icon">
                                 <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
                             </svg>
-                                <span>{{ $theme['display-name'] }}</span>
+                            <span for="{{ $theme['name'] }}">{{ $theme['display-name'] }}</span>
-                            </button><a target="_blank" href='/theme'>Edit</a>
+                        </button>
                     @else
-                            <button href="#" id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
+                        <button id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
+                            <div for="{{ $theme['name'] }}">
+                                <label id="label-{{ $theme['name'] }}">INACTIVE THEME</label>
+                            </div>
                             <svg id="nav-menu-icon" class="icon">
                                 <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
                             </svg>
-                                <span>{{ $theme['display-name'] }}</span>
+                            <span for="{{ $theme['name'] }}">{{ $theme['display-name'] }}</span>
                         </button>
                     @endif
                 @endforeach
-                </div>
             </section>
         </section>
     </article>