From a5cf8816f04968f534c72d2424ba68a923ebe3fb Mon Sep 17 00:00:00 2001
From: ro <iam@roiskinda.cool>
Date: Sun, 26 May 2024 14:38:46 -0600
Subject: [PATCH] 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           | 68 +++++++++++++++----
 .../dash/app/controllers/SettingsIndex.js     | 16 ++++-
 resources/views/back/settings.blade.php       | 51 +++++++-------
 3 files changed, 94 insertions(+), 41 deletions(-)

diff --git a/public/assets/css/dash/settings.css b/public/assets/css/dash/settings.css
index 5c2bddc..d2509d2 100644
--- a/public/assets/css/dash/settings.css
+++ b/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);
-  background: var(--secondary-highlight);
+/*
+    SITE FEATURES TAB
+*/
+
+section#site-themes > button {
+  background: var(--secondary);
   display: inline-block;
   border-radius: 3px;
   padding: 3px;
-  width: 83%;
-  margin-right: 5px;
+  width: 250px;
+  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;
-}
-
-section[class="member-settings"] > div[class="theme"] button[data-enabled="false"] {
-  color: var(--primary);
-  background: var(--secondary);
-  display: block;
-  border-radius: 3px;
-  padding: 3px;
+  position: absolute;
+  z-index: 30;
 }
 
 section[class="data-settings"] {
diff --git a/public/assets/scripts/dash/app/controllers/SettingsIndex.js b/public/assets/scripts/dash/app/controllers/SettingsIndex.js
index dec9d88..5e7f0fe 100644
--- a/public/assets/scripts/dash/app/controllers/SettingsIndex.js
+++ b/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
-				? themes[i].setAttribute('data-enabled', 'true')
-				: themes[i].setAttribute('data-enabled', 'false');
+			let theme = e.target.id;
+			if (e.target.id == '') {
+				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) {
diff --git a/resources/views/back/settings.blade.php b/resources/views/back/settings.blade.php
index 0426858..2269a9e 100644
--- a/resources/views/back/settings.blade.php
+++ b/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">
-                MEMBER THEMES
-                <div class="theme">
-                    <label>Themes</label><br/>
-                    @foreach($themes as $theme)
-                        @if($theme['name'] == $currentTheme)
-                            <button id="{{ $theme['name'] }}" class="theme-select" data-enabled="true">
-                                <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>
-                            </button><a target="_blank" href='/theme'>Edit</a>
-                        @else
-                            <button href="#" id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
-                                <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>
-                            </button>
-                        @endif
-                    @endforeach
-                </div>
+            <section id="site-themes" class="section-tab show">
+                @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 for="{{ $theme['name'] }}">{{ $theme['display-name'] }}</span>
+                        </button>
+                    @else
+                        <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 for="{{ $theme['name'] }}">{{ $theme['display-name'] }}</span>
+                        </button>
+                    @endif
+                @endforeach
             </section>
         </section>
     </article>